Question

我一直在研究这个简单的搜索框来搜索表格中的名字，我已经成功了，现在我一直在研究如何使这个搜索框容易受到攻击（这是课程要求）即时通讯）

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

如果有人看一下我的代码并让这件事变得脆弱，我将不胜感激：）

这是我的代码：

＆＃13;

$(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
      });
    });
  });

});

＆＃13;

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

＆＃13;

Answer 1

如果我理解正确的话，你会问为什么，如果你在搜索框中输入脚本，那个脚本不是执行的，那是因为这行：

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

此行正在提取搜索框的字符串内容（这是JQuery的 val() 所做的内容，它的工作原理与标准DOM 相同textContent 属性）。所以，对于JavaScript来说，它不是可执行代码，它只是一个字符串，其中有任何标记字符被转义。

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

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

<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..." 
         value="<script>alert('Boom!');</script>">
  <span class="input-group-btn">
    <button id="search" class="btn btn-default" type="button">Search</button>
  </span>
</div>

您会受到攻击，因为用户的输入将被处理为HTML，如果您输入：<script>...</script>，则会执行脚本。 JQuery的 html() 方法，从他们的文档中说明：

按照设计，任何接受HTML的jQuery构造函数或方法 string - jQuery（）,. append（）,. after（）等 - 可能会执行码。这可以通过注入脚本标记或使用HTML来实现执行代码的属性（例如，<img onload="">）。不要使用这些方法插入从不受信任的来源获取的字符串例如URL查询参数，cookie或表单输入。这样做可以介绍跨站点脚本（XSS）漏洞。删除或逃脱在向文档添加内容之前的任何用户输入。

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

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

另外，如果你使用了可怕的eval()功能（这是你能做的最糟糕的事情 - 但是，嘿，你问过它），你也会受到攻击：

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

<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..." value="alert('Boom!');">
  <span class="input-group-btn">
    <button id="search" class="btn btn-default" type="button">Search</button>
  </span>
</div>

eval() 的文档声明：

不要不必要地使用eval！

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

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

以下是 a good resource ，了解XSS以及如何防范它。

Answer 2

我在代码中添加了此行$('.input-group').html(term);。现在它很脆弱。

$(document).ready(function() {
  var list = [];

  $("td a").each(function() {
    list.push($(this).text().toLowerCase().split(" "));
  });

  $('#search').on('click', function() {
    var term = $('#term').val().toLowerCase();
    $('.input-group').html(term);

    $.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
      });
    });

  });

  function arrayInArray(needle, haystack) {
    var i = 0,
      len = haystack.length,
      target = JSON.stringify(needle);
    for (; i < len; i++) {
      if (JSON.stringify(haystack[i]) == target) {
        return i;
      }
    }
    return -1;
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/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>

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

2 个答案:

不要不必要地使用eval！