How to Fix "Insecure Content Was Loaded Over Https, But Requested an Insecure Resource"

How to fix insecure content was loaded over HTTPS, but requested an insecure resource

"Mixed Content" warnings occur when an HTTPS page is asked to load a resource over HTTP.

This is dangerous because the insecure resources are vulnerable to alteration by an active attacker or eavesdropping by a passive attacker, which violates the user's expectation of security for an HTTPS page.

https://developers.google.com/web/fundamentals/security/prevent-mixed-content/fixing-mixed-content?hl=en

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

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

Page loaded over HTTPS but requested an insecure XMLHttpRequest endpoint

What I can do to fix this (other than installing a real SSL certificate).

You can't.

On an https webpage you can only make AJAX request to https webpage (With a certificate trusted by the browser, if you use a self-signed one, it will not work for your visitors)

How to fix 'Mixed Content: The page was loaded over HTTPS, but requested an insecure script

Preventing Mixed Content go through the content and used appropriate Bootstrap and jquery version links.

Error: The page at 'index.html' was loaded over HTTPS, but requested an insecure XMLHttpRequest endpoint

This means that you accessed your website using HTTPS, but when you XMLHttpRequest, you're using HTTP in that code. It would be helpful to see that code. If you're using XMLHttpRequest like this: http://example.com/, change it to: https://example.com/. This error means you need to use all HTTPS or all HTTP.

Edit: According to another StackOverflow post, you should actually leave out the http/https completely:
//example.com/

Mixed Content: The page at 'domain' was loaded over HTTPS, but requested an insecure XMLHttpRequest endpoint

Thanks to @PaulTsai it works now. I had to change:

form.post('/admin/gallerie/')

to:

form.post('/admin/gallerie')

Edit:

I've just experienced exactly the same issue but with the fetch api, this time with paypal. In production I had to change:

fetch('/api/paypal/order/create/', ...

to:

fetch('/api/paypal/order/create', ...

Maybe it helps someone

Web API Error - This request has been blocked; the content must be served over HTTPS

If your web app is being hosted over HTTPs as you've indicated, then all external resources it is consuming (CDN, scripts, CSS files, API calls) should also use SSL and be secured through HTTPs. Think about it. It would defeat the purpose of your app being secure, if your app was in turn making insecure requests to an API.

You can either therefore:

As Chrome suggests, change your API calls to use HTTPs (recommended)
Use HTTP instead of HTTPs
Add the following meta tag to your <head> element in your HTML:
<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests" />

More information about this can be found here: https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/upgrade-insecure-requests.

How to Fix "Insecure Content Was Loaded Over Https, But Requested an Insecure Resource"