javascript - 使用浏览器解释 html 使用 javascript 清理 html 字符串

Question

在将 html 字符串放入 dom 之前，我想使用标签、属性和值的白名单来清理它。我可以安全地构造一个 dom 元素，并遍历它来实现白名单过滤器，假设在我将 dom 元素附加到文档之前没有恶意的 javascript 可以执行吗？这种方法有缺陷吗？

Answer 1

根据@rvighne 的回答，在您插入文档之前似乎不会执行任何操作，但至少有这些(不寻常的)异常(在 FF 27.0 中测试):

var userInput = '<a href="http://example.com" onclick="alert(\'boo!\')">Link<\/a>';
var el = document.createElement('div');
el.innerHTML = userInput;
el.addEventListener("click", function(e) {
    if (e.target.nodeName.toLowerCase() === 'a') {
        alert("I will also cause side effects; I shouldn't run on the wrong link!");
    }
});
el.getElementsByTagName('a')[0].click(); // Alerts "boo!" and "I will also cause side effects; I shouldn't run on the wrong link!"

……或者……

var userInput = '<a href="http://example.com" onclick="alert(\'boo!\')">Link<\/a>';
var el = document.createElement('div');
el.innerHTML = userInput;
el.addEventListener("cat", function(e) { this.getElementsByTagName('a')[0].click(); });
var event = new CustomEvent("cat", {"detail":{}});
el.dispatchEvent(event); // Alerts "boo!"

...或者...(虽然 setUserData 已被弃用，但它仍然有效):

var userInput = '<a href="http://example.com" onclick="alert(\'boo!\')">Link<\/a>';
var span = document.createElement('span');
span.innerHTML = userInput;
span.setUserData('key', 10, {handle: function (n1, n2, n3, src) {
    src.getElementsByTagName('a')[0].click();
}});
var div = document.createElement('div');
div.appendChild(span);
span.cloneNode(); // Alerts "Boo!"    
var imprt = document.importNode(span, true); // Alerts "Boo!"
var adopt = document.adoptNode(span, true); // Alerts "Boo!"

...或在迭代期间...

var userInput = '<a href="http://example.com" onclick="alert(\'Boo!\');">Link</a>';
var span = document.createElement('span');
span.innerHTML = userInput;
var treeWalker = document.createTreeWalker(
  span,
  NodeFilter.SHOW_ELEMENT,
  { acceptNode: function(node) { node.click(); } },
  false
);
var nodeList = [];
while(treeWalker.nextNode()) nodeList.push(treeWalker.currentNode); // Alerts 'Boo!'

但是，如果没有这些(不寻常的)事件交互，就我所能够检测到的而言，单独构建到 DOM 中的事实不会导致任何副作用(当然，上面的示例是人为的，一个如果有的话，我不会期望经常遇到他们!)。