Fix CSP Upgrade-Insecure-Requests for Mixed Content

In this tutorial, you'll learn about Fix CSP Upgrade. We cover key concepts, practical examples, and best practices.

Your HTTPS page loads images, scripts, or styles over HTTP, triggering mixed content warnings or blocks. The browser blocks active mixed content (scripts, iframes) and may warn about passive mixed content (images, audio). The upgrade-insecure-requests CSP directive tells the browser to automatically rewrite all HTTP URLs to HTTPS before fetching them.

Wrong

Mixed content exists on an HTTPS page and each resource must be manually updated to HTTPS.

Page URL: https://example.com/page

<img src="http://images.example.com/photo.jpg">
<script src="http://cdn.example.com/analytics.js"></script>
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Roboto">

Mixed Content: The page at 'https://example.com/page' was loaded over HTTPS,
but requested an insecure image 'http://images.example.com/photo.jpg'. This
content should also be served over HTTPS.

Mixed Content: The page at 'https://example.com/page' was loaded over HTTPS,
but requested an insecure script 'http://cdn.example.com/analytics.js'. This
request has been blocked; the content must be served over HTTPS.

The browser blocks the script entirely and may show a warning for the image. The stylesheet fails to load on some browsers.

Right

Add upgrade-insecure-requests to the CSP header. The browser automatically upgrades every HTTP URL to HTTPS.

Content-Security-Policy: upgrade-insecure-requests

<img src="http://images.example.com/photo.jpg">
<script src="http://cdn.example.com/analytics.js"></script>
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Roboto">

The browser internally rewrites all requests to HTTPS:

https://images.example.com/photo.jpg
https://cdn.example.com/analytics.js
https://fonts.googleapis.com/css?family=Roboto

With helmet:

app.use(helmet.contentSecurityPolicy({
  directives: {
    upgradeInsecureRequests: true,
  },
}));

No mixed content warnings appear. All resources load over HTTPS regardless of what the HTML specifies.

Prevention

• Add upgrade-insecure-requests as the first directive in your CSP header for maximum compatibility.
• Use this directive as a transitional measure while migrating all resource URLs to HTTPS in your source code.
• Do not rely on upgrade-insecure-requests as a permanent solution. Update your HTML to use HTTPS URLs directly.
• Combine with block-all-mixed-content if you want to block rather than upgrade passive mixed content.
• The directive applies to all resource types: images, scripts, styles, fonts, media, and XHR requests.
• If the HTTPS version of a resource does not exist or fails, the browser does not fall back to HTTP.

DodaTech Tools

Doda Browser shows both the original HTTP URL and the upgraded HTTPS URL in its network panel when upgrade-insecure-requests is active. DodaZIP's mixed content scanner identifies all HTTP resource references in HTML files for migration. Durga Antivirus Pro uses upgrade-insecure-requests across its management console to ensure all embedded threat feeds load over HTTPS.

FAQ