当您使用 javascript 更改 DOM 时，浏览器会获取新资源吗？答案

【问题标题】：Will the browser fetch new resources when you change the DOM with javascript?当您使用 javascript 更改 DOM 时，浏览器会获取新资源吗？
【发布时间】：2019-04-12 18:02:51
【问题描述】：

我在页面的 HTML 正文中有以下内容：

   <aside id="ADVERT">
      <img src='https://www.blackstone.com/images/default-source/assets/logos/blackstone-logo.png'>
   </aside>

在页面的后面，有一个按钮，单击该按钮时，会与另一个切换 img。这是按钮代码：

   <button onclick="switchadvert();">Switch Logo</button>

这个switchadvert Javascript函数本身很简单，就一行，使用innerHTML属性：

   function switchadvert()
   { document.getElementById("ADVERT").innerHTML = "<img src='http://www.redstone.com/gfx/logo.png'>";
   }

这一切似乎都有效。当我点击按钮时，标志从黑石集团的标志变成了红石的标志。

我的问题是这是如何工作的，为什么会这样？

如何： 显然，一旦我用这个新的 innerHTML 更新 DOM，浏览器就会意识到页面的这一部分需要它没有的资源（红石标志）并去获取它？页面加载后多久？

为什么： 我认为，即使我不厌其烦地对 XMLHttpRequest 对象进行 AJAX 调用，在页面加载后我也不能从另一个站点获取资源。但是在这里它没有任何电话就可以做到！这不是为跨站点脚本滥用打开了大门吗？

【问题讨论】：

您无法通过脚本访问此内容，因此不违反跨域。您始终可以显示跨域资源，它的访问受到限制。至于获取是如何工作的，它只是 HTMLImageElement 在设置其src 属性时所做的一部分，甚至不必附加到文档中。
谢谢@Kaiido。你能多说一下“你不能通过脚本访问这个内容”吗？我觉得我只是通过我的脚本访问它。所以我没有完全理解这意味着什么。此外，“它甚至不必附加在文档中”也不是我所理解的。
document.createElement('img').src = "foo.bar" 将尝试获取 foo.bar，即使已创建的 img 不在文档中。对于访问内容，它能够读取获取文件中的实际字节，或者在图像的情况下，访问其像素值。
啊。这就说得通了。如果这是一个答案，我会接受。感谢您的帮助和洞察力。
好吧，实际上我确实将其发布为答案，而您确实接受的那个混合了很多他们没有得到的概念...在您的问题中没有关于 XSS 的内容。

标签： javascript browser dynamic-content cross-site

【解决方案1】：

对于<img> 问题，浏览器如何知道它必须获取新资源，这只是what does the HTMLImageElement，当它的src 属性设置时。
什么时候发生都没有关系，甚至不必将元素附加到文档中；当你设置这个 src 时，它的 fetch 算法就会启动。

对于跨域问题，这与请求的时间无关。但是为了澄清另一个误解，这里的跨域限制是为了避免脚本能够访问跨域数据，但是您仍然可以很好地在页面中显示跨域数据。而这里，由于您没有设置<img> 的cross-origin 属性，因此您将无法访问此图像的内容。

【讨论】：

【解决方案2】：

TL;DR:

在当今的浏览器中，不应该通过加载图像来处理 XSS

在获取数据时，有一条称为CORS 的规则会起作用。

CORS 仅允许某些方法具有一些允许的标头，而无需在服务器端进行额外配置。

当涉及到图像时，浏览器将获取 (GET) url，它通过 CORS 允许，然后通过查看 Content-Type 标头或其他一些进程来确定其内容类型。

假设源不受 XSS 影响，并且如果它是有效图像，它将显示它，如果没有抛出错误，但浏览器永远不会在浏览器内执行任何 javascript，因此对 XSS 没有威胁。您可以通过将图像源设置为 javascript 文件来进行测试。

【讨论】：