jquery - 如何转义 html 以防止 XSS？

Question

我正在使用 Laravel，当用户发送短信时，它可能包含一些恶意代码。 当我使用{{}}它会显示用户发送的确切文本。 如果他已经发送

<script>alert("malicious")</script>

它将显示完全相同并且很好，但是当我使用 jquery ajax 时，我将获取的数据放入一些 html 标签内的一些变量中，最后将它们全部附加到主标签中，如下所示：

   data = '';
    //loop starts here // some otger codes deleted for cleanness
    data += "<h2>"+response.name+"</h2>";
    data += "<p>"+response.description+"</p>";
    $('#mydata').html(data);

现在的问题是，如果我使用html() ，用户恶意代码将被执行，如果我不使用，结果将不会显示为 html。

我想我应该用$.parseHTML ，不是吗？

谢谢

Answer 1

您应该使用 jQuery text()对数据进行编码。

$('#mydata').text(data);

编辑：要创建 #mydata 的内容，您可以使用

$('#mydata')
  .html("")
  .append($("<h2></h2>").text(response.name))
  .append($("<p></p>").text(response.description))

Answer 2

您也可以这样做来删除标签...

$('#mydata').text(data).replace(/(<([^>]+)>)/ig,"");

阅读这篇文章Todo List Sanitizing Input jQuery 的更多信息

Answer 3

您无法将用户数据呈现为 HTML 并同时将其转义为安全的方式。 你可能会认为一些神级的正则表达式可以帮助你只删除属性而不是标签。 不幸的是，有很多方法可以将 JS 注入标记中，那么您永远无法确定。

所以你只有几个选择：

1. 完全忽视风险

2. 转义所有内容（使用 jQuery 的 text() 或使用 htmlspecialchars() 在后端转义

3. 使用通过简单规则以受控方式转换为 HTML 的非 HTML 标记

Answer 4

我用了：

npm js-htmlencode

而且有效。

Answer 5

我们在我工作的项目中有类似的场景。 我们过去常常从服务器端获取 html 内容，这些内容应该使用 Jquery 附加到 DOM 中。 在将其添加到 Add 之前，我们想验证从 Server 收到的 HTML 内容，以保护 XSS 安全问题。 以下是对 HTML 内容进行编码的通用方法，

function htmlEncode(source) {
  return $("<div>").text(source).html();
}