Mixed Content: HTTPS Page Loading HTTP Resources

Mixed Content means an HTTPS page loads resources (JS, CSS, images, iframes) over HTTP. Chrome blocks active mixed content entirely; passive triggers a warning. Fix: replace http:// URLs with https:// or protocol-relative //, and add Content-Security-Policy: upgrade-insecure-requests.

The error can appear in Chrome, Edge, Opera, Brave (all Chromium-based), and partially in Firefox and Safari. Different browsers display the same code differently, but the underlying issue is the same.

1. Check the SSL certificate online — the Enterno.io checker shows the grade, expiry, chain, and specific cause.
2. If the issue is server-side — reissue the certificate via certbot or your chosen CA.
3. Update nginx/apache config (enable TLS 1.2/1.3, fullchain, correct ciphers).
4. Check kernel OpenSSL — an outdated openssl < 1.1 can break handshakes.
5. After deploy: recheck via SSL checker + clear the browser SSL cache.

Check SSL now →

• NET::ERR_CERT_AUTHORITY_INVALID
• ERR_CERT_DATE_INVALID
• ERR_SSL_PROTOCOL_ERROR
• Mixed Content
• Check SSL certificate online →

To resolve mixed content warnings on your website, ensure that all resources, such as images, scripts, and stylesheets, are loaded over HTTPS. Use tools like the browser console to identify insecure requests and update URLs accordingly. Additionally, consider implementing Content Security Policy (CSP) headers to enforce secure loading of resources.

Mixed content occurs when a secure HTTPS page loads resources over an insecure HTTP connection. This can lead to security warnings in browsers and can jeopardize user data integrity. There are two primary types of mixed content:

• Passive Mixed Content: This includes elements like images, videos, and audio files. Although they don't pose a direct risk, their insecure loading can still compromise the entire page's security.
• Active Mixed Content: This includes scripts, stylesheets, iframes, and AJAX requests. Loading these over HTTP can lead to vulnerabilities such as man-in-the-middle attacks.

For example, if a website's main page is served via HTTPS, but it pulls a JavaScript file from an HTTP source, it creates an active mixed content scenario. Browsers typically block active mixed content by default, while passive mixed content may still display with a warning.

To address mixed content warnings, follow these practical steps:

1. Identify Mixed Content: Use the browser's developer tools (F12) to inspect the console for mixed content warnings. Look for URLs that are loaded over HTTP.
2. Update Resource URLs: Change all HTTP resource links to HTTPS in your HTML, CSS, and JavaScript files. For example, if you have an image tag like this:

<img src="http://example.com/image.jpg" alt="Example Image">

1. Change it to:

<img src="https://example.com/image.jpg" alt="Example Image">

1. Use Relative URLs: If your resources are hosted on the same domain, consider using protocol-relative URLs. For instance:

<script src="//example.com/script.js"></script>

1. Implement Content Security Policy: To enforce HTTPS loading, configure a CSP header in your server settings. An example of a CSP header that disallows all HTTP content is:

Content-Security-Policy: upgrade-insecure-requests;

1. Test Your Changes: After making updates, refresh your site and monitor the console for any remaining warnings. Tools like Why No Padlock can help you verify that all content is now served securely.

By following these steps, you can effectively eliminate mixed content warnings and enhance the security of your website.