javascript - HTML JavaScript 延迟下载 img src 直到 DOM 中的节点

Question

您好，我已从服务器发送给我的标记，我将其设置为 div 元素的 innerHTML，以便遍历树、查找图像节点并更改它们的 src 值。有什么方法可以防止原始 src 值被下载？

这是我在做的事情

function replaceImageSrcsInMarkup(markup) {
  var div = document.createElement('div');
  div.innerHTML = markup;
  var images = div.getElementsByTagName('img');
  images.forEach(replaceSrc);
  return div.innerHTML;
}

问题是在浏览器中，只要你这样做:var img = document.createElement('img'); img.src = 'someurl.com' 浏览器向 someurl.com 发出请求。有没有办法在不诉诸自己解析标记的情况下防止这种情况发生？如果别无他法，有人知道用尽可能少的代码解析标记以实现我的目标的好方法吗？

Answer 1

我知道您已经对自己的解决方案感到满意，但我认为值得为 future 的用户分享一种安全的方法。

您现在可以简单地使用 DOMParser object从您的 HTML 字符串生成外部文档，而不是使用由您当前的 document 创建的 div 作为容器。

DOMParser 特别避免了问题中提到的陷阱和其他威胁:没有 img src 下载，没有 JavaScript 执行，即使在元素属性中也是如此。

所以在你的情况下你可以安全地做:

function replaceImageSrcsInMarkup(markup) {
    var parser = new DOMParser(),
        doc = parser.parseFromString(markup, "text/html");

    // Manipulate `doc` as a regular document
    var images = doc.getElementsByTagName('img');

    for (var i = 0; i < images.length; i += 1) {
        replaceSrc(images[i]);
    }

    return doc.body.innerHTML;
}

演示:http://jsfiddle.net/94b7gyg9/1/

注意:使用您当前的代码，浏览器仍将尝试下载最初在您的 img 节点 src 属性中指定的资源，即使您在 JS 结束之前更改它执行。在此演示中跟踪网络事务:http://jsfiddle.net/94b7gyg9/