What is mixed content and how do I fix it?

Mixed content is when a page loaded over secure HTTPS pulls in some of its resources, such as images, scripts, styles or frames, over insecure HTTP. Browsers may block those resources or warn visitors. To fix it, change each http:// address to https://, or to a relative path, and make sure the resource is available over HTTPS.

Why it matters

An HTTPS page promises that what the visitor sees was not altered on the way. One insecure script could be swapped by an attacker on the network, so browsers treat scripts, styles and frames loaded over HTTP as dangerous and usually block them. Blocked files can break layouts, menus and forms. Insecure images are lower risk, and browsers often upgrade or block them too.

How to check

Open the page in your browser, press F12 and select the Console tab.
Reload and look for messages that mention mixed content or a blocked request.
Open the Network tab and search for http:// to list every insecure request.
View the page source and search for http:// as well, since some references are only added by scripts or stored in your database.
Fix each reference, then reload and confirm the Console is clear.

How to fix it

Change the address in your template or content from http:// to https://.
Where the resource is on your own site, use a path starting with a slash, for example /img/logo.png, which follows whatever protocol the page uses.
For a third-party file, check that it is offered over HTTPS and update the address. If it is not offered, host your own copy or remove it.
In a content management system, search the database or use a plugin to update old addresses stored in posts and settings.
Redirect the HTTP version of your site to HTTPS.

<!-- Before -->
<img src="http://www.example.com/img/team.jpg" alt="Our team">
<!-- After -->
<img src="/img/team.jpg" alt="Our team">

As a stopgap you can send the header Content-Security-Policy: upgrade-insecure-requests, which asks the browser to request insecure addresses over HTTPS. It only works when the resource exists at the HTTPS address, so still correct the source.

Common mistakes

Fixing the template and leaving old http:// links inside saved posts.
Hard-coding the protocol in scripts and style sheets.
Using the upgrade header as the only fix.

Crawvix's scan checks that your pages have no mixed content.

Frequently asked questions

Does mixed content hurt SEO?

Google prefers HTTPS pages, and mixed content can break page features and the padlock. Fixing it protects visitors and keeps pages working.

Is an insecure image really a problem?

It is lower risk than a script, but it can still trigger warnings or be blocked. Serve it over HTTPS.

Will an SSL certificate fix mixed content by itself?

No. The certificate enables HTTPS, but the page still has to ask for every resource over HTTPS.

To check your own pages, Try the free website sample.