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?

Maybe [CORS](https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS) would help (for free and real SSL certs, check out [letsencrypt](https://letsencrypt.org/)...) — n00dl3, May 23 '16 at 09:53

score 43 · Accepted Answer · answered May 23 '16 at 09:50

43

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)

answered May 23 '16 at 09:50

Tom

4,666
2
29
48

I moved the code to an environment where proper `HTTPS` is in place, but still have the same issue! – J86 May 23 '16 at 12:43
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? – Tom May 23 '16 at 13:39
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)`. – J86 May 23 '16 at 14:13
In your JS code, for the AJAX request, do you specify https for the url? – Tom May 23 '16 at 14:21
2

No, I use a relative path, for example `../data/rdata.csv` – J86 May 23 '16 at 14:29
2

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? – Tom May 23 '16 at 14:32
Can we except one URL or domain using htaccess? – Sohil Sardhara Oct 04 '21 at 12:38

score 32 · Answer 2 · answered Sep 28 '21 at 10:20

32

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

answered Sep 28 '21 at 10:20

Smack Alpha

1,828
1
17
37

For some dev environments this is a good workaround to the issue – Pedro Cavaleiro Dec 01 '21 at 18:13
1

This is a good workaround for my test case, cheers! – saricden Dec 26 '21 at 14:34
This is good for development purpose! – Mark Nguyen Nov 18 '22 at 09:42

score 22 · Answer 3 · answered Jan 22 '20 at 10:32

22

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.

answered Jan 22 '20 at 10:32

user2791178

333
2
7

1

is there any option for mobile browsers ? Web browsers are working – Arepalli Praveenkumar Mar 26 '20 at 14:50

score 17 · Answer 4 · edited Feb 09 '23 at 05:44

17

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.

edited Feb 09 '23 at 05:44

sideshowbarker

81,827
26
193
197

answered Mar 07 '22 at 13:57

Super Kai - Kazuya Ito

22,221
10
124
129

score 13 · Answer 5 · answered May 20 '20 at 00:46

13

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

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

answered May 20 '20 at 00:46

Flavio Lopes

187
1
5

2

This solved my problem too. Why? I don't know. – Leandro Ferreira Jul 01 '21 at 01:56
2

Me too, it worked. Thumbs up. – compliance Sep 22 '21 at 22:24
2

This worked for me too... Sometime to do with / being a completely separate endpoint than the non-slash variant? Can someone explain? – Oscar Chambers Apr 11 '22 at 15:06
1

same here, I don't even need to add the meta element – Loreto Gabawa Jr. Nov 03 '22 at 12:15
3

In my case I actually had to remove the slash at the end... Not sure why tough. – Arthur Harduim Nov 16 '22 at 03:07

score 3 · Answer 6 · answered Apr 14 '22 at 09:46

3

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

answered Apr 14 '22 at 09:46

Mykhailo Kutsyi

31
4

score 1 · Answer 7 · answered Feb 28 '23 at 17:35

1

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

answered Feb 28 '23 at 17:35

Balogun Ridwan Ridbay

574
4
7

score 0 · Answer 8 · answered May 18 '20 at 00:18

0

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

answered May 18 '20 at 00:18

Daniel Jesus Cristobal Rojas

19
4

thank you, changing my base url from http to https helped me – Mrmld Sky Sep 14 '21 at 06:58

score 0 · Answer 9 · answered Jun 08 '21 at 06:12

0

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

answered Jun 08 '21 at 06:12

Jack

871
1
9
17

score 0 · Answer 10 · edited Dec 09 '21 at 01:38

0

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

edited Dec 09 '21 at 01:38

Peter Csala

17,736
16
35
75

answered Dec 08 '21 at 22:53

Artem Klymov

1

4

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](/help/how-to-answer). – Community Dec 09 '21 at 01:38

score -15 · Answer 11 · edited Oct 12 '18 at 18:38

-15

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.

edited Oct 12 '18 at 18:38

YakovL

7,557
12
62
102

answered Oct 12 '18 at 15:08

Wilmer

1

6

You should really elaborate your answer so that it's useful for others. What "check http: for https:" means? – YakovL Oct 12 '18 at 18:39
Please provide more detail on how this fixes the problem – Raul Marquez Jun 22 '22 at 22:57

Page loaded over HTTPS but requested an insecure XMLHttpRequest endpoint

11 Answers11

Linked

Related