does mixed content error mentioning script mean that the problem comes from an HTML <script> t-CodePudding

The Then refreshing. In the list of resources that appears, one or more of them will have the status similar to "blocked: Mixed Content". You can then find where it requests that by looking in the Initiator sub-tab or simply doing a Ctrl F in your code and searching for it, then change it to https:// if applicable.

Best of luck!

CodePudding user response：

TL;DR

The word "script" in the message means that the specific non-https resource that was blocked from loading in this case was of type "script". Why exactly that non-https resource request was generated in the first place is not covered in the error message...

Most browsers will block http resources from loading on https sites now. Best practice is https for everything (main site and all things loaded by that site).

To track down where that http call is coming from...

open your browser dev tools

clear cookies

go to "network" tab and disable cache

refresh page and look for the blocked request

the network panel will usually show an "initiator" column that tells you which script/file initiated the call. Might be index.html, might be some other script.

More details

Mixed Content: The page at 'https://...' was loaded over HTTPS, but requested an insecure_____ 'http://...'. This request has been blocked; the content must be served over HTTPS.

Browsers (not just chrome) have been doing this for a while as a security feature.

Imagine that your eCommerce website https://www.example.com is served securely. However you load a javascript file from http://www.example.com/site.js insecurely. Because that site.js was served insecurely, it could easily be modified by a Man in the Middle (MITM) to do things like steal credit card numbers from the customers of your shop during checkout.

It isn't ONLY script resources that are blocked from loading over http on an https page. In general the web has moved to https only for all sites. The availability of free, auto-renewing, domain-validation certificates from LetsEncrypt has made this relatively trouble-free.

Current best practices (just the basics...lot more you can do):

redirect all http to https for your domain(s)

utilize LetsEncrypt's certbot to maintain a valid certificate for your site. All modern web-hosting companies should be handling this automatically for you. If you run/manage your own server then you need to setup certbot yourself.

all resources (stylesheets, scripts, images, fonts) loaded by your site should be https.

use http-only, secure cookies.

use content security policy to lock down which domains/resources are allowed on your site (prevent hacked third-party resources from easily exfiltrating your users' data via calls to unauthorized domains).

lots more you can do if you are handling sensitive data...

Some potential scenarios...

initiator: index.html - the reference to that script is in the actual html file.

initiator: site.js - the initiator is in one of your site's javascript files or the configuration for a react app

initiator: gtm.js - the initiator is inside google tag manager. check your pixels in the google tag manager interface...most likely will be a custom html pixel needs to be updated from http to https.

initiator: site.css - might be you have a font or image url in your css file that needs to be updated from http to https.

initiator: some-plugin.js - some wordpress plugin or other javascript-based widget you have added to your site is generating an insecure request.