detect-mixed-content

⚠️ This rule errors by default in the recommended config.

Quick Summary

Rule Details

Mixed content occurs when HTTPS pages load resources over HTTP. This weakens the security of the entire page, as attackers can intercept or modify the insecure resources through man-in-the-middle attacks.

This rule detects http:// strings written in a subresource position — <img src>, <script src>, el.src = …, setAttribute('src', …), importScripts(…) and the like — which is the one shape a browser actually blocks as mixed content. Other hardcoded http:// URLs are handled by the rule family: the URL argument of a fetch/axios call by require-https-only, everything else by no-http-urls — so each line draws exactly one finding.

Built-in exemption: XML namespace identifiers

XML namespace URIs — http://www.w3.org/2000/svg, http://www.w3.org/1999/xhtml, http://www.w3.org/1999/xlink, http://www.w3.org/XML/1998/namespace, http://www.w3.org/2000/xmlns/ — are never reported, whether written as a bare constant, an xmlns attribute, or a createElementNS / setAttributeNS argument. They are opaque identifiers compared byte-for-byte; nothing is ever fetched from them, so no mixed-content load exists, and rewriting one to https:// breaks the document.

Examples

❌ Incorrect

// Loading resources over HTTP
const imageUrl = 'http://example.com/logo.png';
const apiEndpoint = 'http://api.example.com/data';

// External script over HTTP
<script src="http://example.com/tracking.js"></script>;

// Fetching data without TLS
fetch('http://api.example.com/users');

✅ Correct

// All resources over HTTPS
const imageUrl = 'https://example.com/logo.png';
const apiEndpoint = 'https://api.example.com/data';

// External script over HTTPS
<script src="https://example.com/tracking.js"></script>;

// Secure fetch
fetch('https://api.example.com/users');

// Protocol-relative URLs (inherits page protocol)
const cdnUrl = '//cdn.example.com/asset.js';

Error Message Format

The rule provides LLM-optimized error messages (Compact 2-line format) with actionable security guidance:

🔒 CWE-311 OWASP:A04 CVSS:7.5 | Missing Encryption of Sensitive Data detected | HIGH
   Fix: Review and apply the recommended fix | https://owasp.org/Top10/A04_2021/

Message Components

Known False Negatives

The following patterns are not detected due to static analysis limitations:

URL from Variables

Why: URLs constructed dynamically cannot be traced.

// ❌ NOT DETECTED - Dynamic URL
const protocol = isDevMode ? 'http' : 'https';
const url = `${protocol}://api.example.com`;

Mitigation: Always use HTTPS in production, configure via environment.

Template Literals with Variables

Why: Only static string literals are checked.

// ❌ NOT DETECTED - Template with variable protocol
const baseUrl = `${config.protocol}://api.example.com`;

Mitigation: Validate URLs at runtime before use.

URLs in JSON/Config Files

Why: Rule only checks JavaScript/TypeScript files.

// ❌ NOT DETECTED - JSON config
{ "apiUrl": "http://api.example.com" }

Mitigation: Use separate config validation or JSON schema.

When Not To Use It

• In local development environments accessing localhost or 127.0.0.1
• When explicitly documenting insecure URLs in comments
• In test fixtures testing HTTP behavior

Further Reading

• OWASP Mixed Content
• MDN Mixed Content
• CWE-311: Missing Encryption

Related Rules

• no-disabled-certificate-validation
• no-insecure-ssl (planned) (in eslint-plugin-postgresql-security)

Category: Security
Type: Problem
Recommended: Yes