CODEWITHSUNDEEP
javascripthtmlajax
amwinter
amwinter

Reputation: 3139

secure xmlhttprequest from nonsecure page

I want to make an XMLHttpRequest to a secure uri (https://site.com/ajaxservice/) from javascript running inside a nonsecure page (http://site.com/page.htm). I've tried all kinds of nutty stuff like iframes and dynamic script elements, so far no go. I know I am violating 'same origin policy' but there must be some way to make this work.

I will take any kind of wacky solution short of having the SSL protocol written in javascript.

Upvotes: 5

Views: 13240

Answers (3)

dlongley
dlongley

Reputation: 2096

You said you would take anything short of having the SSL protocol written in JavaScript... but I assume you meant if you had to write it yourself.

The opensource Forge project provides a JavaScript TLS implementation, along with some Flash to handle cross-domain requests:

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

Check out the blog posts at the end of the README to get a more in-depth explanation of how it works.

Upvotes: 2

Daniel Vassallo
Daniel Vassallo

Reputation: 344331

That won't work by default due to the same origin policy, as you mentioned. Modern browsers are implementing CORS (Cross-Origin Resource Sharing) which you could use to get around this problem. However this will only work in Internet Explorer 8+, Firefox 3.5+, Safari 4+, and Chrome, and requires some server-side work. You may want to check out the following article for further reading on this topic:

You can also use JSONP as Dan Beam suggested in another answer. It requires some extra JavaScript work, and you may need to "pad" your web service response, but it's another option which works in all current browsers.

Upvotes: 5

Dan Beam
Dan Beam

Reputation: 3927

You can't circumvent cross-domain origin with XHR (well, only in Firefox 3.5 with user's permission, not a good solution). Technically, moving from port 80 (http) to 443 (https) is breaking that policy (must be same domain and port). This is the example the specification itself sites here - http://www.w3.org/Security/wiki/Same_Origin_Policy#General_Principles.

Have you looked into JSONP (http://en.wikipedia.org/wiki/JSON#JSONP) or CSSHttpRequests (http://nb.io/hacks/csshttprequest)?

JSONP is a way to add a <script> tag to a page with a pre-defined global callback across domains (as you can put the <script>s src to anywhere on the web). Example:

<script>

    function globalCallback (a) { /* do stuff with a */ }

And then you insert a <script> tag to your other domain, like so:

    var jsonp = document.createElement('script');
    json.setAttribute('src','http://path.to/my/script');
    document.body.appendChild(jsonp);

</script>

And in the source of the external script, you must call the globalCallback function with the data you want to pass to it, like this:

 globalCallback({"big":{"phat":"object"}});

And you'll get the data you want after that script executes!

CSSHttpRequests is a bit more of a hack, so I've never had the need to use it, though feel free to give it a try if you don't like JSONP, :).

Upvotes: 4

Related Questions