Fix mixed content that blocks loading

We'll find the blocked http:// URLs, convert them to https:// or protocol-relative, then verify the page loads without mixed content warnings.

Category
Troubleshooting · Home maintenance
Time
10–25 min
Last reviewed
What you'll need
  • Browser with DevTools (F12)
  • Access to the page source, CMS, or theme (to edit URLs)
  • The HTTPS page that shows the problem

Step-by-step diagnostic

Step 1 of 7
Show full guide

Find blocked resources

Goal: Identify which http:// URLs are blocked by the browser.

  • Press F12 (or right-click > Inspect). Open the Console tab.
  • Reload the page. Look for “Mixed Content” or “blocked” messages with the http:// URL.
  • Or open the Network tab, reload, and filter for failed requests. Note the exact URLs and resource types (script, img, link, iframe).
  • Good: You have a list of blocked URLs. Proceed to Check HTTPS support.

Check HTTPS support

Goal: Verify each resource host supports HTTPS.

  • For each blocked URL, change http:// to https:// and open in a new tab.
  • If the resource loads, the host supports HTTPS—use https:// in your page.
  • If it fails (cert error, 404), the host may not support HTTPS. You may need to host the resource yourself, use an HTTPS CDN, or find an alternative.
  • Good: You know which URLs can use https://. Proceed to Fix URLs.

Fix URLs in page

Goal: Replace http:// with https:// or protocol-relative URLs.

  • Edit the HTML, template, CMS, or theme. Replace http:// with https:// for each blocked resource.
  • Or use protocol-relative URLs: //example.com/script.js—the browser uses the page protocol (HTTPS).
  • Save, clear cache (Ctrl+Shift+R or Cmd+Shift+R), and reload.
  • Good: No mixed content warnings in the Console. Bad: Check for hardcoded http in JavaScript or config files.

Fix CMS or theme

Goal: Update URLs in a CMS, theme, or plugin.

  • Edit the theme file, widget, or plugin settings. Replace http:// with https://.
  • Some CMSs (e.g. WordPress) have a “Force HTTPS” or “SSL” option—enable it to fix URLs site-wide.
  • For third-party scripts (analytics, ads), check the provider docs for an HTTPS script URL.
  • Good: CMS serves HTTPS URLs. Bad: Plugin may hardcode http—update or replace the plugin.

Escalate

Goal: Know when to hand off.

  • If a third-party resource does not support HTTPS and you cannot replace it, you may need to proxy it (advanced) or accept that it will be blocked.
  • If you do not control the site, contact the site owner with the list of blocked URLs and the fix (use https://).

Verification

  • No “Mixed Content” or “blocked” messages in the DevTools Console.
  • Network tab shows all resources (script, img, link) loading successfully over HTTPS.
  • The page displays correctly with scripts and images working.

Escalation ladder

Work from the device outward. Stop when the problem is fixed.

  1. Find blocked resources Open DevTools > Console/Network; list blocked http:// URLs.
  2. Check HTTPS support Try each URL with https:// in a new tab; note which work.
  3. Fix URLs Replace http:// with https:// or // in page, CMS, or theme.
  4. Clear cache and retest Hard refresh; confirm no mixed content in Console.
  5. Escalate If third-party has no HTTPS, proxy or contact provider.

What to capture if you need help

Before calling support or posting for help, have these ready. It speeds everything up.

  • List of blocked http:// URLs from Console/Network
  • Resource type (script, img, link, iframe) for each
  • Whether https:// works for each URL (test in new tab)
  • Where the URL is defined (HTML, CMS, theme, plugin)

Do you see mixed content or blocked resources?

Open DevTools (F12) > Console. Look for "Mixed Content" or "blocked" messages.

Press F12, open Console. Reload the page. Look for "Mixed Content" or "blocked" with http:// URLs. Good: you see the blocked URLs. Bad: no messages—the issue may be different (cert, TLS). See fix-ssl-shows-error.

You can change your answer later.

Do you have the list of blocked URLs?

Note each http:// URL and its type (script, img, link, iframe).

From Console or Network tab, list each blocked http:// URL. Note resource type (script, img, link). Good: you have the list. Bad: reload and watch Console/Network for failures.

You can change your answer later.

Does the resource host support HTTPS?

Try each URL with https:// in a new tab.

For each blocked URL, change http:// to https:// and open in a new tab. Works: use https:// in your page. Fails: host may not support HTTPS—host the resource yourself, use an HTTPS CDN, or find an alternative.

You can change your answer later.

Change http:// to https:// or //

Edit the page, CMS, or theme. Replace http:// with https:// or protocol-relative //.

Edit the HTML, template, CMS, or theme. Replace http:// with https:// for each resource. Or use // if the host supports both. Save, clear cache, reload. Good: no mixed content in Console. Bad: URL still wrong—check for hardcoded http in JS or config.
Question

Are URLs updated?

Find HTTPS alternative or host yourself

If the resource host has no HTTPS, you need another source.

Options: (1) Host the resource on your HTTPS server. (2) Use an HTTPS CDN or mirror. (3) Find an alternative provider with HTTPS. (4) For third-party: contact provider. Good: you have an HTTPS source. Bad: may need to accept blocking or escalate.

You can change your answer later.

Escalate

If you cannot get HTTPS for the resource, options are limited. You could proxy it through your server (advanced) or contact the site owner if you do not control it. Document what you tried.

Check for other issues

No mixed content—may be cert or TLS. See related guides.

If no mixed content warnings, the issue may be certificate or TLS. See fix-certificate-is-expired, fix-ssl-shows-error, fix-tls-will-not-handshake. Or the resources may load but fail for another reason—check Network tab for 404, CORS, etc.

Reviewed by Blackbox Atlas

Frequently asked questions

Why does my HTTPS page not load scripts or images?
Browsers block "mixed content"—HTTP resources on an HTTPS page. If your page is https:// but a script or image uses http://, the browser blocks it. Fix by changing the URL to https:// or using a protocol-relative // URL.
What is mixed content?
When an HTTPS page loads a resource (script, img, link, iframe) over HTTP. Browsers block it for security. The fix is to serve all resources over HTTPS or use // so they inherit the page protocol.
How do I find which resources are blocked?
Open DevTools (F12) > Console. Look for "Mixed Content" or "blocked" messages with the URL. Or go to Network, filter by "blocked" or look for failed requests with http:// URLs.

Rate this guide

Was this helpful?

Thanks for your feedback.

Continue to