Ajax using https on an http page

JqueryAjaxHttpsCors

Jquery Problem Overview


My site uses http and https protocol; it doesn't affect the content. My site uses jQuery ajax calls, which fills some areas on the page, too.

Now, I would like to do all ajax calls over https. (please dont ask me why :)) When I am on a page with https protocol, ajax requests are working. When I'm on a page with http protocol, I get a javascript error: Access to restricted URI denied

I know that this is a cross domain problem (in fact, it's a cross protocol problem), and I know that I should use the same protocol in ajax calls as on the current page.

Still, I want to all ajax calls to be https, and call them on a page that was served over http. Is there any workaround to achieve this (some json/proxy solution?), or is it simply impossible?

Jquery Solutions


Solution 1 - Jquery

Add the Access-Control-Allow-Origin header from the server

Access-Control-Allow-Origin: https://www.mysite.com

http://en.wikipedia.org/wiki/Cross-Origin_Resource_Sharing

Solution 2 - Jquery

Try JSONP.

most JS libraries make it just as easy as other AJAX calls, but internally use an iframe to do the query.

if you're not using JSON for your payload, then you'll have to roll your own mechanism around the iframe.

personally, i'd just redirect form the http:// page to the https:// one

Solution 3 - Jquery

http://example.com/ may resolve to a different VirtualHost than https://example.com/ (which, as the Host header is not sent, responds to the default for that IP), so the two are treated as separate domains and thus subject to crossdomain JS restrictions.

JSON callbacks may let you avoid this.

Solution 4 - Jquery

Check out the opensource Forge project. It provides a JavaScript TLS implementation, along with some Flash to handle the actual cross-domain requests:

http://github.com/digitalbazaar/forge/blob/master/README

In short, Forge will enable you to make XmlHttpRequests from a web page loaded over http to an https site. You will need to provide a Flash cross-domain policy file via your server to enable the cross-domain requests. Check out the blog posts at the end of the README to get a more in-depth explanation for how it works.

However, I should mention that Forge is better suited for requests between two different https-domains. The reason is that there's a potential MiTM attack. If you load the JavaScript and Flash from a non-secure site it could be compromised. The most secure use is to load it from a secure site and then use it to access other sites (secure or otherwise).

Solution 5 - Jquery

You could attempt to load the the https page in an iframe and route all ajax requests in/out of the frame via some bridge, it's a hackaround but it might work (not sure if it will impose the same access restrictions given the secure context). Otherwise a local http proxy to reroute requests (like any cross domain calls) would be the accepted solution.

Solution 6 - Jquery

Here's what I do:

Generate a hidden iFrame with the data you would like to post. Since you still control that iFrame, same origin does not apply. Then submit the form in that iFrame to the ssl page. The ssl page then redirects to a non-ssl page with status messages. You have access to the iFrame.

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
Questionuser135863View Question on Stackoverflow
Solution 1 - JqueryDalSoftView Answer on Stackoverflow
Solution 2 - JqueryJavierView Answer on Stackoverflow
Solution 3 - JqueryceejayozView Answer on Stackoverflow
Solution 4 - JquerydlongleyView Answer on Stackoverflow
Solution 5 - JqueryQuintin RobinsonView Answer on Stackoverflow
Solution 6 - JquerykjvView Answer on Stackoverflow