what happens in asynchronous loading of webapps if

Question

the question is: what happens in asynchronous loading of webapps if some script delete the previously loaded or included scripts?

Let have several scripts included:

<script src="Squel.js" async="" type="text/javascript"></script>
<script src="PSquel.js" async="" type="text/javascript"></script>
<script src="MySquel.js" async="" type="text/javascript"></script>

No matter, whether it is included by markup or dynamically via requireJS, the same order of asynchronous script includes happen.

Content of MySquel.js file could be this malicious code:

document.getElementsByTagName('script').forEach(function(val,i,arr){
if(/PSquel/.test(val.src)){
val.parentNode.removeChild(val);
}
}

Of course the question is very browser specific though, i'm interested in that is there any quirks around that opens up memory holes in any specific browser. I am also interested about any edge cases you know!

I am very thankful about your response in any of the edge cases you know concerning possibly unsecure script loads! Thanks.

Answer 1

Nothing. The <script> nodes are removed from the DOM, but that cannot revert what happened during the execution of the JavaScript which was loaded through them. Actually, they do serve no purpose after they are instantiated, which triggers script downloading and evaluation.

The only thing that might be affected are other scripts that rely on the DOM nodes to exist, for example to read templating strings, content location urls or other data from them.

Answer 2

The only thing that happens is that the source code in the scripts goes away.

The scripts have already been parsed and executed, which creates Javascript objects (e.g. function objects), and those objects doesn't go away when you remove the source code.