Strange Mixed Content Issue

0
votes

I've been having this error in Chrome Developer Tools for a while and I just can't seem to find the insecure http:// request. It points to my domain but without https://. http://www.example.com/ is not a script so I don't understand where it's coming from.

Mixed Content: The page at 'https://www.example.com/categoy/a-product.html' was loaded over HTTPS, but requested an insecure script 'http://www.example.com/'. This request has been blocked; the content must be served over HTTPS.

Mixed Content: The page at 'https://www.example.com/categoy/a-product.html' was loaded over HTTPS, but requested an insecure XMLHttpRequest endpoint 'http://www.example.com/'. This request has been blocked; the content must be served over HTTPS.

Thanks

2
securityxmlhttprequestmixed-content

2 Answers

1
votes

I had a similar issue. Is the page you are hosting a single page application with HTML5/history/push-state routing?

This type of routing goes by many names, but what it does is replace your hash-based url https://address.com/page/#client/side/route with regular routes such as https://address.com/page/client/side/route. When the files are hosted with a static file server, the file server may not know about the client-side routing and return a 404 instead of routing everything to index.html. Apparently, this can lead to the problem you described in Chrome even though the page might appear to work.

In short, many static file hosting tools are not suitable to serve a SPA with HTML5 routing, notably http-server (https://github.com/indexzero/http-server/issues/80). Try a different tool (e.g. serve) or use nginx with try_files $uri $uri/ index.html.

0
votes

This means your web page is being accessed over https, but it uses resources that are served over http. Modern browsers like Chrome consider this as a security risk. The browser does not load the http resources and shows a warning in the developers console.

The solution is to change the protocol method from http to https for all resources that are being accessed over http.

See this link: https://developers.google.com/web/fundamentals/security/prevent-mixed-content/fixing-mixed-content#alternatives_to_csp