Question

我有一个从数据库中读取数据然后显示数据的网页，但我发现其中可能包含HTML的数据存在问题。

在我的数据库中，我有以下3个条目：

鲍勃

吉尔

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

现在我的HTML页面获取数据并显示它并在每个条目上都有一个click事件，所以一个例子就是：

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

我的代码正在删除转义字符，所以＆lt;变为<

这一切正常，直到我到达最后一个条目，我最终得到：

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

按预期显示，我会看到：

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

但它也在意识到应该有一个点击事件试图显示＆＃34; hi＆＃34;。

有没有人知道如何安全地停止由名称定义的onClick，但仍然在周围的div上有我的onClick事件。

我无法限制可添加到数据库的名称。

Answer 1

想一想发生了什么。当我创建包含项目名称的html元素时，我在其上创建一个名为DispName的自定义属性并将项目的名称放在其中，例如：

<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>

所以当我的onclick事件被调用时，我会在被点击的实体上使用.getAttribute（“DispName”）并假设我得到值＆lt; button onClick =“alert（'hi'）” ＆gt;点击我了！＆lt; / button＆gt; 返回，但我得到的回复是<button onClick="alert('hi')">Click me too!</button>的未经过抽样处理的文字。

我认为发生的事情是，只要我将我的html元素添加到DOM，属性DispName的值就会被DOM取消。不在属性中的已清理脚本将保留为我所期望的。

不确定是否有人可以确认这一点，但现在我知道为什么当我尝试使用DispName中的值时，我会运行流氓脚本。

清理HTML代码

1 个答案: