Skip to main content
Troubleshooting

Fix Mixed Content on HTTPS Pages

Detect and replace insecure HTTP resources on HTTPS pages.

CertOne2 min read

Mixed content occurs when an HTTPS page requests resources over HTTP. It can trigger warnings or blocked resources. This guide explains how to find and fix it.

1. What is mixed content?​

1. Definition​

An HTTPS page has mixed content when it loads resources such as images, scripts, or stylesheets over HTTP. Browsers may block or upgrade these requests and display warnings.

2. Categories​

Passive content:

  • Images, video, and audio
  • Browser behavior varies; requests may be upgraded or blocked

Active content:

  • Scripts, stylesheets, and iframes
  • Insecure requests are normally blocked

2. Detect mixed content​

1. Browser console​

Open developer tools (F12) and inspect the Console tab for mixed-content messages.

2. Online tools​

3. Command-line tools​

# Inspect with curl.
curl -I https://example.com | grep -i "content-security-policy"

3. Fixes​

1. Update resource URLs​

Use HTTPS URLs:

  • Replace HTTP resource URLs with HTTPS
  • Use relative URLs where appropriate

Example:

<!-- Incorrect -->
<img src="http://example.com/image.jpg">

<!-- Correct -->
<img src="https://example.com/image.jpg">

2. Protocol-relative URLs​

Protocol-relative syntax:

  • Uses //example.com/resource
  • Inherits the current page's scheme

Example:

<img src="//example.com/image.jpg">

3. Content Security Policy​

NGINX configuration:

add_header Content-Security-Policy "upgrade-insecure-requests" always;

Apache configuration:

Header always set Content-Security-Policy "upgrade-insecure-requests"

4. Common cases​

1. Images​

Problem: an HTTPS page loads an HTTP image.

Resolution:

  • Change the image URL to HTTPS
  • Or use a protocol-relative URL on an HTTPS-only site

2. External scripts​

Problem: an HTTPS page loads an HTTP script.

Resolution:

  • Use the CDN's HTTPS endpoint
  • Or host the script on your own HTTPS server

3. Stylesheets​

Problem: an HTTPS page loads an HTTP stylesheet.

Resolution:

  • Use the CDN's HTTPS endpoint
  • Or host the stylesheet on your own HTTPS server

Best practices​

1. Resource management​

  • ✅ Serve all resources over HTTPS
  • ✅ Use relative URLs appropriately
  • ✅ Configure a Content Security Policy

2. Verification​

  • ✅ Inspect the browser console
  • ✅ Check with online tools
  • ✅ Review mixed content regularly

Conclusion​

Replace insecure resource URLs and test browser behavior to resolve mixed content. Relative URLs and an appropriate CSP can support the migration.