same-origin policy example
same origin policy header
same origin policy owasp
Consider the following piece of html code:
component1 code and
I am trying to understand how much 2 pieces of code can be isolated in the same page. For instance, suppose
component1 code includes jquery and
component2 code includes react js and the 2 specific versions I included have specific libraries. This means one component could break the other and they wouldn't be completely isolated.
Assuming both components would have to access dom elements in this html (so iframe wouldn't really be an option, I guess), is there a good way of creating a completely isolated java script "environment" for each piece of code? Like 2 different scopes, with their own imports and they couldn't conflict with each other, but still being able of being part of the same html page?
I think you can go for single page application framework like angular for your solution. In angular,
You just have to create two different components for comp1 and comp2 and they both would be isolated from each other unless you make them interact using a shared service or parent-child interactions.
Edit: you can use the ECMA script module feature for the same.
Thanks to @behzad
With Angular 4 and above, you can have completely separate scripts running within different components.
The Spectator, That is, in a way, a justification. intended," says the author, " to help girls who have left school or College in their study of the Bible at home." Unseal the Book, by Mrs. Ashley Carus- Wilson (R.T.S.), deals with the same Right Setting," again, enforces the necessity of looking at the context, not at isolated texts, but at the Allows two separate scripts running in different browsing contexts attached to the same document (e.g., two IFrames, or the main document and an IFrame, two documents via a SharedWorker, or two workers) to communicate directly via two ports. 41 (41) (Yes) (Yes) (Yes) Console API
- What do you mean "completely isolated"? There is only one global context so if you need isolation, you need to properly scope your code and not reach out to the global context. Also, on an HTML5 note,
type=and you definitely don't use
language: that is a deprecated attribute and hold-over from 1998 flavours of HTML.
- That's fair, I just took an example html to illustrate, the entire html can change, I don't even have to have a
scripttag either. By isolated, I meant having 2 independent pieces of code using different java script dependencies. So imagine I would have component 1 created using jquery 1.2 and component 2 created using jquery 1.3, assuming jquery 1.2 and jquery 1.3 are incompatible. My code is easy to isolate, it's under my control. Dependencies are not.
- That sounds like you're describing bundles, which wrap all the code in their own execution context so they don't tap into anything (else) that might be loaded on your page. There are several popular bundlers in the JS landscape at the moment, the unavoidable de facto one being webpack (typically with babel), and the dedicated es6+ bundler being rollup. I'd recommend hitting up their websites and reading up on what they let you do.
- To be clear - are these bundles for the client part? The js that runs in the browsers, not for something like node js or something, right?
- correct. You build bundles for client-side (=browser) deployment.
- Could you please either elaborate or provide some link I could study more?
- Thanks! This looks like what I want, I am not sure yet! I will study it, thanks a lot though
- I still have to search more about how to isolate dom parts and shade some global variables, but this would be other question. You answered what I was looking for, thanks.
- Yeah. there is shadow-dom for isolating HTML and CSS too.
- Yes, but I want component 1 to use angular and component 2 to use jquery, for instance. The hard part is the dependencies, component 1 could use angular version 123 and component 2 could use angular 234
- Interesting problem!