No mixed content (HTTP resources on HTTPS pages)

Mixed content — HTTP resources loaded on an HTTPS page — exposes those resources to network interception and modification. An attacker on the same network can intercept an HTTP image, script, or stylesheet load and replace it with malicious content, even though the page itself was delivered over HTTPS. Browsers block active mixed content (scripts, iframes) but may load passive mixed content (images, audio) with a warning. CWE-319 applies directly — data transmitted over cleartext HTTP is exposed. OWASP A02 (Cryptographic Failures) lists hardcoded http:// resource URLs as a transport security failure that undermines the HTTPS guarantee users expect.

Replace every hardcoded http:// resource URL with https:// or a protocol-relative URL. Search systematically across all components and templates.

// WRONG: HTTP resource on HTTPS page (blocked or warned)
<img src="http://cdn.example.com/hero.jpg" />
<script src="http://analytics.example.com/track.js" />

// CORRECT: explicit HTTPS
<img src="https://cdn.example.com/hero.jpg" />

// ALSO CORRECT: protocol-relative (inherits page protocol)
<img src="//cdn.example.com/hero.jpg" />

// BEST: same-origin relative path
<img src="/images/hero.jpg" />

Search: grep -rn 'http://' src/ --include='*.tsx' --include='*.ts' --include='*.css'. The upgrade-insecure-requests CSP directive is a safety net for cases you miss, but the authoritative fix is correcting the URLs at source.

• ID: security-headers-ii.transport-hardening.no-mixed-content

• Severity: critical

• What to look for: Search all page components, templates, and layout files for resource references: <img src>, <script src>, <link href>, <iframe src>, <video src>, <audio src>, <form action>, CSS url() values, and any hardcoded URLs in source code. For each, check whether the URL uses http:// explicitly. Count all resource URLs and how many use http://.

• Pass criteria: 0 resource URLs use http:// instead of https://. Count all resource URLs found across all page components and report: "0 of Y resource URLs use http:// instead of https://." Protocol-relative URLs (//example.com/...) and relative paths (/images/...) are acceptable.

• Fail criteria: At least 1 resource URL uses http:// explicitly.

• Skip (N/A) when: Never skip — this check applies to every project that serves HTML pages.

• Detail on fail: "X of Y resource URLs use http:// instead of https://" or "Image src in HeroSection uses http://cdn.example.com/hero.jpg — mixed content on HTTPS page"

• Remediation: Mixed content (HTTP resources on HTTPS pages) is blocked by modern browsers or triggers security warnings. Replace all http:// URLs with https://:

  // WRONG: mixed content
  <img src="http://cdn.example.com/image.jpg" />
  
  // CORRECT: HTTPS
  <img src="https://cdn.example.com/image.jpg" />
  
  // ALSO CORRECT: protocol-relative (inherits page protocol)
  <img src="//cdn.example.com/image.jpg" />
  
  // BEST: relative path (same-origin)
  <img src="/images/image.jpg" />
  

  The upgrade-insecure-requests CSP directive can help as a safety net, but fixing URLs at the source is better.