"Mixed content blocked" when running an HTTP AJAX operation in an HTTPS page

04/19/2020 16:30:02

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:

    SubmitFormClickToCall = function(){

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

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.

Verified Answer (77 Votes)

11/04/2015 00:45:24

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.


Answer #2 (100 Votes)

02/09/2018 12:37:47

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.


Answer #3 (31 Votes)

10/06/2018 22:44:22

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.

Hack Hex uses Stack Exchance API by the Stack Exchange Inc. to scrape questions/answers under Creative Commons license.