Mixed Content The page at was loaded over HTTPS but requested an insecure resource This request has been blocked the content must be served over HTTPS

Question

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

Lull

Answer 1

There's no way to disable mixed content using javascript but you can add this tag

<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">

to your HTML to allow mixed content

Lull

This does not appear to have any effect on the current version of Chrome. See my answer below on the Chrome flag. – Yoong

Answer 2

to allow Mixed Content:
1- add this meta tag to the page (HTML File)

<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">

2- add unsafe_url for referrerPolicy to your fetch requests if you get ERR_CONNECTION_REFUSED
example:

fetch('http://URL', {
    // ...
    referrerPolicy: "unsafe-url" 
});

Warning: This policy will leak potentially-private information from HTTPS resource URLs to insecure origins. Carefully consider the impact of this setting.

for more info check these 2 documentations:

1. https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Referrer-Policy
2. https://javascript.info/fetch-api

Castalia

referrerPolicy: "unsafe_url" does not appear to have any effect in Chrome. – Yoong

Neither of these appear to have any effect in Chrome. – Yoong

Correct value is "unsafe-url" (with dash). MDN says it fully supported in Chrome. – Catalinacatalo

Note that the "unsafe-url" policy only allows the browser to send the request, it does NOT allow the browser to use the content that is returned. From the MDN doc: "Send the origin, path, and query string when performing any request, regardless of security." And the example they give shows both URLs with HTTPS protocol. – Yoong

Answer 3

In Chrome, you can treat a url as safe via this flag:

chrome://flags/#unsafely-treat-insecure-origin-as-secure

You can enter multiple protocol and urls, even using local IP addresses in a comma delimited list. E.g. http://192.168.1.142, ws://192.168.1.142

Problems: 1. Requires trust or knowledge on part of the user (browser starts with a warning message about degraded functionality), 2. Chrome specific. 3. Slightly reduces security.

Yoong

But we can't tell all our site visitors to change Chrome flags – Afc

Answer 4

Add below to .htaccess

Header add Content-Security-Policy "upgrade-insecure-requests"

This will let the browser try to load HTTP content on the HTTPS page in HTTPS.

Soundless

This answer solved my issue but , can you explain how this happened. Page worked fine for like 1 month and then suddenly this morning this happened – Mcauliffe

@AnelHodžić Probably because the browser updated and the new version started enforcing mixed content errors. – Yoong

This does not appear to have any effect in Chrome – Yoong

Answer 5

I had a similar problem with HTTPS page requesting detecting Ajax folder existence https://domanin.name/folder get mix-content with 301 redirect error with header location changed to http: works fine with https://domanin.name/folder/ if you don't use / end of the file server redirect destination with adding / but why http: instead https: strange behavior!

Odont