Browser console 'Mixed Content: The page was loaded over HTTPS, but requested an insecure resource' after moving a site to HTTPS: how do I fix it?

Cause: an HTTPS page references resources over http://. Browsers treat scripts, stylesheets, iframes, fetch/XHR requests and fonts as blockable and refuse to load them. Images, audio and video are upgradable: browsers try the https version automatically (not when the host is a bare IP address, where they get blocked). Insecure resources on a secure page can be read or altered by an attacker, scripts being the worst case. Fix (best first): 1. Open the browser developer console; each warning names the blocked URL. Find where it comes from: templates, CMS content stored in the database, CSS url() values, JavaScript constants, third-party embeds. 2. Change the references to https:// (or relative links for your own domain). Check the third party offers https; if it does not, host the file yourself or drop it. For database content, do a careful search-and-replace of your own domain's http URLs, with a backup first. 3. If the app generates absolute URLs itself, make it see the original scheme behind a proxy (X-Forwarded-Proto handling), otherwise it keeps emitting http links. 4. As a safety net, send the header Content-Security-Policy: upgrade-insecure-requests, which makes the browser fetch same-page subresources over https. It does not fix resources that have no https version, so still correct the source. 5. Mixed downloads (an http file linked from an https page) are also blocked or warned about; link them over https. Verify: reload with the console open and no mixed-content messages remain; crawl the site with a mixed content checker to catch pages you did not open. Sources: https://developer.mozilla.org/en-US/docs/Web/Security/Mixed_content https://developer.mozilla.org/en-US/docs/Web/HTTP/Guides/CSP