Вся страница заменяется текстом "XSS" после успешного выполнения цикла

#javascript #json

Вопрос:

Когда я пытался отладить это, после завершения цикла это всегда заканчивается заменой всей страницы текстом «XSS», несмотря на возможность правильного заполнения всего. Прилагается изображение до и после завершения цикла.

 //Populate
var table = document.getElementsByClassName("table")[0];

var col = [];
for (var i = 0; i < TABLE_DATA.length; i  ) {
  for (var key in TABLE_DATA[i]) {
    if (col.indexOf(key) === -1) {
      col.push(key);
    }
  }
}

for (var i = 0; i < TABLE_DATA.length; i  ) {
  var row = table.insertRow(1);
  for (var j = 0; j < 4; j  ) {
    var tabCell = row.insertCell(j);
    tabCell.innerHTML = TABLE_DATA[i][col[j]];
  }
}

 <!doctype>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, maximum-scale=1">
<title>Javascript Exercise</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
</head>
<body>
<div class="container">
  <h2>JavaScript Exercise</h2>
  <form class="form-horizontal" role="form">
    <div class="form-group">
      <button id="start" type="button" class="btn btn-default">start random</button>
      <button id="stop" type="button" class="btn btn-default">stop random</button>
      <button id="sort" type="button" class="btn btn-default">sort</button>
    </div>
  </form>

  <div class="contents">
    <table class="table">
      <thead>
        <tr>
          <th>Id</th>
          <th>Image</th>
          <th>Name</th>
          <th>Price</th>
        </tr>
      </thead>
      <tbody>
      </tbody>
    </table>
  </div>
</div>
<script src="json/data.js"></script>
<script src="js/app.js"></script>
</body>
</html>

1. xss обычно означает атаку с использованием межсайтового скриптинга. проверьте предоставленные вами данные, была ли произведена такая атака (посмотрите, присутствуют ли теги <script>). Это назначение, вероятно, является назначением безопасности

2. Я предполагаю, что у вас есть уязвимость XSS , и некоторые данные в этой таблице повреждены. Замените tabCell.innnerHTML на tabCell.textContent , и все должно быть в порядке.

3. Интересно… это работает! Спасибо, Влаз!

Ответ №1:

У вас есть уязвимость межсайтового скриптинга (сокращенно XSS) в вашем коде, и данные, которые вы помещаете в таблицу, вероятно, используют это в своих интересах.

Суть проблемы заключается в том, что когда вы присваиваете значение .innerHTML чему-либо в значении, оно помещается как HTML, поэтому, если у вас есть данные, содержащие, скажем, <script> теги, то они будут прикреплены к DOM как есть и оценены, а затем выполнены. Что позволяет злоумышленнику делать на вашей странице все, что они хотят, включая перезапись всей страницы с помощью «XSS».

 document.getElementById("replacer").addEventListener("click", function() {
  var replaceText = "<img src='nothing' " 
    "onerror='document.getElementById("do-not-touch").innerHTML = "oops"'/>";
  
  document.getElementById("sample").innerHTML = replaceText;
})

 #do-not-touch {
  border: 1px solid red;
}

#sample {
  border: 1px solid blue;
}

 <div id="do-not-touch">Replace the text below</div>
<div id="sample">Replace this text</div>
<button id="replacer">Click to replace text</button>

Вместо этого вы можете просто присвоить значение .textContent — если вы это сделаете, то браузер автоматически очистит значения при вводе их в DOM и убедится, что они не будут оцениваться как HTML или JavaScript.

 document.getElementById("replacer").addEventListener("click", function() {
  var replaceText = "<img src='nothing' " 
    "onerror='document.getElementById("do-not-touch").innerHTML = "oops"'/>";
    
  document.getElementById("sample").textContent = replaceText;
})

 #do-not-touch {
  border: 1px solid red;
}

#sample {
  border: 1px solid blue;
}

 <div id="do-not-touch">Replace the text below</div>
<div id="sample">Replace this text</div>
<button id="replacer">Click to replace text</button>