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?

Solution 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)

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

Solution 3

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

Solution 4

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

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

Solution 5

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.

View more solutions

Comments

[n00dl3]

Maybe CORS would help (for free and real SSL certs, check out letsencrypt...)

[J86]

I moved the code to an environment where proper HTTPS is in place, but still have the same issue!

[Tom]

If the data you request is not in the same domain, the domain providing the data must allow it with CORS or JSONP. What does your browser console says now?

[J86]

It says the exact same thing, and it is sitting within the same domain. By the way, what I mean by proper https is that it is now green, and browser says This page is secure (valid HTTPS) Where as before the https was red and the browser said This page is insecure (broken HTTPS).

[Tom]

In your JS code, for the AJAX request, do you specify https for the url?

[J86]

No, I use a relative path, for example ../data/rdata.csv

[Tom]

In the network console, do you see that request? Is it https (it should because your main page is https and you use relative path)? Are you sure that request doesn't redirect to http?

[YakovL]

You should really elaborate your answer so that it's useful for others. What "check http: for https:" means?

[Arepalli Praveenkumar]

is there any option for mobile browsers ? Web browsers are working

[Leandro Ferreira]

This solved my problem too. Why? I don't know.

[Mrmld Sky]

thank you, changing my base url from http to https helped me

[compliance]

Me too, it worked. Thumbs up.

[Sohil Sardhara]

Can we except one URL or domain using htaccess?

[Pedro Cavaleiro]

For some dev environments this is a good workaround to the issue

[Admin]

As it’s currently written, your answer is unclear. Please edit to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers in the help center.

[saricden]

This is a good workaround for my test case, cheers!

[jpgerb]

when I do this on mine, I get net::ERR_SSL_PROTOCOL_ERROR. website is https and API link I'm using is http - same server

[Oscar Chambers]

This worked for me too... Sometime to do with / being a completely separate endpoint than the non-slash variant? Can someone explain?

[PixelMaster]

this will only force-replace HTTP requests with HTTPS requests. If the HTTP url you're trying to access doesn't actually support HTTPS, it won't help.

[Artur Müller Romanov]

This removes the error for me but the action I am trying to perform still doesn't work and now the browser doesn't point to anything.

[Raul Marquez]

Please provide more detail on how this fixes the problem