Mixed Content

What is this?

Mixed content is when an HTTPS page loads resources (images, scripts, stylesheets, fonts) over plain HTTP. Browsers block these resources as a security measure - an HTTP resource on an HTTPS page could be intercepted and modified by an attacker.

This commonly happens with hardcoded HTTP URLs in old code:

<img src="http://cdn.example.com/logo.png">  <!-- blocked -->
<script src="http://cdn.example.com/app.js"></script>  <!-- blocked -->

Why it matters

• Resources are silently blocked - no visible error, images just don't appear, scripts don't run
• You won't know unless you check the browser console - users don't see an error message, just broken functionality
• Scripts that don't load can break your entire app - if a framework dependency loads over HTTP, nothing works

How to fix it

1. Open Chrome DevTools → Console - look for "Mixed Content" warnings
2. Find all http:// URLs in your HTML, CSS, and JavaScript
3. Change them to https:// - most CDNs and services support HTTPS
4. For third-party resources that don't support HTTPS, host them yourself or find an alternative

You can also add this to your HTML head to automatically upgrade HTTP resources to HTTPS:

<meta http-equiv="Content-Security-Policy"
      content="upgrade-insecure-requests">

Providers & tools

Quick search for mixed content:

• Chrome DevTools → Console → filter by "Mixed Content"
• grep -r "http://" src/ in your project (excluding http://localhost)
• whynopadlock.com - scan a URL for mixed content issues