How to Quickly Fix Mixed Content Warnings (HTTPS/SSL)
Mixed content errors can frustrate website owners who have invested in an SSL certificate to provide secure HTTPS connections. This error occurs when a secure HTTPS page requests insecure HTTP content, which triggers browser warnings about insecure items or mixed content.
Fortunately, fixing mixed content errors is usually straightforward once you understand what is causing them. This comprehensive guide will cover everything you need to know to troubleshoot and resolve mixed content errors on your SSL-enabled website.
What is Mixed Content?
Mixed content refers to loading insecure HTTP resources on a page served over HTTPS. When a website uses HTTPS protocol, it encrypts the connection between the browser and server to protect sensitive information like passwords, credit card details, etc.
However, if some resources on the page, such as images, CSS, and Javascript, are loaded over regular HTTP, then the encrypted HTTPS connection is partially broken. The webpage is no longer 100% secure since some assets are transferred unencrypted.
This is called mixed content, where HTTPS and HTTP content are mixed on the same page. Modern browsers detect this and warn users about unsecured items on the page.
Why is Mixed Content an Issue?
There are two main risks associated with mixed content:
- Security risk: Any HTTP content loaded on an HTTPS page can expose the user’s information. For instance, a hacker could inject malware into an insecure JS file and steal data sent over HTTPS.
- Browser warnings: All major browsers, such as Chrome, Firefox, Safari, etc., will show warnings on pages with mixed content. This hurts user trust and could negatively impact conversions.
To provide a fully secure browsing experience, it’s essential to eliminate mixed content and load all resources over HTTPS.
What are the Common Causes of Mixed Content Errors
Mixed content generally arises from the following:
- HTTP resources on HTTPS pages
- Insecure third-party content
- HTTP references in stylesheet/JavaScript files
- HTTP iframe embeds
- HTTP redirects (from https to http)
- HTTP URLs in backend data
1. HTTP resources on HTTPS pages
Images, CSS files, JS scripts, etc., are referenced with HTTP URLs instead of HTTPS, which results in mixed content. For example:
<img src="http://example.com/image.jpg">
2. Insecure third-party content
Third-party widgets like videos, web fonts, etc., loaded over HTTP will also trigger warnings.
3. HTTP references in stylesheet/JavaScript files
If CSS/JS files link to external HTTP resources like background images, it causes mixed content.
4. HTTP iframe embeds
Embedding HTTP content like videos within an HTTPS page generates mixed content errors.
5. HTTP redirects (from https to http)
Sometimes, redirects from HTTPS URLs to HTTP can also display warnings.
6. HTTP URLs in backend data
HTTP URLs stored in databases displayed on HTTPS pages also lead to mixed content.
How to Check for Mixed Content
The easiest way to check for mixed content is through your browser’s developer tools.
Check-in Chrome
- Open the page in Chrome and press F12 to open DevTools.
- Go to the Security tab.
- If there are any insecure requests, they will be listed under Mixed Content.
Check mixed content in Chrome DevTools.
- The requests are grouped by type (images, CSS, JS, etc). You can expand each section to see the exact files causing issues.
- You can also right-click on each request and select Open in the Sources Panel to see where it’s getting loaded from in the HTML code.
Check-in Firefox
- Open the page in Firefox and press Ctrl+Shift+I (Cmd+Opt+I on Mac) to open Developer Tools.
- Go to the Security tab.
- Look for the Mixed Content section. Any insecure requests will be listed there.
Check mixed content in Firefox DevTools
- You can expand the sections and right-click> Open in Debugger to inspect the code.
So, Chrome DevTools and Firefox Developer Tools provide an easy way to identify mixed content that needs fixing.
A Step-by-Step Guide to Fix Mixed Content Errors [8 Easy Steps]
Once you’ve identified the mixed content on your site, here are the steps to fix the errors:
- Change Resource Links to HTTPS
- Update Redirect Rules
- Use Protocol Relative URLs
- Set Secure Flag on Cookies
- Update Server Configs
- Set Canonical URLs
- Update Data/Content with HTTPS URLs
- Use Content Security Policy (CSP)
1. Change Resource Links to HTTPS
For CSS, JS, images, and other resources referenced with HTTP URLs: update the links to HTTPS instead.
<!– Update links in HTML –> <script src="http://example.com/script.js"> => <script src="https://example.com/script.js"> <!– Update CSS references –> background-image: url(http://example.com/image.jpg); => background-image: url(https://example.com/image.jpg);
This fixes the mixed content by directly replacing HTTP references with HTTPS.
2. Update Redirect Rules
Check if you have any redirects from HTTPS pages to HTTP URLs and vice versa. Reverse those rules to redirect HTTP → HTTPS.
For example, in Nginx:
# Redirect HTTP to HTTPS
server {
listen 80;
server_name example.com;
return 301 https://$server_name$request_uri;
}
And in Apache:
# Redirect HTTP to HTTPS <VirtualHost *:80> ServerName example.com Redirect permanent
This will convert all HTTP requests to HTTPS and avoid flip-flopping between protocols.
3. Use Protocol Relative URLs
For third-party assets that you don’t control, you can use protocol-relative URLs which work on both HTTP and HTTPS:
<!-- Instead of http:// or https:// --> <script src="//example.com/script.js">
The resource will load using the same protocol as the page, which avoids mixed content when the site switches from HTTP to HTTPS.
4. Set Secure Flag on Cookies
If your application sets any cookies, make sure they are flagged secure by adding:
Set-Cookie: id=a3fWa; Secure
5. Update Server Configs
For web servers like Nginx and Apache, set the HSTS header, which forces browsers to use HTTPS:
add_header Strict-Transport-Security "max-age=31536000; includeSubDomains";
Configure HTTP to HTTPS redirects:
return 301 https://$server_name$request_uri;
Prioritize HTTPS before HTTP in the server block:
server {
listen 443 ssl http2;
listen [::]:443 ssl http2;
listen 80;
}6. Set Canonical URLs
Use the rel=”canonical” link tag to point to the HTTPS URL as the preferred version:
<link rel="canonical" href="https://example.com/page">
Search engines like Google will treat this as the canonical URL and index it appropriately.
7. Update Data/Content with HTTPS URLs
For mixed content arising from insecure URLs in databases, JSON, or other application data: find and replace those instances with HTTPS URLs.
8. Use Content Security Policy (CSP)
Add a CSP header to only allow loading of resources over HTTPS:
Content-Security-Policy: upgrade-insecure-requests
By systematically implementing these fixes, you can eliminate all traces of mixed content from your website and ensure 100% secure HTTPS delivery.
How to Prevent Mixed Content in the Future
Here are some best practices to avoid recurring mixed content errors:
- Use relative URLs: Use relative URLs instead of absolute ones to Reference all resources like images, CSS, and JS files. This prevents breakages when migrating from HTTP to HTTPS.
- Reference third parties over HTTPS: When including third-party widgets, embeds, APIs, etc., always use their HTTPS URLs. Avoid directly linking to HTTP resources.
- Set up redirects: Put permanent 301 redirects in place to reroute all HTTP requests to HTTPS.
- Enable HSTS: Use the Strict-Transport-Security header to enforce HTTPS connections only.
- Use protocol relative URLs: Use protocol agnostic sources like “//example.com/image.png” for external resources.
- Update stored URLs: Audit databases and application code for any HTTPS URLs and update them if required.
- Check configs: Review application configs, server configs, source code, etc., to check for HTTP references and rewrite them to use HTTPS.
- Test with HTTPS: Use HTTPS URLs while testing your website locally to identify and fix mixed content early in development.
- Monitor using tools: Proactively scan your site using tools like SSL Test to detect mixed content before it impacts users.
Final Thoughts
Mixed content can seriously undermine the enhanced security and trust that comes with HTTPS. Thankfully, these errors are typically simple to detect and resolve.
The most reliable fix is to replace all HTTP references with their HTTPS counterparts across all resources. Additional precautions like HSTS redirects and CSP will help fortify your HTTPS delivery.
Best practices for secure development will prevent mixed content problems from the start. It is also advised to pay attention to browser and online scanner warnings.
By properly addressing mixed content errors, you can deliver an end-to-end secure and encrypted browsing experience to your users, instilling their trust and confidence in your website.
FAQs About Mixed Content Errors
Why am I suddenly seeing mixed content warnings?
If you recently switched your site from HTTP to HTTPS, browsers likely started throwing mixed content warnings. Resources loaded over HTTP will now conflict with the secure HTTPS connection.
Are mixed content warnings a big deal?
Yes, mixed content undermines the security provided by HTTPS and can expose user data. Browser warnings related to security also negatively impact credibility and conversions for e-commerce sites.
Can I suppress the warnings?
Suppressing the warnings is not recommended since they hide the problem while leaving the site vulnerable. The proper fix is eliminating the mixed content by replacing HTTP references with HTTPS.
How do I fix mixed content in WordPress sites?
In WordPress, go to Settings > General and change both the WordPress Address (URL) and the Site Address (URL) to HTTPS. Also, install an HTTPS redirect plugin to forward all HTTP requests to HTTPS.
What is the best way to find mixed content on a site?
Chrome DevTools is the easiest way to identify mixed content assets loaded on a webpage. Firefox Developer Tools also provides a similar “Mixed Content” section under the Security tab.
How can I bulk-fix mixed content across a site?
Use find and replace across your codebase to rewrite http:// references to https://. For mass URL updates in the database, use a script or plugin like Better Search Replace. As additional precautions, enable HSTS and redirects.
What happens if I don’t fix mixed content errors?
Ignoring the warnings will degrade user experience due to intrusive browser messages. It can also lead to potential security vulnerabilities and SEO issues, as Google may mark HTTP pages as less secure.
Is it okay to have some mixed content?
Ideally, HTTPS sites should have zero mixed content. Even one insecure request can open the door for man-in-the-middle attacks. Some browsers also disable features on pages with mixed content.
Priya Mervana
Verified Web Security Experts
Priya Mervana is working at SSLInsights.com as a web security expert with over 10 years of experience writing about encryption, SSL certificates, and online privacy. She aims to make complex security topics easily understandable for everyday internet users.
