What Mixed Content Actually Is
Mixed content occurs when an HTTPS page loads resources over HTTP. Your page URL is https://example.com, but it references images, scripts, or stylesheets using http:// URLs. Browsers block or warn about these resources because they undermine the security of HTTPS.
There are two types. Active mixed content includes scripts, stylesheets, iframes, and XHR requests loaded over HTTP. Browsers actively block this because it creates security vulnerabilities. Passive mixed content includes images, audio, and video loaded over HTTP. Browsers allow it but show warnings in the console.
How Mixed Content Breaks Your Page
Active mixed content can completely break page functionality. If your CSS loads over HTTP on an HTTPS page, browsers block it entirely, rendering your page without styles. JavaScript blocked by mixed content warnings means interactive features stop working. Forms may fail to submit, animations break, and layout shifts dramatically.
Even passive mixed content causes problems. Images loaded over HTTP may not display, showing broken image icons instead. Browsers log warnings that confuse developers during debugging. Some browsers increasingly block passive mixed content, making the problem worse over time.
Finding Mixed Content on Your Site
Open Chrome DevTools and navigate to the Console tab. Mixed content warnings appear as yellow or red messages indicating which resources loaded over HTTP. The Security tab provides a summary of mixed content issues.
For site-wide detection, our mixed content checker scans every page and identifies all HTTP resource references. Run it after any site migration, theme change, or content update to catch new mixed content before users see it.
Search your codebase for hardcoded HTTP URLs:
# Find HTTP references in PHP files\ngrep -rn "http://" --include="*.php" templates/ views/\n# Find HTTP references in CSS\ngrep -rn "url(http://" --include="*.css" assets/Fixing Mixed Content
The simplest fix is changing all HTTP URLs to HTTPS. Replace http://example.com/image.jpg with https://example.com/image.jpg. For internal resources, use protocol-relative URLs starting with // instead of http:// or https://. The browser automatically uses the same protocol as the page.
For third-party resources, check if the third party supports HTTPS. Most do. If a third-party resource only supports HTTP, find an alternative provider or self-host the resource over HTTPS. Never serve critical page resources from HTTP-only third parties.
CMS platforms like WordPress often introduce mixed content through themes and plugins. Update theme templates, plugin settings, and widget configurations to use HTTPS URLs. Our mixed content checker helps verify fixes across your entire site.
Content Security Policy for Prevention
Implement a Content Security Policy (CSP) header that blocks mixed content automatically. The upgrade-insecure-requests directive tells the browser to rewrite all HTTP URLs to HTTPS automatically:
# Nginx header\nadd_header Content-Security-Policy "upgrade-insecure-requests";This is a powerful safeguard that prevents mixed content from ever loading. It works for both internal and third-party resources. Combine CSP with our security headers checker to ensure your headers are configured correctly.
Mixed Content and SEO Impact
Mixed content does not directly cause ranking drops, but it severely impacts user experience. Broken styles and scripts increase bounce rates, reduce time on page, and decrease conversions. These user behavior signals can indirectly affect rankings.
HTTPS is a confirmed ranking signal. Pages with mixed content may not fully benefit from the HTTPS ranking boost because the page is not truly secure. Fix mixed content to ensure your site fully leverages HTTPS for both security and SEO benefits.