Is there a way I can get 2 completely isolated javascript contexts inside a same web page?

es6 modules
script type=module
same-origin policy example
javascript module example
javascript import
same origin policy header
same-origin policy javascript
same origin policy owasp

Consider the following piece of html code:

<html>
<head>
<script language="JavaScript1.5">
    // sdk code

    // root_scripts

    // component1 code

    // component2 code
</script>
</head>
<body>
<h2>simple page</h2>
Hi world

<div id="root"></div>

</body>
</html>

The lines component1 code and component2 code could be either just 2 includes to different js files, or really 2 pieces of javascript code, I don't care.

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?

The JavaScript standard from 2015 introduces its own, different module system. It is usually called ES modules, where ES stands for ECMAScript. Instead of calling a function to access a dependency, you use a special import keyword.

JavaScript: The Definitive Guide: Activate Your Web Pages, Activate Your Web Pages David Flanagan. elements above has the same name attribute (or if one element has a name We'll talk about this again in §14.8.2. The scripts running in one tab usually have no way of even knowing that the other they are all browsing contexts, and to JavaScript, they are all Window objects. As explained partially in other answers, the JS variables from the page are isolated from your Chrome extension content script. Normally, there's no way to access them. But if you inject a JavaScript tag in the page, you will have access to whichever variables are defined there. I use a utility function to inject my script in the 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.

This is the reference: https://medium.freecodecamp.org/how-to-use-ecmascript-modules-to-build-modular-components-in-javascript-9023205ea42a

Thanks to @behzad

Programming Windows Store Apps with HTML, CSS, and JavaScript, And once in the web context, an iframe can host only other web context or document.location for page navigation, similar rules apply if you do happen to use them. how to load an in-package HTML page in the web context and communicate Very similarand more isolated examples can also be found in scenarios 2  isolated-vm -- Access to multiple isolates in nodejs isolated-vm is a library for nodejs which gives you access to v8's Isolate interface. This allows you to create JavaScript environments which are completely isolated from each other. You might find this module useful if you need to run some untrusted code in a secure way.

I don't know about JavaScript, but you can do this with Angular and Typescript.

With Angular 4 and above, you can have completely separate scripts running within different components.

JavaScript modules - MDN Web Docs, This guide gives you all you need to get started with JavaScript module syntax. its usage in the early days was to do isolated scripting tasks, providing a bit well as JavaScript being used in other contexts (Node.js, for example). It This is very similar to how we apply a regular script to a page, with a few  Note: The exports referenced in shapes.js basically get redirected through the file and don't really exist there, so you won't be able to write any useful related code inside the same file. So now in the main.js file, we can get access to all three module classes by replacing

Same-origin policy, Two URLs have the same origin if the protocol, port (if specified), and from pages with an about:blank or javascript: URL inherit the origin of the it. data: URLs get a new, empty, security context. A script can set the value of document​.domain to its current domain or a How to allow cross-origin access. There are 2 ways to send messages to Web Workers: Copying the message: the message is serialized, copied, sent over, and then de-serialized at the other end. The page and worker do not share the same instance, so the end result is that a duplicate is created on each pass.

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

The Basics of Web Workers, Web Workers are a means of spawning background scripts in your The worker will not begin until the file has completely downloaded The page and worker do not share the same instance, so the end Taking this one step further, we can get clever with how the worker's JS code is inlined in our page. A high-level definition. JavaScript is a scripting or programming language that allows you to implement complex features on web pages — every time a web page does more than just sit there and display static information for you to look at — displaying timely content updates, interactive maps, animated 2D/3D graphics, scrolling video jukeboxes, etc. — you can bet that JavaScript is

Comments
  • 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, <script> means it's javascript. You don't add a type= and you definitely don't use Javascript 1.5. The only two supported values are module and javascript, and anything else is meaningless (in the HTML spec sense) and won't do anything. You also 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 script tag 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!