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.

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

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

Answer 3

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.

Answer 4

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.