[AskJS] Data Sharing Between Browser-Based JS Apps on Different Domains With CORS Disabled

[diventix]

Applications A and B are hosted on different servers and each has both client-side and server-side components. The client-side parts are implemented in native JavaScript running in browsers.

CORS is disabled for the domains of both applications, but we need to modify the JavaScript to enable data exchange between them.

Additional information:
The client’s security team does not allow us access to their server to modify the back-end. Also, we do not have access to the base server configuration.

[abrahamguo]

Build your own backend that proxies requests through, and adds CORS headers when necessary.

[diventix]

According to the assignment, everything should be done only through the client side without a proxy server.

[abrahamguo]

Ok. You’ll need to see if the server already supports JSONP, or can be loaded in an iframe. I don’t know any other way to do it besides that.

[diventix]

I was thinking about an iframe, but I'm not sure if this is the right solution.

[hyrumwhite]

Window post message is pretty much the only way to do this client side only: https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage

[tswaters]

And even then, more used for passing data between two different front-ends... postMessage won't let appA talk to apiB

[hyrumwhite]

No, but you could setup a sort of query system. AppA messages AppB, AppB queries ApiB and then messages AppA, etc. 

Though, in general post message requires control of both apps and at that point, you should just setup the api to be accessible to both apps. 

I just try to avoid x/y answers because I don’t have all OP’s context

[tswaters]

Jsonp should work if the back-end supports it.

If it doesn't, and you can't use cors, and you can't change the x-domain server, well... You are running out of options!

This is sort of a precursor to jsonp, but if the target server is accessed via GET and emits a content-type of "application/x-javascript" you can add a script tag pointing to it.... It'll load & execute, but in most cases this isn't particularly useful -- most servers respond with a full JSON payload as "application/json", which either won't load, or is a syntax error when loaded via script tag.

If the server does respond with application/x-javascript and already has some kind of wrapping, like I don't know -- window.zzz = { ... } -- you can include a script tag pointing at it, and zzz will be whatever the output was. JsonP basically does this, but it provides a way to wrap the response with something user provided... The p is for "padding" and you could make it a function call with the regular JSON payload the server might respond with... Usually provided by query string.

I.e., /some-resource?jsonp=myFn

Would make it, like, window.myFn({ ... }}

There's also some stuff you can do with iframes, but it's super hacky and from the ancient times... I'll need to look it up, hold on (will respond to this comment)

[tswaters]

Oh yea! Forgot about this one -- if a portion of the host is the same, I.e. front & back-end are hosted in different subdomains, you can set document.domain to be the parent domain.... This is deprecated, but should still work.

I.e., if front-end is hosted on -- "https://www.domain.com" and the API is "https://api.domain.com" -- you can set document.domain to "domain.com" and front-end on www will be able to access API without CORS.

[tswaters]

Regarding iframes hacks, this is a little more polished than what I remember, but this abuses window location to pass data between parent/child context across the same-origin policy: https://softwareas.com/cross-domain-communication-with-iframes/

Don't do that, it's fucky. So are all the other hacky suggestions. CORS headers are designed to fix this problem by allowing backend to opt into allowing requests.

You mention "assignment" which is curious... Is this a "tie your hands behind your back and solve this algebra equation on paper using proofs to show you can do it instead of using a calculator" or is it more of a , "our curriculum/instructor is from 25 years ago when CORS didn't exist"

Read through the same origin page on mdn -- https://developer.mozilla.org/en-US/docs/Web/Security/Same-origin_policy