CODEWITHSUNDEEP
javascriptjquery
larryzhao
larryzhao

Reputation: 3213

How to prevent javascript execution when using jQuery .html()

I need to insert customer created content from an input textarea using $.html() of jquery to another div on the page for a live preview feature

But if customer typed javascript inside the content, like:

<script type='text/javascript'>
alert('abc');
</script>

When calling this with .html(), the javascript will get executed, and if I use .text(), then the content will not be regarded as html.

How could I fix this? I created a jsfiddle for it: http://jsfiddle.net/larryzhao/VL82f/

Update: Maybe I need to made it more clear, I am doing a preview for markdown. So user enters markdown on the textarea, and I converted to html, and display it to the div#dest. What if the user enters script as displayed above? Is there any way to keep the original type but not execute it? If there's not, then I think I would just write a regexp to wipe the script block out I think..

I found two online markdown tool: http://daringfireball.net/projects/markdown/dingus this one executes it http://www.ctrlshift.net/project/markdowneditor/ and this one just wipe the script block out

Upvotes: 2

Views: 977

Answers (6)

AJ.
AJ.

Reputation: 1144

Why not locate a <script>...</script> and escape the characters in the section of the code?

For example:

<script src="test/javascript>
var userInput=document.getElementByID("#input");
..
..
..
</script>


&lt;script src=&quot;test/javascript&gt;
var userInput=document.getElementByID(&quot;#input&quot;);
..
..
..
&lt;/script&gt;

Upvotes: 0

Sudhir Bastakoti
Sudhir Bastakoti

Reputation: 100195

you can replace script tags with someting else so that you only see alerted value in preview, like:

$(document).ready(function() {
    $('#source').on('keydown', function(){
       var content = ($(this).val()).replace(/(<\s*\/?\s*)script(\s*([^>]*)?\s*>)/gi ,'$1jscript$2')
        console.log( content );
        $("#dest").html( content );
    });
});

See: jsFiddle

Upvotes: 1

frenchie
frenchie

Reputation: 52037

If the text the user enters stays on the client then why does it matter if a user wants to XSS himself?? And if the text goes back to the server then you sanitize it there, so that if other users see the input, they'll see a cleaned-up input.

Upvotes: 1

Prasanth
Prasanth

Reputation: 5268

You can sanitize user input, remove xss.

See node-validator

Upvotes: 0

Shankar Cabus
Shankar Cabus

Reputation: 9792

You would have to create a regex to not insert the <script> in the preview:

<script (.|\n)*?>(.|\n)*?</script>

or try it:

function stripScripts(s) {
  var div = document.createElement('div');
  div.innerHTML = s;
  var scripts = div.getElementsByTagName('script');
  var i = scripts.length;
  while (i--) {
    scripts[i].parentNode.removeChild(scripts[i]);
  }
  return div.innerHTML;
}

alert(
  stripScripts('<span><script type="text/javascript">alert(\'foo\');<\/script><\/span>')
);

Upvotes: -1

tadman
tadman

Reputation: 211720

Is there a HTML sanitizer for JavaScript? If so, this is the way to do it. As a note, this is very not easy to do correctly, so a naive regex is usually insufficient. If you're saving this somewhere through an application, the preview feature could leverage that sanitizer by posting and getting back the cleaned up version.

Upvotes: 1

Related Questions