Mixed Content: The page was loaded over HTTPS, but requested an insecure resource

Workarounds

1. 94% success Audit and rewrite all HTTP asset URLs to HTTPS in templates, CSS, and CMS content

   1. Open browser DevTools → Console and filter for 'Mixed Content' errors to identify all HTTP resources
   2. Run: grep -r 'http://' templates/ static/ --include='*.html' --include='*.css' --include='*.js'
   3. Replace hardcoded http:// URLs with https:// for resources that support HTTPS
   4. For CMS content (WordPress, etc.), run a database search-and-replace: UPDATE wp_posts SET post_content = REPLACE(post_content, 'http://your-cdn.com', 'https://your-cdn.com')
   5. Use protocol-relative URLs (//example.com/resource) only as a last resort—they inherit the page protocol
   6. Verify with: curl -s https://yoursite.com | grep -o 'src="http://[^"]*"'

   Sources: https://developer.mozilla.org/en-US/docs/Web/Security/Mixed_content/How_to_fix_website_with_mixed_content

2. 82% success Add Content-Security-Policy: upgrade-insecure-requests header at the server level

   1. Add to nginx: add_header Content-Security-Policy "upgrade-insecure-requests";
   2. Add to Apache: Header always set Content-Security-Policy "upgrade-insecure-requests"
   3. Add to Express.js: res.setHeader('Content-Security-Policy', 'upgrade-insecure-requests')
   4. This automatically upgrades HTTP sub-resource requests to HTTPS before they are sent
   5. Verify: in DevTools Network tab, check that http:// requests show as upgraded to https://
   6. Note: only works when the HTTPS version of the resource exists at the same host/path

   Sources: https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/upgrade-insecure-requests

3. 88% success Self-host or replace third-party HTTP-only assets with HTTPS-capable alternatives

   1. Download the HTTP-only asset (font, library, image) and serve it from your HTTPS origin
   2. For Google Fonts, use the HTTPS URL: https://fonts.googleapis.com (already HTTPS)
   3. For jQuery/libraries, switch to a CDN that supports HTTPS: https://cdnjs.cloudflare.com
   4. For images, upload to your own server or an HTTPS-enabled CDN (Cloudflare Images, AWS S3 + CloudFront)
   5. Update all references in your templates to point to the new HTTPS URL

   Sources: https://developer.mozilla.org/en-US/docs/Web/Security/Mixed_content