Playbook
    security
    medium

    Fix mixed content warnings (HTTP on HTTPS)

    Your HTTPS pages load some assets over HTTP. Browsers block them and the padlock turns yellow. Here is how to clean it.

    20 minutesLast reviewed 2026-06-09

    What is happening

    Modern browsers block any <script>, <iframe>, or AJAX request loaded over HTTP from an HTTPS page. Images and CSS loaded over HTTP are downgraded (loaded but with a warning, sometimes blocked entirely in newer Chrome).

    Fix it in 3 steps

  1. Find the offending URLs. Open Chrome DevTools → Console on the page. Filter for "Mixed Content" — every blocked subresource is logged with its full URL.
  2. Rewrite to protocol-relative or HTTPS. Change http://example.com/img.png to https://example.com/img.png (or just //example.com/img.png if both schemes are supported).
  3. Add Content-Security-Policy: upgrade-insecure-requests. This tells the browser to silently upgrade any remaining http:// to https:// for resources on your own domain.
  4. Bulk fix in a database

    WordPress / SQL CMS sites can run a search-replace across the database:

    UPDATE wp_posts SET post_content = REPLACE(post_content, 'http://yourdomain.com', 'https://yourdomain.com');
    UPDATE wp_postmeta SET meta_value = REPLACE(meta_value, 'http://yourdomain.com', 'https://yourdomain.com');

    Always back up first. The Better Search Replace plugin does the same thing safely with a dry-run mode.

    Common gotchas

  5. Hard-coded asset hosts in theme files. Search the theme directory for http:// literals.
  6. Third-party widgets (old chat tools, ad pixels) that only support HTTP. Replace them with a current version — there is no safe HTTP fallback in 2026.
  7. CDN origin is HTTP-only. Move the origin to HTTPS or front it with Cloudflare.
  8. What this doesn't do

    This is for the page-level mixed-content case. If your whole site is HTTP, you need to install an SSL certificate first — see Fix an expired SSL certificate.