Mixed content (loads HTTP resources on HTTPS URL)
This means that the URL in question is loaded over a secure HTTPS protocol, but some other resources (such as images, videos, stylesheets, scripts) are loaded over an insecure HTTP connection.
Why is this important?
This is called mixed content because both HTTP and HTTPS content are being loaded to display the same page, and the initial request was secure over HTTPS. Mixed content degrades the security and user experience of your HTTPS site.
Requesting subresources using the insecure HTTP protocol weakens the security of the entire page, as these requests are vulnerable to man-in-the-middle attacks, where an attacker eavesdrops on a network connection and views or modifies the communication between two parties. Using these resources, an attacker can often take complete control over the page, not just the compromised resource.
What does the Hint check?
This Hint will trigger for any internal HTTPS URL which includes resource links to any HTTP URL, where 'resource links' are considered to be anything that renders a URI;
- link[rel='stylesheet']
- html[manifest]
- script[src]
- img[src]
- img[srcset]
- iframe[src]
- audio[src]
- video[src]
- source[src]
- input[type='image'][src]
- embed[src]
- object[data]
Examples that trigger this Hint
Consider the URL: https://example.com/page-a
The Hint would trigger for this URL if it contained even a single resource link to an internal HTTP URL. Any of the options below would trigger it:
JavaScript resource link is HTTP:
CSS resource link is HTTP:
Image resource src is HTTP:
How do you resolve this issue?
This Hint is marked 'Critical' as it represents a fundamentally breaking issue, which may have a serious adverse impact upon organic search traffic. It is strongly recommended that Critical issues are dealt with as a matter of high priority.
You need to only use https:// URLs when loading resources on your page. For each URL that loads HTTP resources, update the link references to point to the HTTPS counterparts.
In some cases, you may find that the resources in question are not available over HTTPS, in which case seek to do one of the following:
- Include the resource from a different host, if one is available.
- Download and host the content on your site directly, if you are legally allowed to do so.
- Exclude the resource from your site altogether.
Further reading
- Google Web Fundamentals: What Is Mixed Content?
- Google Web Fundamentals: Preventing Mixed Content
- Mozilla MDN web docs: Mixed content
- Mozilla MDN web docs: How to fix a website with blocked mixed content
