Question

当我尝试调试它时，循环结束后，尽管能够正确填充所有内容，但它总是以整个页面被文本“ 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>

Answer 1

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

问题的核心是，当您为.innerHTML赋值时，该值中的都将作为HTML放置，因此，如果您的数据中包含{{1 }}标签，然后将这些标签原样附加到DOM并进行评估，然后执行。这使攻击者可以在您的页面上执行任何操作，包括使用“ XSS”覆盖整个页面。

<script>

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;
}

您可以改为简单地分配给.textContent-如果这样做，则浏览器在将它们放入DOM时会自动清除这些值，并确保不会将它们评估为HTML或JavaScript。

<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>

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;
}

成功循环后，整个页面将替换为文本“ XSS”

1 个答案: