清理HTML代码

Question

I have a webpage that reads data from a database and then displays it, but I've just found an issue with data that could contain HTML in it.

In my database I have the following 3 entries:

Bob

Jill

<button onClick="alert('hi')">Click me!</button>

Now I have my HTML page that gets the data and displays it and has a click event on each entry, so an example would be:

<div onClick="DoSomething()">
   <a>Bob</a>
</div>

My code is removing escape characters so < becomes <

That works fine until I get to the last entry and I end up with:

<div onClick="DoSomething()">
   <a>&lt;button onClick="alert('hi')"&gt;Click me too!&lt;/button&gt;</a>
</div>

It displays as expected so I would see:

<button onClick="alert('hi')">Click me too!</button>

but it also is picking up that there should be a click event trying to show "hi".

Does anyone know how I can safely stop the onClick that is being defined by the name but still have my onClick event on the surrounding div.

I can't restrict the names that can be added to the database.

Answer 1

Figured what was happening. When I create the html elements that hold the item names I was creating a custom attribute on it called DispName and putting the name of the item in it, eg:

<div onclick="DoSomething()" DispName="&lt;button onClick="alert('hi')"&gt;Click me too!&lt;/button&gt;">
    <div>&lt;button onClick="alert('hi')"&gt;Click me too!&lt;/button&gt;</div>
<div>

So when my onclick event was called I would use .getAttribute("DispName") on the entity that was clicked and assumed that I would get the value <button onClick="alert('hi')">Click me too!</button> back but what I was getting back was the unsanitized text of <button onClick="alert('hi')">Click me too!</button> .

I think what is happening is as soon as I add my html elements to the DOM, the attribute DispName's value is unsanitized by the DOM. The sanitized script that is not in an attribute is left as I expected.

Not sure if anyone can confirm this, but now I know why I then get the rogue script running when I try and use the value in DispName.