javascript - Making my search box vulnerable to XSS - Stack Overflow

admin管理员组

文章数量:1421182

I been working on this simple search box to search a name in a table, that one I have a success of, now i been looking into a lot of stuff on how to make this search box vulnerable (which is a course requirement that im doing).

Where when I input <script>alert("boom!");</script> will alert on my page but in my current code it dont really do that which i dont know why as well is it because im using jquery?

I would appreciate if someone would take a look at my code and make this piece vulnerable :)

Here is my code:

$(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=".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>

I been working on this simple search box to search a name in a table, that one I have a success of, now i been looking into a lot of stuff on how to make this search box vulnerable (which is a course requirement that im doing).

Where when I input <script>alert("boom!");</script> will alert on my page but in my current code it dont really do that which i dont know why as well is it because im using jquery?

I would appreciate if someone would take a look at my code and make this piece vulnerable :)

Here is my code:

$(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./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>

• javascript
• jquery
• xss

Share Improve this question Follow edited Jan 7, 2017 at 14:23 rockStar asked Jan 6, 2017 at 15:07 rockStarrockStar 1,2961212 silver badges2222 bronze badges 1

• 5 Executing client-side code on your own puter isn't a very interesting vulnerability. I could open the developer tools of my browser and type alert(boom) in its JS console to the same effect. – Aaron Commented Jan 6, 2017 at 15:13

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 5

If I understand you correctly, you are asking why, if you enter script into the search box, that script isn't executed, it's because of this line:

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

This line is extracting the string contents of the search box (that's what JQuery's val() does and it works the same as the standard DOM textContent property). So, to JavaScript, it isn't executable code, it's just a string with any markup characters in it escaped.

If you were to use the contents of the search box in a way that allows the HTML content within it to execute, like this:

$(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./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>

You'd be vulnerable because the user's input would be processed as HTML and if you entered: <script>...</script> the script would be executed. JQuery's html() method, which, from their documentation states:

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() correlates to the DOM standard innerHTML property, however .innerHTML is safer, as the documentation states:

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

Also, if you used the much dreaded eval() function (which is about the worst thing you could do - but, hey, you asked for it), you'd be vulnerable as well:

$(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./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>

The documentation for eval() states:

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.

---

Essentially, XSS is something you bee vulnerable to whenever your pages uses input that is not under control of the code in the page. User input is generally #1 on that list and is why you NEVER want to process user input as anything other than a string unless you "scrub" it for malicious content first.

Here's a good resource for learning about XSS and how to protect against it.

I added this line $('.input-group').html(term); to your code. Now it is vulnerable.

$(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./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>

本文标签： javascriptMaking my search box vulnerable to XSSStack Overflow