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

【问题标题】：jquery - how to escape html to prevent XSS?jquery - 如何转义 html 以防止 XSS？
【发布时间】：2017-11-10 09:41:12
【问题描述】：

我在使用 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 做点什么，不是吗？

谢谢

【问题讨论】：

标签： javascript jquery html ajax

【解决方案1】：

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

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

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

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

【讨论】：

正如我所说，如果我使用text()，它不会显示 html 标签的样式，而是显示简单的文本。我希望 h2 和 p 标签不显示为简单的 rext 而是其他标签。
感谢您的快速回复，您提到了一个好主意，但我的情况有些不同。我有很多数据要获取。您的方法无法完成的一个部分是：
data += '';
我认为它类似于 PDO 绑定参数。
您甚至可以使用 jQuery 函数而不是生成 html 来执行此操作。我强烈向你推荐这个，这样你的代码就健壮且安全！ $("<span></span>") .addClass("mdi mdi-information") .data({ "question": data_question, "answer": data_answer });

【解决方案2】：

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

所以你只有几个选择：

完全忽略风险
转义所有内容（使用 jQuery 的 text() 或在后端使用 htmlspecialchars() 转义
使用通过简单规则以受控方式转换为 HTML 的非 HTML 标记

【讨论】：

我的错，没有得到在这种特定情况下不需要保留用户数据的格式。所以答案是“一般”，而上面的答案肯定更适用于这种情况

【解决方案3】：

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

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

阅读更多关于这篇文章 Todo List Sanitizing Input jQuery

【讨论】：

【解决方案4】：

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

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

【讨论】：