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

Question

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

当我输入<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() 所做的，它的工作方式与标准DOM textContent 相同> 属性(property))。因此，对于 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 就会变得容易受到攻击。用户输入通常在该列表中排名第一，这就是为什么您永远不想将用户输入处理为字符串以外的任何内容，除非您首先“清理”它以查找恶意内容。

这里是 a good resource ，用于了解 XSS 以及如何防范它。