Mixed Content Error: HTTP/HTTPS Mixed Content

Mixed content error occurs when an HTTPS page loads resources via insecure HTTP. This can include images, JavaScript scripts, CSS stylesheets, fonts, or AJAX requests. Modern browsers block these resources to protect users.

Mixed content compromises the security of your HTTPS site. Even if the main page is encrypted, an HTTP resource can be intercepted or modified by an attacker. That's why browsers are increasingly strict about this.

This guide helps you identify all resources causing mixed content errors and fix them. We'll also see how to prevent this problem during HTTP to HTTPS migrations.

Mixed Content Symptoms

How mixed content manifests:

• Padlock with warning: instead of a green padlock, you see a gray padlock with a warning triangle or information panel.
• Blocked resources: images don't appear, scripts don't work, or page styling is broken.
• Console warnings: the developer console displays "Mixed Content" warnings with URLs of problematic resources.
• Broken functionality: forms, sliders, or other interactive elements may not work if their scripts are blocked.

Mixed Content Sources

Common causes of mixed content:

• Hardcoded URLs: HTTP URLs hardcoded in HTML, CSS, or JavaScript instead of using relative URLs or HTTPS.
• Database content: articles, pages, or products contain images or links with HTTP URLs stored in the database.
• External resources: third-party scripts, Google fonts, or widgets loaded via HTTP instead of HTTPS.
• Incomplete migration: when switching to HTTPS, some HTTP references weren't updated.

Identify Mixed Content

Use these methods to find problematic resources:

1. Developer console: open F12 > Console. Mixed content errors are listed with exact resource URLs.
2. Why No Padlock: the whynopadlock.com tool scans your page and lists all insecure resources.
3. Chrome DevTools Network: in the Network tab, filter by "mixed-content" to see blocked requests.
4. Full site scan: tools like Screaming Frog or JitBit HTTPS Checker scan your entire site.

Mixed Content Fixes

How to fix common problems:

<!-- BEFORE: Hardcoded HTTP URL -->
<img src="http://example.com/image.jpg">
<script src="http://cdn.example.com/script.js"></script>
<link href="http://fonts.googleapis.com/css?family=Open+Sans">

<!-- AFTER: Protocol-relative or HTTPS URL -->
<img src="https://example.com/image.jpg">
<script src="https://cdn.example.com/script.js"></script>
<link href="https://fonts.googleapis.com/css?family=Open+Sans">

<!-- OR: Relative URL (recommended for same domain) -->
<img src="/images/image.jpg">
<script src="/js/script.js">

<!-- In PHP: Dynamic URL -->
<img src="<?= rtrim($_ENV['APP_URL'], '/') ?>/images/image.jpg">

<!-- CSP header to block and report mixed content -->
Content-Security-Policy: upgrade-insecure-requests;
Content-Security-Policy-Report-Only: default-src https:; report-uri /csp-report

Replace HTTP URLs with HTTPS or use relative URLs. The upgrade-insecure-requests header tells the browser to automatically convert HTTP requests to HTTPS.

Best Practices

Prevent mixed content with these practices:

• Use relative URLs: for resources on your own domain, use relative paths (/images/logo.png) rather than absolute URLs.
• Configure CSP: the Content-Security-Policy header with upgrade-insecure-requests automatically converts HTTP requests.
• Audit regularly: periodically scan your site to detect new HTTP references added by content.
• Update the database: after HTTPS migration, replace HTTP URLs in the database with an SQL script or plugin.

Frequently Asked Questions

Eliminate Mixed Content

Mixed content is a common problem during HTTPS migrations, but it's entirely fixable. Take time to audit your site and fix all HTTP references.

Combine MoniTao SSL monitoring with regular mixed content audits to ensure your site remains fully secure.

Ready to Sleep Soundly?

Start free, no credit card required.

Create My Account See pricing