成功循环后，整个页面被文本“XSS”替换答案

【问题标题】：Whole page gets replaced with a text "XSS" after a successful loop成功循环后，整个页面被文本“XSS”替换
【发布时间】：2019-03-27 05:59:19
【问题描述】：

当我尝试调试它时，在循环结束后，它总是以整个页面被替换为文本“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>

【问题讨论】：

xss 通常表示跨站脚本攻击。如果发生此类攻击，请检查您提供的数据（查看是否存在
我猜你有一个XSS vulnerability 并且该表中的一些数据被污染了。将tabCell.innnerHTML 替换为tabCell.textContent 就可以了。
有趣...有效！谢谢弗拉兹！

标签： javascript json

【解决方案1】：

您的代码中有一个Cross-site scripting (shortened to XSS) 漏洞，而您放入表中的数据很可能会利用该漏洞。

问题的核心是，当您将值分配给 .innerHTML anything 时，该值会以 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>

【讨论】：