Page loaded over HTTPS but requested an insecure XMLHttpRequest endpoint

Question

I have a page with some D3 javascript on. This page sits within a HTTPS website, but the certificate is self-signed.

When I load the page, my D3 visualisations do not show, and I get the error:

Mixed Content: The page at ' https://integration.jsite.com/data/vis ' was loaded over HTTPS, but requested an insecure XMLHttpRequest endpoint ' http://integration.jsite.com/data/rdata.csv '. This request has been blocked; the content must be served over HTTPS.

I did some research and all I found what the JavaScript will make the call with the same protocol that the page was loaded. So if page was loaded via https then the rdata.csv should also have been requested via https , instead it is requested as http .

Is this because the certificate is self-signed on the server? What I can do to fix this, other than installing a real SSL certificate?

Answer 1

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)

Answer 2

I had the same issue for my angular project, then I make it work in Chrome by changing the setting. Go to Chrome setting -->site setting -->Insecure content --> click add button of allow, then add your domain name [*.]XXXX.biz

Now problem will be solved.

Answer 3

You will be able to solve the error by adding this code to your html file:

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

If any solutions don't work, try this solution.

Answer 4

Steps to Allow Insecure Content in Chrome

To allow insecure content on individual sites within Chrome , click on the lock icon in the URL bar, then click 'Site settings'.

There you will see a list of various permissions the page has. Choose 'Allow' next to 'Insecure content'.

Now your HTTPS site can access HTTP endpoint

Answer 5

As for me, I had same warning.

I fixed it at URL request. I had excessive '/'.

Before: const url = ${URL}search/movie/?api_key=${API_KEY}&query=${movie} ;

After: const url = ${URL}search/movie?api_key=${API_KEY}&query=${movie} ;

Answer 6

I solved the problem adding a slash at the end of the requesting url

This way: '/data/180/' instead of: '/data/180'

Answer 7

One solution here server side end point which you access via https, which then makes the call to whichever http url, and then and returns the result. In other words, making your own little HTTPS proxy to access the http resource

Answer 8

更新 core_config_data 设置值='X-Forwarded-Proto' where path='web/secure/offloader_header'

Answer 9

我遇到了同样的问题，但是从 Visual Studio 中的 IIS，我转到了项目属性 -> Web -> 并且项目 url 将 http 更改为 https

Answer 10

I have a page with some D3 javascript on. This page sits within a HTTPS website, but the certificate is self-signed.

When I load the page, my D3 visualisations do not show, and I get the error:

Mixed Content: The page at ' https://integration.jsite.com/data/vis ' was loaded over HTTPS, but requested an insecure XMLHttpRequest endpoint ' http://integration.jsite.com/data/rdata.csv '. This request has been blocked; the content must be served over HTTPS.

I did some research and all I found what the JavaScript will make the call with the same protocol that the page was loaded. So if page was loaded via https then the rdata.csv should also have been requested via https , instead it is requested as http .

Is this because the certificate is self-signed on the server? What I can do to fix this, other than installing a real SSL certificate?

Answer 11

this is easy,
if you use .htaccess , check http: for https: ,
if you use codeigniter, check config : url_base -> you url http change for https.....
I solved my problem.