I want to make an XMLHttpRequest to a secure uri (/) from javascript running inside a nonsecure 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.
I want to make an XMLHttpRequest to a secure uri (https://site./ajaxservice/) from javascript running inside a nonsecure page (http://site./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.
Share Improve this question edited May 28, 2010 at 2:41 amwinter asked May 28, 2010 at 2:03 amwinteramwinter 3,1392 gold badges28 silver badges28 bronze badges 5- 3 +1 for even contemplating writing SSL in JavaScript! – dkamins Commented May 28, 2010 at 2:07
- I don't think this is possible. Previously asked: stackoverflow./questions/1105934/ajax-http-https-problem – dkamins Commented May 28, 2010 at 2:10
- it's probably sort of possible using iframes and bookmark hashes but that is ugly ugly ugly and only secure if the part after the hash is not sent to server. – amwinter Commented May 28, 2010 at 2:16
- stale, answers to that question have changed now – Dan Beam Commented Nov 21, 2011 at 21:26
- Hello @amwinter: Can you please provide the code ( by git ) /snippet in making the secured call from nonsecured page please – Pradeep kumar N M Commented Jan 16, 2020 at 17:03
3 Answers
Reset to default 5That 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:
- Cross-domain Ajax with Cross-Origin Resource Sharing by Nicholas C. Zakas
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.
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/Security/wiki/Same_Origin_Policy#General_Principles.
Have you looked into JSONP (http://en.wikipedia/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, :).
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./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.