176

I've a form which I'm submitting (through GET as it is required this way) to a crm (ViciDial). I can successfully submit the form however if I do that the processing file at crm will just echo a success text and that's it.

Instead of that text, I want to display a thank-you page on my website, so I decided to use AJAX to submit the form and redirect it to the page I need, however I'm getting this error on my browser:

Mixed Content: The page at 'https://page.com' was loaded over HTTPS, but requested an insecure XMLHttpRequest endpoint 'http://XX.XXX.XX.XXX/vicidial/non_agent_api.php?queries=query=data'. This request has been blocked; the content must be served over HTTPS.

This is my AJAX script:

<script>
SubmitFormClickToCall = function(){
            
    jQuery.ajax({
        url: "http://XX.XXX.XX.XX/vicidial/non_agent_api.php",
        data : jQuery("#form-click-to-call").serialize(),
        type : "GET",
        processData: false,
        contentType: false,
        success: function(data){
            window.location.href = "https://www.example.com/thank-you";
        }
    });
}
</script>

Just setting https in the URL won't work, is there any way in which I can submit the data via GET and redirect the user to my thankyou page?

============================

Problem here was mixed content, this means that I loaded a page through HTTPS and was trying to hit via AJAX an API that was in HTTP. But the browser wont allow us to just do that.

So if you can't set the API to be HTTPS (this was my case) we can still approach this in a different way.

The Main Problem was not the mixed content issue it was that I wanted to submit data to an API and redirect the users to a fancy thank you page. Instead of using AJAX, i made a php file that receives the data sends it using curl to the API (as this is being done server side there is no mixed content issue) and redirects my happy user to a fancy thank you page.

4
  • Do you have a secure version of your API? You'll need to request over HTTPS if you are using a secure site as the origin. Nov 3, 2015 at 19:38
  • 1
    No I don't, is there any other way in which I could do that? I mean the request goes through if just use the form submit with no Ajax
    – VdeVentura
    Nov 3, 2015 at 19:45
  • You could create an HTTPS URL in Apache to proxy to XX.XXX.XX.XX over HTTP. However, if the purpose of HTTP is to protect user's information, you will need to be careful that the route between servers does not go over the public internet.
    – halfer
    Nov 4, 2015 at 8:08
  • Only for development I want to share my answer: stackoverflow.com/a/65358511/104085
    – uzay95
    Dec 18, 2020 at 14:22

13 Answers 13

248

I resolved this by adding following code to the HTML page, since we are using the third party API which is not controlled by us.

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

Hope this would help, and for a record as well.

11
  • 25
    This upgrades all http requests to use https, so you don't need to change the protocol for each call.
    – eithed
    Nov 9, 2018 at 14:24
  • 3
    This worked for me, but unfortunately this doesn't work with Internet Explorer: developer.mozilla.org/en-US/docs/Web/HTTP/Headers/… Apr 30, 2019 at 8:02
  • 5
    I've tried this but now i am getting CORS error on firefox and net::ERR_SSL_PROTOCOL_ERROR on chrome. i know all calls work because my webpage was http before but now that i changed to https these calls are not working. is there anythign else i can add to my main html file? Because if i follow @Juanma Menendez steps all calls work but i cant expect every user to do this. Aug 15, 2019 at 15:00
  • I have been struggling with this issue for hours till i found your answer, thanks alot!
    – Muhab
    Aug 29, 2019 at 4:42
  • 2
    my website using https and my api using http. this not work for me. im use chrome on macbook bigsur. May 12, 2021 at 6:47
135

If you load a page in your browser using HTTPS, the browser will refuse to load any resources over HTTP. As you've tried, changing the API URL to have HTTPS instead of HTTP typically resolves this issue. However, your API must not allow for HTTPS connections. Because of this, you must either force HTTP on the main page or request that they allow HTTPS connections.

Note on this: The request will still work if you go to the API URL instead of attempting to load it with AJAX. This is because the browser is not loading a resource from within a secured page, instead it's loading an insecure page and it's accepting that. In order for it to be available through AJAX, though, the protocols should match.

9
  • 2
    OK, the api is in my server, is there any guide I can follow to make it https?
    – VdeVentura
    Nov 3, 2015 at 19:47
  • 3
    @StormRage Absolutely! What type of server are you running? Apache? Is it shared hosting or a private server? Nov 3, 2015 at 19:48
  • 1
    @StormRage Please let me know if you need any further assistance. Otherwise, voting will incentivize the public assistance you get here on SO. Nov 4, 2015 at 16:26
  • 2
    Sorry for being late on this, i managed to solve it without using AJAX, my solutions includes some wordpress functions/ php curl, ill post my solution as soon as I can, should i just edit my question and write my solution in it, or should i used the button that says "answer your own question" ?
    – VdeVentura
    Nov 5, 2015 at 16:33
  • 2
    Highlighted the relevant part of the answer here. The only practical solution to this is to use HTTPS
    – Liam
    Oct 25, 2016 at 13:13
37

If you are just visiting a webpage that you trust and you want to move forward fast, just:

1- Click the shield icon in the far right of the address bar.

Allow mixed content in Google Chrome

2- In the pop-up window, click "Load anyway" or "Load unsafe script" (depending on your Chrome version).


If you want to set your Chrome browser to ALWAYS(in all webpages) allow mixed content:

1- In an open Chrome browser, press Ctrl+Shift+Q on your keyboard to force close Chrome. Chrome must be fully closed before the next steps.

2- Right-click the Google Chrome desktop icon (or Start Menu link). Select Properties.

3- At the end of the existing information in the Target field, add: " --allow-running-insecure-content" (There is a space before the first dash.)

4- Click OK.

5- Open Chrome and try to launch the content that was blocked earlier. It should work now.

3
  • 8
    This does nothing for people designing websites for those users who don't want to change their settings to make the site work on their browser, for example, the OP.
    – smallpants
    Jun 6, 2019 at 18:08
  • 1
    thanks brother. work well. very helpful for development process. May 12, 2021 at 6:32
  • I don't see the shield button in Chrome Mar 27 at 11:44
33

The reason for this error is very simple. Your AJAX is trying to call over HTTP whereas your server is running over HTTPS, so your server is denying calling your AJAX. This can be fixed by adding the following line inside the head tag of your main HTML file:

<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests"> 
4
  • 2
    it allows it but request is https
    – Bruno
    Sep 22, 2019 at 19:08
  • 4
    In my case. the server only HTTP request. I try this <meta> cannot work. The Browser say request error at URL.
    – iHad 169
    Feb 16, 2020 at 16:13
  • In my story I have HTTPS host and send request to HTTP API, browser returned error "Mixed Content: The page at", what can do it? Oct 30, 2020 at 20:08
  • @NikolayBaranenko any update ? how ti fix that. i am also in same situation now and cannot afford another ssl for API end point now Apr 16, 2021 at 12:06
11

I had the same issue with Axios requests in a Vue-CLI App. On further checking in Network tab of Chrome, I found that the request URL of axios correctly had https but response 'location' header was http.

This was caused by nginx and I fixed it by adding these 2 lines to server config for nginx:

server {
    ...
    add_header Strict-Transport-Security "max-age=31536000" always;
    add_header Content-Security-Policy upgrade-insecure-requests;
    ...
}

Might be irrelevant but my Vue-CLI App was served under a subpath in nginx with config as:

location ^~ /admin {
        alias   /home/user/apps/app_admin/dist;
        index  index.html;
        try_files $uri $uri/ /index.html;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Host $host;
}
0
11

Mikel's answer above is correct; it's related to the frontend with HTTPS and the backend with HTTP; So install the SSL certificate on your backend.

To workaround that during testing on my chrome browser; I changed the chrome settings for the desired site to insecure content as the pictures below

1- click on the locker icon and choose site settings

enter image description here

2- At the insecure content change it from block to allow.

enter image description here

5

For laravel 8 in local it was ok but in production I had the problem. To solve it I used POST method and removed a simple slash at final of url. I changed it from:

/my/url/

to:

/my/url

and it works.

I don't know the reason. Perhaps somebody could explain it.

1
  • Same thing for Laravel 7
    – Arnooo
    Aug 22, 2021 at 8:37
2

Instead of using Ajax Post method, you can use dynamic form along with element. It will works even page is loaded in SSL and submitted source is non SSL.

You need to set value value of element of form.

Actually new dynamic form will open as non SSL mode in separate tab of Browser when target attribute has set '_blank'

var f = document.createElement('form');
f.action='http://XX.XXX.XX.XX/vicidial/non_agent_api.php';
f.method='POST';
//f.target='_blank';
//f.enctype="multipart/form-data"

var k=document.createElement('input');
k.type='hidden';k.name='CustomerID';
k.value='7299';
f.appendChild(k);



//var z=document.getElementById("FileNameId")
//z.setAttribute("name", "IDProof");
//z.setAttribute("id", "IDProof");
//f.appendChild(z);

document.body.appendChild(f);
f.submit()
3
  • I actually want to hit an API, but when I do it with your method by making a get request I would actually be submitting a form but now I am stuck with reading the response back from API. Cause I guess for that AJAX or xmlhttprequest is the only option Jun 6, 2019 at 15:13
  • intereting solution :-)
    – Bruno
    Sep 22, 2019 at 19:10
  • simple and brilliant
    – Harkal
    Jul 5, 2020 at 23:24
2

This solution work for me fine

just add to the head

<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests"> 
1
  • Thank You. This solution work for me. <meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests"> Dec 6, 2022 at 11:45
1

If your API code is running on a node.js server then you need to focus your attention there, not in Apache or NGINX. Mikel is right, changing the API URL to HTTPS is the answer but if your API is calling a node.js server, it better be set up for HTTPS! And of course, the node.js server can be on any unused port, it doesn't have to be port 443.

4
  • The API was third party, so there was no way I could set it to https, and as you can see in the url I was trying to hit, the API was coded in PHP
    – VdeVentura
    Mar 7, 2017 at 16:09
  • @StormRage Your question and Mikel's answer led to a solution for my problem so I thought I'd make note of it here even though my answer doesn't really apply to your situation.
    – mcmacerson
    Jul 4, 2017 at 16:05
  • Well, you and Mikel are right, the most reasonable solution would be to make use of ssl in the API, but in this context I was no able to do that as it was a 3rd party API, but a solution for ppl using wordpress or any legacy site could be sending the data to their backend and send the request to the API within the server.
    – VdeVentura
    Jul 5, 2017 at 4:06
  • i implemented api by laravel as server side and ionic application as PWA on same host so i have same error mentioned in this article stackoverflow.com/q/56157129/308578 May 17, 2019 at 14:33
0

I was same problem, but for me the problem was ng build command. I was doing "ng build --prod" i have corrected it to "ng build --prod --base-href /applicationname/". and this solved my problem.

0

in my case, my localhost was http and my deployed version was https, so i used this script to add http-equiv meta tag only for https:

if (window.location.protocol.indexOf('https') == 0){
  var el = document.createElement('meta')
  el.setAttribute('http-equiv', 'Content-Security-Policy')
  el.setAttribute('content', 'upgrade-insecure-requests')
  document.head.append(el)
}
0

I want to share a slight oddity which triggered a Mixed Content issue for me. I am using DataTables and was providing an AJAX url which looked like this:

mypath/ajax_get/'.$clientID

This was set in PHP but $clientID wasn't always set. As such when the Datatables code ran it simply ended ajax_get/. For some unknown reason, this was enough to bypass https and try and load over http instead. I don't think this is a browser bug as I tried it in Chrome and Firefox but if you're having problems, I hope this helps.

As always with html/debugging, if in doubt, create a duplicate page and strip chunks of code back until you can pinpoint the issue!

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.