StormRage StormRage - 1 month ago 5
HTML Question

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

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 anything way in which I can submit the data via GET and redirect the user to my thankyou page?

Answer

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.