How to fix mixed content
An HTTPS page that loads images or scripts over http:// shows broken images and blocked scripts. Update the URLs.
Step by step, with screenshots: Mixed content: finding and fixing http:// leftovers after HTTPS →
Check your own site
Runs this check and the other 192, free, in about 45 seconds.
Or run only this check with the free SSL checker or the free Mobile-friendly test + CSP generator.
What it is
Mixed content is an HTTPS page that loads some of its resources, such as images, scripts, stylesheets, fonts or iframes, over plain http://. The page itself is encrypted, but those files are not, so they can be read or replaced on the way.
Browsers block active mixed content, meaning scripts, stylesheets and iframes, which breaks layouts and features; images, audio and video are upgraded to https:// and appear broken if that fails. getReport lists every http:// reference in the page source, split into active and passive. A page is OK when every resource URL starts with https:// or is relative. Mixed content usually appears after a move to HTTPS, when old absolute URLs remain in content, themes or the database.
What a passing site looks like
- No resources load over http://fail · −8 ptseffort M
Mixed content
Why it matters. Browsers block http:// scripts and stylesheets on an HTTPS page, which breaks layout or features, and upgrade http:// images and media to https, showing them broken when that fails. It usually appears after a move to HTTPS while old absolute URLs stay in the content.
- Search and replace http:// with https:// in content, theme and configuration (WordPress: a search-replace plugin covers the database).
- Add Content-Security-Policy: upgrade-insecure-requests as a safety net.
Questions people ask
What is a mixed content error?
It is the browser console message you see when an HTTPS page requests a file over http://, for example "Mixed Content: The page was loaded over HTTPS, but requested an insecure script". Blocked scripts and styles show as errors; upgraded images show as warnings. The padlock may also lose its secure state. The fix is changing those URLs to https://.
Why do browsers block mixed content?
Because one insecure file undoes the security of the whole page. An attacker who can change an http:// script can rewrite the page, steal form entries or redirect visitors, even though the page itself arrived over HTTPS. Browsers therefore block scripts, styles and frames loaded over HTTP, and upgrade or block images and media.
How do I find mixed content on my site?
Run a getReport check, which lists every http:// resource on the page. In Chrome, the DevTools Console shows mixed content messages for each page you open. For a whole WordPress site, search the database for http://yourdomain with a search-and-replace tool, and check theme files, widgets and page builder settings for hard-coded URLs.
How do I allow mixed content in Chrome?
You can, per site, under Site settings and Insecure content, but only in your own browser, and it hides the problem rather than fixing it: your visitors still see a broken page. Fix the site instead by changing the http:// URLs to https://, or, as a stopgap, send Content-Security-Policy: upgrade-insecure-requests so browsers try https:// for every resource.