Visit Website →
← Back to blog

Fix Mixed Content with CSP First, Then Remove HTTP at Its Source

October 16, 2026
Fix Mixed Content with CSP First, Then Remove HTTP at Its Source

Mixed content happens when an HTTPS page loads images, scripts, iframes or other subresources over plain HTTP; this can be especially critical during a website redesign to preserve SEO and avoid ranking losses. To fix it, find every offending http:// URL, change it to https:// or host the file securely, add the CSP directive upgrade-insecure-requests as a temporary safety net, then verify in DevTools that no warnings remain.

TL;DR:

  • Active content is often blocked by browsers, so prioritize scripts, stylesheets, frames, and network requests because failures can break forms, menus, and checkout.
  • Use DevTools and a rendered crawl to find runtime URLs, then inspect bundles, API responses, redirects, and proxy trust settings.
  • Back up a WordPress database before replacing stored URLs, and use a tool that preserves serialized data; simple SQL replacement can corrupt settings.
  • Use Content Security Policy upgrade insecure requests only as a temporary safeguard, since it cannot fix assets hosted on servers that lack HTTPS.
  • After repairs, purge the CDN cache, retest key pages in multiple browsers, review policy reports, and submit forms to catch failures.
Forge-web-studio
Build a clearer, more effective website
If mixed-content checks point to a broader website refresh, Forge Web Studio builds strategy-led sites for Texas businesses with mobile clarity and clear lead paths.
Explore Forge Web Studio

Table of Contents

What mixed content is and how browsers treat active and passive resources

Mixed content means a secure page pulls in at least one resource over an unencrypted connection. Cloudflare explains that browsers sort these requests into two groups, and the group decides what happens to the request.

Active content can change how the page behaves, so browsers block it by default:

  • JavaScript files
  • CSS stylesheets
  • iframes
  • fetch and XHR requests
  • WebSocket connections
  • Remove this item unless you have a source confirming how browsers classify web fonts.

Passive content only displays something, so browsers are more forgiving:

  • Images
  • Audio
  • Video

Browsers sometimes upgrade passive requests to HTTPS automatically. Firefox has kept expanding the amount of mixed content it upgrades or blocks, so behavior differs by browser and version. Treat that as a reason to fix everything, not a reason to rely on the upgrade. MDN's mixed content guide states the goal plainly: full HTTPS adoption. Start with active resources, because a blocked script can break forms, menus and checkout flows.

How to find mixed content on your site

Insecure URLs can hide in templates, databases, JavaScript bundles and API responses, so detection takes careful checking. Work through this checklist in order:

  1. Open DevTools. Load the page, open the Console and the Issues tab, and read the messages. They name each blocked or upgraded request and its URL.
  2. Turn on CSP reporting. Send a Content-Security-Policy-Report-Only header with a reporting endpoint. This can help collect violation reports from visitors as they use your site.
  3. Crawl with a renderer. A scanner that executes JavaScript sees URLs that static HTML never contains. Pair it with a plain search for http:// in your built HTML output.
  4. Inspect scripts and data. Search JS bundles, JSON endpoints and config files for baked-in absolute URLs, since these never show up in a template search.
  5. Check server behavior. Look at Location redirect headers and proxy settings. An application behind a TLS-terminating proxy can generate http:// links if it does not trust X-Forwarded-Proto, as How HTTP Works documents.

Prioritize anything active, then move to images and media.

Pro Tip: Run the crawler against both your live site and a staging build. Staging catches problems before visitors do, and the live crawl catches content that editors added after launch.

Step-by-step fixes for mixed content errors

Follow this order: stop the bleeding, repair the source, then add the safety net.

1. Replace hard-coded URLs. Change every http:// reference to https://. For same-origin assets, a root-relative path like /images/logo.png also works. Skip protocol-relative URLs such as //example.com/asset.js. Web and recommends explicit https:// for subresources.

2. Rewrite stored content. If your CMS saved absolute URLs in the database, run a search-and-replace from http://yourdomain.com to https://yourdomain.com. Cloudflare's troubleshooting notes recommend this, along with updating template source code. Take a full backup first. If you are changing URLs as part of a larger migration, our guide to redirect maps after a redesign covers how to keep old links working.

3. Fix proxy and CDN configuration. When TLS ends at a load balancer or CDN, your application may think the request arrived over HTTP. Configure the proxy to set X-Forwarded-Proto and tell the app to trust that proxy, so generated absolute URLs use https://.

4. Check WebSockets. Review WebSocket endpoints and proxy settings for insecure connections, and consult your platform's documentation for the appropriate configuration.

5. Handle third-party assets. When a vendor does not serve HTTPS, you have three options:

  • Host the file yourself, if the license allows it.
  • Switch to a provider that supports HTTPS.
  • Remove the resource.

6. Add the CSP safety net. Send Content-Security-Policy: upgrade-insecure-requests in your response headers. The browser rewrites http: subresource URLs to https: before requesting them. web.dev notes it fails when the remote host does not actually serve HTTPS, so it works as a stopgap, not a cure.

Images are a common leftover. If you are moving media anyway, our image optimization basics article shows how to compress and serve them properly while you update the links.

Pro Tip: Deploy the CSP directive in Report-Only mode first. Enforce it only after the reports show it will not break a dependency you forgot about.

Report-only CSP checks before blocking requests

WordPress and CMS-specific fixes and pitfalls

WordPress stores absolute URLs in posts, widgets, theme options and plugin settings, so mixed content often survives a simple template cleanup. These points save the most time:

  • Back up the database first. Then use a reliable search-and-replace tool that understands serialized data. A naive SQL replace can corrupt serialized values and break settings.
  • Consider a plugin as a stopgap. SSL Insecure Content Fixer automates basic rewrites and offers several fix levels. It advises replacing http: with https: or using root-relative URLs where appropriate. Cloudflare's notes list it as a commonly used option, alongside Cloudflare's own plugin. A plugin masks the problem at output time, though, so stored content still needs cleaning.
  • Review GUIDs carefully. Check WordPress documentation before changing GUIDs, since changes may affect feeds or readers.
  • Look beyond posts. Themes, page builders and older posts can inject assets. JavaScript-built URLs and JSON endpoints need manual diagnosis, which community support threads confirm is usually the last step after plugins and search-and-replace.

How to verify and re-test after fixes

Verification should be repeatable, so anyone on the team can confirm the result:

  1. Refresh each key page with DevTools open and check the Console and Issues tab for remaining mixed-content messages.
  2. Test in a private window to rule out cache artifacts. If a CDN sits in front of your site, purge it first. Our website caching basics explains why stale copies can hide a fix or fake a failure.
  3. Review your CSP Report-Only logs and confirm no new violations arrive before you enforce any policy.
  4. Run a renderer-capable crawler across many pages and record any remaining http:// URLs.
  5. Use the pages the way a visitor would: submit forms, load widgets, trigger scripts. Active resources that were blocked should now work.

Test in more than one browser, since upgrade and blocking behavior varies. A page that looks clean in one browser can still carry warnings in another.

Preventing mixed content regressions in your build and deployment workflow

Mixed content comes back whenever a new template, editor or dependency introduces an http:// string. Build the checks into your workflow:

  • Enforce https:// in templates, environment variables and configuration files.
  • Add a CI step that searches built assets for http:// and fails the build on a match.
  • Run CSP in Report-Only mode during rollouts, and enforce upgrade-insecure-requests only after validation.
  • Write an asset-hosting policy that requires HTTPS for every third-party library, and prefer providers that support it.
  • Train editors to use the CMS media library or https:// links, so pasted embed code does not reintroduce insecure URLs.

Framework builds deserve extra attention, because URLs are often assembled at runtime. Our Next.js SEO launch checklist covers metadata and image handling to confirm before launch.

Pro Tip: Fonts are easy to miss. Check that every font request in your CSS uses HTTPS, and see our font loading strategy for how to host and preload them correctly.

Why fixing mixed content matters to us

A "not secure" warning tells visitors the page cannot guarantee privacy or integrity, and Cloudflare's docs note that it erodes trust and can affect SEO. A broken script or blocked form costs real leads on top of that. We treat mixed content as part of every build and maintenance cycle: audit, fix at the source, then test in the browser. If you want a second set of eyes, our website review checklist is a good place to start.

— Dylan

Want a specialist to handle your mixed content fix?

Hunting down insecure URLs across templates, databases and scripts takes time you may not have. We handle it end to end: we audit your pages, repair the source of each insecure reference, test across browsers, and deploy the fix. Because we build and maintain sites for local businesses, we also consider your SEO and mobile experience while we work.

Forge-web-studio

See our services and pricing, or ask us about a website redesign if your site needs more than a patch. Contact us today and we will tell you what is breaking your padlock.

FAQ

How do I unblock mixed content?

Fix the source rather than overriding the browser. Change each http:// URL to https://, or host the resource on a secure origin, then reload and confirm the Console is clean. A temporary CSP upgrade-insecure-requests header can help while you work.

How do I allow mixed content in Chrome?

Do not ask visitors to override browser blocking. As a site owner, serve every resource over HTTPS so no override is needed and visitors see a secure page by default.

How do I fix a not secure website warning?

Start by checking DevTools for mixed-content messages, since insecure subresources often cause the warning on an otherwise valid HTTPS page. Replace those URLs, rewrite stored content in your CMS, and retest. If the warning persists, look at your certificate and proxy configuration.

Does mixed content hurt SEO?

It can. Browser warnings reduce visitor trust, and Cloudflare notes that mixed content can affect SEO. Blocked scripts and broken layouts can make the site harder for visitors to use.

Sources