jQuery 前置安全性答案

【问题标题】：jQuery Prepend SecurityjQuery 前置安全性
【发布时间】：2012-07-30 15:18:04
【问题描述】：

这是一个菜鸟问题，如果我有一个不会在任何地方提交的文本区域...

 <form onsubmit="return false;">
      <textarea name="new_title_text" id="new_title_text"></textarea>
 </form>

我使用 jQuery 将 textarea 的值添加到 div...

var textValue = $('#new_title_text').val()
$('#myDiv').prepend('<div>' + textValue + '</div>');

这是否存在任何安全漏洞？有人能以某种方式注入 JavaScript 并执行 XSS、CSRF 或任何其他类型的攻击吗？我了解，一旦我将值提交到我的服务器，就需要对其进行检查，但是在提交之前有什么可能发生的吗？

提前致谢！

【问题讨论】：

标签： javascript jquery security xss csrf

【解决方案1】：

基本上，您不能信任任何在客户端完成的验证，因为人们可以（很容易）绕过 JavaScript 验证。

在您的服务器上进行适当的验证和清理，并将客户端验证仅用于用户体验，并且不要用明显无效的数据“打扰”您的服务器 - 例如需要值的空字段。

除非您让您的用户提交一些 PHP 代码或 JavaSctipt 代码以在您网站的其他地方执行，否则您应该是安全的。永远记住不要信任来自用户的任何数据。将所有传入数据视为潜在威胁，并在您打算以后使用时对您处理的任何内容进行清理。

【讨论】：

【解决方案2】：

有人能以某种方式注入 JavaScript 并执行 XSS、CSRF 或任何其他类型的攻击

是的。您正在将文本注入到没有 HTML 转义的 HTML 字符串中，因此该字符串中的任何元字符（< 或 &）都会失败并且可能容易受到注入攻击（例如 <script>...）。

问题是那个人是谁？从您当前的代码来看，外部方似乎不可能预先填充文本区域，因此它必须是用户攻击自己（不是真正的漏洞）。

因此，您要么需要对进入 HTML 的字符串进行 HTML 转义，要么更好地使用 DOM 样式的访问方法，如 .text() 和 .attr() 来设置文本内容和属性，而不使用粗略的字符串标记生成。或创作速记：

$('#myDiv').prepend(
    $('<div>', {text: $('#new_title_text').val()})
);

【讨论】：

【解决方案3】：

基本思想是，是的，使用 prepend 与不受信任的数据是不安全的。但是，可利用性确实取决于场景。如果攻击者可以制作一个导致该脚本以不受信任的值运行的 url，那么您肯定遇到了 XSS 问题。但是，如果用户只能通过输入不安全的数据并单击按钮自己触发此操作，则更安全，但并不完全。这通常被称为 self-xss，有时与点击劫持等一起被利用。

有关不安全的 jquery 函数的更多信息，请参阅：http://erlend.oftedal.no/blog/?blogid=127

【讨论】：