让我的搜索框容易受到 XSS 攻击

Question

我一直在研究这个简单的搜索框来搜索表中的名称，我已经成功了，现在我一直在研究很多关于如何使这个搜索框容易受到攻击的内容（这是我正在做的一门课程要求） ）。

当我输入时，<script>alert("boom!");</script>我的页面上会发出警报，但在我当前的代码中，它并没有真正做到这一点，我也不知道为什么，因为我使用jquery？

如果有人能看一下我的代码并使这段代码容易受到攻击，我将不胜感激:)

这是我的代码：

$(document).ready(function(){

  $('#search').on('click', function(){
    var term = $('#term').val().toLowerCase();

    $.each(list,function(index,value){
      var count = arrayInArray(term,list[index]);
      console.log(count);
      $("tr:eq(" + (count + 1) + ") td").each(function(){
        var tb = [];
        tb.push($(this).text());
        console.log(tb); // data to be printed somewhere
      });
    });
  });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="input-group">
  <input id="term" type="text" class="form-control" placeholder="Search Participant...">
  <span class="input-group-btn">
    <button id="search" class="btn btn-default" type="button">Search</button>
  </span>
</div>

Answer 1

如果我理解正确，您是在问为什么，如果您在搜索框中输入脚本，该脚本不会被执行，这是因为这一行：

\n\n

var term = $(\'#term\').val().toLowerCase();\n

\n\n

这一行提取搜索框的字符串内容（这就是 JQuery 的作用val()，它的工作方式与标准 DOM 属性相同textContent）。因此，对于 JavaScript 来说，它不是可执行代码，它只是一个带有转义标记字符的字符串。

\n\n

如果您要以允许执行其中的 HTML 内容的方式使用搜索框的内容，如下所示：

\n\n

\r\n

\r\n

var term = $(\'#term\').val().toLowerCase();\n

\r\n

$(document).ready(function(){\r\n\r\n  $(\'#search\').on(\'click\', function(){\r\n    var term = $(\'#term\').val().toLowerCase(); \r\n    \r\n    // Note that the console will show the actual script element!\r\n    console.log(term);\r\n    \r\n    // But here, you are taking that string and asking\r\n    // for it to be parsed as HTML, so the escaped characters\r\n    // are are parsed as HTML.\r\n    $(".input-group-btn").html(term); // <-  XSS vulnerabe!\r\n\r\n  });\r\n});

\r\n

\r\n

\r\n

\n\n

您很容易受到攻击，因为用户的输入将被处理为 HTML，并且如果您输入：<script>...</script>脚本将被执行。JQuery 的html()方法，从他们的文档中可以看出：

\n\n

\n

根据设计，任何接受 HTML\n 字符串 \xe2\x80\x94 jQuery()、.append()、.after() 等 \xe2\x80\x94 的 jQuery 构造函数或方法都可能执行\n 代码。这可以通过注入脚本标记或使用执行代码的 HTML\n 属性（例如<img onload="">）来实现。请勿使用这些方法插入从不受信任的来源获取的字符串，例如 URL 查询参数、cookie 或表单输入。这样做可能会引入跨站点脚本 (XSS) 漏洞。在向文档添加内容之前删除或转义任何用户输入。

\n

\n\n

.html()与 DOM 标准innerHTML属性相关，但.innerHTML更安全，如文档所述：

\n\n

\n

HTML5 指定<script>不应执行通过innerHTML 插入的标记。

\n

\n\n

另外，如果你使用了非常可怕的eval()函数（这可能是你能做的最糟糕的事情 - 但是，嘿，你要求它），你也很容易受到攻击：

\n\n

\r\n

\r\n

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>\r\n<div class="input-group">\r\n  <input id="term" type="text" class="form-control" placeholder="Search Participant..." \r\n         value="<script>alert(\'Boom!\');</script>">\r\n  <span class="input-group-btn">\r\n    <button id="search" class="btn btn-default" type="button">Search</button>\r\n  </span>\r\n</div>

\r\n

$(document).ready(function(){\r\n\r\n  $(\'#search\').on(\'click\', function(){\r\n    var term = $(\'#term\').val().toLowerCase();\r\n  \r\n    // eval() takes a string and evaluates it as JavaScript\r\n    // No <script> tag needed!\r\n    eval(term); // <-- XSS vulnerability here!\r\n  });\r\n});

\r\n

\r\n

\r\n

\n\n

状态的文档eval()：

\n\n

\n

不要不必要地使用 eval！

\n\n

eval() 是一个危险的函数，它以调用者的权限执行它传递的代码。如果您使用可能受到恶意方影响的字符串运行 eval()，则您最终可能会使用您的网页/扩展程序的权限在用户的计算机上运行恶意代码。更重要的是，第三方代码可以看到调用 eval() 的范围，这可能会导致类似函数不易受到攻击的攻击。

\n

\n\n\n\n

从本质上讲，只要页面使用不受页面代码控制的输入，XSS 就会变得容易受到攻击。用户输入通常在该列表中排名第一，这就是为什么您永远不想将用户输入处理为字符串以外的任何内容，除非您首先“清理”它以查找恶意内容。

\n\n

这是了解 XSS 以及如何防范 XSS 的良好资源。

\n