How do I prevent javascript returned from an ajax request from executing when the response is inserted into the DOM?

Question

So, I see so many people wondering how to execute JS code returned via ajax. I wish I had that problem. My JS executes, but I don't want it too!

Using jQuery 1.4.2, I'm making a GET request:

$.ajax({
  url:'/myurl/',
  type:'GET',
  success:function(response){
    $('body').html(response);
  }
});

The response looks something like:

<p>Some content</p> 
<script>alert("hi!");</script>

Whenever the success callback fires and the response is injected into the DOM, the alert code fires! I don't want that to happen. What can I do to prevent this?

Answer 1

If you can't modify the response, try to "replace" <script> tags:

"<script>alert('hi');</script>".replace(/<(\/?script)/gi, "&lt;$1");

This should escape the tags, making they appear as plain text instead of executing.

Related links

• jQuery: Parse/Manipulate HTML without executing scripts
• XSS Cheat Sheet

Answer 2

Depends. Do you need the JavaScript, or can you just get rid of it? If you don't need it at all, you could do something like

response = response.replace(/<script.*?<\/script>/gi, "");

However, if you need it, you're going to need to figure out how to kill just the function call(s) that you don't want. Using your example of an alert:

response = response.replace(/alert\(.*?\)/gi, "alert");

By getting rid of the trailing parens, and whatever they contain, you stop the function call from happening. Obviously, what you'll need in your regex will depend on the actual code that's causing the problem.

Answer 3

 $('body').html(response.replace(/(<script)[^\>]*/g,'$1 src="emptyfile.js"'));

where emptyfile.js exists but has no content.

Answer 4

Hello there, did you try returning function() snippets like
<script>
function Hello(){
alert('Hello');
}
</script>
This way the your JS doesn't execute right away but can be called later when required. But, again it depends what you actually want to do.