How can I remove script elements before they are being executed?

Question

How can I remove script elements before they are being executed?

I thought about using the DOMNodeInserted event, but apparently it doesn't catch script elements. I've also tried using the jQuery livequery plugin like that:

$("script").livequery(function () { 
    $(this).remove();
});

It did remove the script element, but after it was executed.

I'm looking for a cross-browser solution, but I'm not even sure if that's possible. I read about Mutation Observers which seems close enough but I'm not sure if it can solve my problem.

It would be even better if there was a way to modify the script content before it is being executed without removing and recreating it.

I don't know a solution, but I've got a question: Why do you want to remove them (It seems that they're added because of an user)? If someone wants to execute code, he can also use a javascript console? — , May 02 '12 at 11:22
Modifying the code if you can detect the script and stop it from executing should be easy as you can just grab the src attribute, load it as text (in ajax), modify it and execute it. After you can watch the DOM with mutation observers, however for that to work the browser will need to add the script tag before it load and execute the file and I couldn't find any information about that. As if it is the later then detecting the insertion of the script tags will be useless as they will be run already. — GillesC, May 02 '12 at 11:33
Just wanted to add, without knowing the context or problem, that it sounds like weird approach for a solution and is one that is bond to give you a lot of headaches. If you explain the context maybe some might be able to suggest a smarter solution — GillesC, May 02 '12 at 11:34
What is the real problem you're trying to solve? Your current solution path seems odd and unlikely to succeed so you probably have a better chance of backing up and explaining the real problem you're trying to solve. — jfriend00, May 02 '12 at 12:49
@AlonGubkin why not load on demand?Is better than remove part of your code. — Jesus, Jul 16 '12 at 18:42

score 17 · Accepted Answer · answered Jul 20 '12 at 10:42

Removing a script element does not do anything. If you can somehow access a script element, it was executed a long time ago and removing it will have no effect.

So we need to work around it. If your script element is at the top of the page like this:

<head>
    <script src="yourscript.js"></script>

You could make a synchronous ajax request to the same page, so you can parse its content into a new document, modify all script tags and then replace the current document with the modified document.

var xhr = new XMLHttpRequest,
    content,
    doc,
    scripts;

xhr.open( "GET", document.URL, false );
xhr.send(null);
content = xhr.responseText;

doc = document.implementation.createHTMLDocument(""+(document.title || ""));

doc.open();
doc.write(content);
doc.close();


scripts = doc.getElementsByTagName("script");
//Modify scripts as you please
[].forEach.call( scripts, function( script ) {
    script.removeAttribute("src");
    script.innerHTML = 'alert("hello world");';
});

//Doing this will activate all the modified scripts and the "old page" will be gone as the document is replaced
document.replaceChild( document.importNode(doc.documentElement, true), document.documentElement);

Unfortunately this cannot be set up in jsfiddle or jsbin. But you should be able to copy paste this code exactly as it is into this page's console in google chrome. You should see the alerts and when you inspect the live dom, each script was modified.

The difference is that we are running this after scripts have been executed on the page, so the old scripts should still have a working effect on the page. That's why, for this to work, you need to be the very first script on the page to do it.

Tested to work in google chrome. Firefox is completely ignoring the doc.write call for some reason.

score -3 · Answer 2 · answered Jul 17 '12 at 18:27

i donot know what you are trying to do. But it is better to load them on request rather than delete on some conditions.

$.getScript('helloworld.js', function() {
     $("#content").html('
          Javascript is loaded successful! 
     ');
  });

If you wants to remove scripts before there execution, its not possible. But what you can do is, remove script programatically on a condition & if have an issue with memory-leaks, then you can call below code before remove script.

var var1 = 'hello';
var cleanAll = function () {
    delete window.var1;
    delete window.cleanAll;
};

// unload all resources
cleanAll();

How can I remove script elements before they are being executed?

2 Answers2

Linked

Related