当您将 DOM 更改为 javascript 时，浏览器会获取新资源吗？

Question

我在 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 函数本身很简单，只有一行，使用内部 HTML 属性:

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

这一切似乎都有效。当我点击该按钮时，徽标从 Blackstone Group 的徽标变为 Redstone 的徽标。

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

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

原因： 我认为，即使我不厌其烦地对 XMLHttpRequest 对象执行 AJAX 调用，也不允许我在页面加载后从另一个站点获取资源。但在这里它是在没有任何调用的情况下完成的！这不是为跨站点脚本滥用打开了大门吗？

Answer 1

TL;DR:

In today's browsers there should be no treat to XSS by loading an image

在获取数据时，有一个名为 CORS 的规则发挥作用。

CORS 只允许某些方法和一些允许的 headers 而无需在服务器端进行额外配置。

对于图像，浏览器将获取 (GET) url，这是 CORS 允许的，然后通过查看 Content-Type [=21] 来确定其内容类型=] 或其他一些进程。

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

Answer 2

对于 <img> 问题，以及浏览器如何知道它必须获取新资源，这很简单 what does the HTMLImageElement 当其 src 属性设置时。
发生这种情况并不重要，甚至不必将元素附加到文档中；当您设置此 src 时，它的提取算法将启动。

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

Will the browser fetch new resources when you change the DOM with javascript?