When Chrome flagged site resources with Mixed Content blocked and the Content-Security-Policy fix that restored secure asset loading

by

If you’ve ever opened your website, only to find Chrome angrily blocking parts of your content, you’re not alone. One culprit could be something called mixed content. Sounds like a smoothie gone bad, right? Don’t worry — this guide will break it down simply and show you how to fix it using a tool called Content Security Policy (CSP).

TLDR: Google Chrome blocks mixed content—when a secure HTTPS page tries to load resources over HTTP. This can break images, videos, stylesheets, or scripts on your site. Luckily, you can use a Content-Security-Policy (CSP) to fix this and keep assets loading securely. It takes just a few tweaks, and you’ll be back in business with a secure and fully-functioning site.

Contents

What is Mixed Content?

Let’s say your site is running over HTTPS 💚

But some resources—like JavaScript files, images, or fonts—are still being loaded over regular old HTTP 💀

That’s what we call mixed content. It’s like installing a top-tier security system on your front door but then leaving the kitchen window wide open.

Browsers don’t like that. Especially Chrome. It blocks those insecure resources to protect users — and your broken site cries in silence.

Types of Mixed Content

There are two flavors of mixed content:

  • Active mixed content: JavaScript, iframes, or AJAX calls. These can mess with your page and are almost always blocked.
  • Passive mixed content: Images, audio, or video. Chrome sometimes allows these, but not always — and it may stop soon.

How to Spot It

If Chrome sees any insecure stuff sneaking through, here’s what happens:

  • You’ll see a little shield or “Not Secure” warning in the address bar.
  • The Developer Console (F12) screams bloody murder with red messages like: “Mixed Content: The page was loaded over HTTPS, but requested an insecure resource…”
  • Styles might not load, scripts don’t run, images disappear… and chaos reigns.

The good news? You can clean it all up.

Step 1: Find the Mixed Offenders

Start by checking your DevTools. You can do this in Chrome:

  1. Right-click on your page and pick Inspect.
  2. Go to the Console tab.
  3. Look for any messages that start with “Mixed Content: …”

The browser will even tell you what exact file is causing the issue. Example:

Mixed Content: The page at 'https://mycoolsite.com' was loaded over HTTPS, 
but requested an insecure script 'http://scripts.example.com/script.js'. 
This request has been blocked; the content must be served over HTTPS.

Make a list. Every image, js, css, video, whatever — you want them all using HTTPS now.

Step 2: Use HTTPS Everywhere

This sounds like a sticker slogan, but it should be your motto.

You need to make sure every resource on your site is loaded over HTTPS. This goes for:

  • CDNs
  • Image hosting sites
  • APIs
  • Your own domains or subdomains

Most big services (like Google Fonts, YouTube, or Cloudflare) already support HTTPS. Just change the URLs.

Example:

Step 3: Say Hello to Content Security Policy (CSP)

Now comes the knight in shining armor: Content-Security-Policy.

CSP is a header your server sends to the browser. It tells the browser what can and can’t be loaded — and from where.

Here’s why CSP is awesome:

  • Keeps your site secure from mixed content and code injection
  • Helps you enforce HTTPS without manually updating everything first
  • Can give fallback instructions, like redirecting HTTP to HTTPS

Simple CSP to Block Mixed Content

This is the no-nonsense approach. You want the browser to automatically upgrade any insecure resource to HTTPS. You don’t want to cry into your keyboard later.

Add this to your site’s HTTP headers:

Content-Security-Policy: upgrade-insecure-requests

What it does:

  • Tells the browser to try and load all HTTP assets using HTTPS instead
  • If it can’t, it will STILL block it

It’s like saying: “Hey browser, if you see anything sketchy, try a secure version first. If not — ditch it!”

Bonus: HSTS Does it Forever 🛡️

If you’re feeling extra brave, launch the HTTP Strict Transport Security (HSTS) rocket. This forces all future visits to your site to use HTTPS only — even if someone types http://.

To do that, add:

Strict-Transport-Security: max-age=31536000; includeSubDomains; preload

That tells browsers to only talk to you over HTTPS for the next 1 year (31536000 seconds). You can even submit your domain to a global preload list Chrome uses.

Common Mistakes That Break Your Fix

Alright, before you run off and CSP all your worries away — slow down. A few gotchas:

  • Caching: Your browser might cache redirects or headers. Clear cache, use Incognito, or test in another browser.
  • Third-party scripts: If you include scripts from someone else’s HTTP-only server, CSP won’t save you. You’ll need to find HTTPS alternatives.
  • Relative URLs: Use protocol-relative URLs like //example.com/file.js or absolute HTTPS. Avoid mixing it up.

How To Add CSP — Step by Step

If you run your own server:

  • Apache: Edit your .htaccess file and add this line:

    Header set Content-Security-Policy "upgrade-insecure-requests"
  • Nginx: In your server block, add:

    add_header Content-Security-Policy "upgrade-insecure-requests";

If you use a framework or CMS (like WordPress): Use a plugin like HTTP Headers or Security Headers. They usually have CSP presets.

If you’re on a static site or CDN: Check your hosting provider’s dashboard. Many (Netlify, Vercel, Cloudflare) let you add headers through config files.

Want To Go Harder?

CSP can do way more than just mixed content fixes.

You can write advanced rules like:

Content-Security-Policy: 
  default-src https:;
  img-src https://images.example.com;
  font-src 'self';
  script-src https://cdn.example.com;

This says: only allow images from one place, fonts from your own site, and scripts from your CDN. Tight, right?

But start small. Even just upgrade-insecure-requests is powerful all by itself.

Wrap-Up: You Got This 😎

Mixed content sounds scary. But it really just means your site is trying to load secure and insecure stuff together — and browsers won’t stand for it.

Using HTTPS everywhere and adding a simple CSP rule can fix it fast. Plus, it makes your site stronger, faster, and more trustworthy.

If Chrome has been yelling at you with security warnings, now you know why — and what to do about it.

Secure all the things 🔒