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

Question

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

当我输入 <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

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

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

这一行是提取搜索框的字符串内容（也就是JQuery的val() does and it works the same as the standard 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() 方法，从他们的文档中可以看出：

By design, any jQuery constructor or method that accepts an HTML string — jQuery(), .append(), .after(), etc. — can potentially execute code. This can occur by injection of script tags or use of HTML attributes that execute code (for example, <img onload="">). Do not use these methods to insert strings obtained from untrusted sources such as URL query parameters, cookies, or form inputs. Doing so can introduce cross-site-scripting (XSS) vulnerabilities. Remove or escape any user input before adding content to the document.

.html() 与 DOM 标准相关 innerHTML 属性，但是 .innerHTML 更安全，因为文件指出：

HTML5 specifies that a <script> tag inserted via innerHTML should not execute.

此外，如果您使用了非常可怕的 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() 的文档指出：

Don't use eval needlessly!

eval() is a dangerous function, which executes the code it's passed with the privileges of the caller. If you run eval() with a string that could be affected by a malicious party, you may end up running malicious code on the user's machine with the permissions of your webpage / extension. More importantly, third party code can see the scope in which eval() was invoked, which can lead to possible attacks in ways to which the similar Function is not susceptible.

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

这里 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 攻击

Making my search box vulnerable to XSS

javascript

xss

jquery

Don't use eval needlessly!