Home/ Questions/Q 7583513
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-30T18:41:48+00:00

The following is a simplified example of a page a user has created at

  • 0

The following is a simplified example of a page a user has created at a site (they created it by filling out a form and then they get a URL for the page; the below is the HTML for the page they created).

In the example, I’m taking the value of a hidden input field and then putting it into the DOM as is. That results in an alert, simulating an XSS attack.

What’s the best way to prevent things like this? The value of #sourceinput was previously input by the same or a different user who’s viewing the page below, and the user’s input wasn’t filtered to remove tags. (The actual case involves the jquery.tooltip.js plugin and it’s bodyHandler callback; on mouseover a bodyHandler callback would get the hidden input and display it to the user.)

One way to deal with this would be to strip tags on input; I control what goes in the hidden textfield so that would seem to solve it.

Another way would be to strip tags in Javascript, but some of these don’t seem to be 100% effective:

Strip HTML from Text JavaScript

Is there some sort of best practice that I’m missing, or are those two the best ways?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<head>
<title></title>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script>google.load("jquery", "1.7.1");</script>
<script>
$(document).ready(function() {
  var badHTML = $('#sourceinput').val();
  $('#destinationdiv').html( badHTML );
  //$('#destinationdiv').text( badHTML );
});
</script>
</head>

<body>
<input type="hidden" id="sourceinput" value="&lt;script&gt;alert&#40;&#039;hi&#039;&#41;;&lt;/script&gt;" />
<div id="destinationdiv" style="width:10px;height:10px;background-color:red;"></div>
</body>
</html>

UPDATE: The solution I’m going with for now has three parts:

  1. When the page the user has created is saved, I run PHP’s strip_tags() on their input. These are just short text strings like titles and blurbs, so few users will expect they can enter HTML. That might not be appropriate for other situations.

  2. When the page the user created is displayed, instead of putting what the user had entered in an input value attribute, I put their input inside a div.

  3. I take the value out of that div using .text() (not .html() ). I then run that through the underscore function (see below).

Testing this out – including simulating skipping the first step – seems to work. At least I’m hoping there isn’t something I missed.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Here’s the escape function used by Underscore.js, if you don’t want to use the entire Underscore library of functions:

    var escape = function(string) {
    return (''+string).replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;').replace(/'/g, '&#x27;').replace(/\//g,'&#x2F;');
};

    Used like

    var safe_html = escape("<b>Potentially unsafe text</b>"); // "&lt;b&gt;hello&lt;&#x2F;b&gt;"
$("#destination").html(safe_html);

    It’s written well and is known to work, so I’d advise against rolling your own.

    • 0