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.
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
Quick triage — pick your path
Quick triage — pick your path
Choose the option that matches what you see. You can jump straight to that section.
- Find blocked resources You want to identify which http:// URLs are blocked in DevTools.
- Check HTTPS support You want to verify the resource host supports https://.
- Fix URLs in page You have the URLs and need to change http:// to https://.
- Fix CMS or theme The URLs are in a CMS, theme, or plugin.
- Escalate A third-party resource does not support HTTPS and you cannot replace it.
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://tohttps://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://withhttps://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://withhttps://. - 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.
- Find blocked resources Open DevTools > Console/Network; list blocked http:// URLs.
- Check HTTPS support Try each URL with https:// in a new tab; note which work.
- Fix URLs Replace http:// with https:// or // in page, CMS, or theme.
- Clear cache and retest Hard refresh; confirm no mixed content in Console.
- 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.
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).
You can change your answer later.
Does the resource host support HTTPS?
Try each URL with https:// in a new tab.
You can change your answer later.
Change http:// to https:// or //
Edit the page, CMS, or theme. Replace http:// with https:// or protocol-relative //.
Are URLs updated?
Find HTTPS alternative or host yourself
If the resource host has no HTTPS, you need another source.
You can change your answer later.
Escalate
Check for other issues
No mixed content—may be cert or TLS. See related guides.
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.