CODEWITHSUNDEEP
javascripthttpsslhttpsxmlhttprequest
J86
J86

Reputation: 15237

Page loaded over HTTPS but requested an insecure XMLHttpRequest endpoint

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?

Upvotes: 83

Views: 323006

Answers (11)

Flavio Lopes
Flavio Lopes

Reputation: 337

I solved the problem by adding a slash at the end of the requested URL.

This way ✅:

/data/180/

Instead of ❌:

/data/180

Upvotes: 17

user2791178
user2791178

Reputation: 341

I had the same issue with my angular project. Then, I made it work in Chrome by changing the settings.

Go to Chrome setting --> Site setting --> Insecure content --> click add button of allow, then add your domain name [*.]XXXX.biz

Now the problem will be solved.

Upvotes: 22

Balogun Ridwan Ridbay
Balogun Ridwan Ridbay

Reputation: 670

Add <meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests"> to the html file, this would solve the issue.

You can read more on Mozilla Develop Doc

Upvotes: 5

Super Kai - Kazuya Ito
Super Kai - Kazuya Ito

Reputation: 1

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.

Upvotes: 28

Mykhailo Kutsyi
Mykhailo Kutsyi

Reputation: 31

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};

Upvotes: 3

Artem Klymov
Artem Klymov

Reputation: 1

update core_config_data 
set value='X-Forwarded-Proto' 
where path='web/secure/offloader_header'

Upvotes: 0

Smack Alpha
Smack Alpha

Reputation: 1980

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'.

enter image description here

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

enter image description here

Now your HTTPS site can access HTTP endpoint

Upvotes: 46

Jack
Jack

Reputation: 951

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

Upvotes: 0

Daniel Jesus Cristobal Rojas
Daniel Jesus Cristobal Rojas

Reputation: 19

I had the same problem but from IIS in visual studio, I went to project properties -> Web -> and project url change http to https

Upvotes: 0

Wilmer
Wilmer

Reputation: 1

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.

Upvotes: -16

Tom
Tom

Reputation: 4826

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)

Upvotes: 44

Related Questions