为什么 javascript 不能改变 iframe 的 dom,但浏览器工具可以?

Why can javascript not alter the dom of an iframe, but the browser tools can?

在来自 donain A 的网页中,我在 iframe 中显示了来自 domain B 的另一个网站。我觉得网站B可以选择一些清新的颜色,所以我想编辑body的背景色,改成蓝色。

如果我尝试使用 javascript 获取 iframe 的 DOM,然后编辑正文的背景颜色,我会收到安全错误,因为网站 B 在另一个 dom 恩。

如果打开开发者工具 (F12) 并且我只是在那里编辑 dom 它就可以正常工作。

所以我真的很困惑:为什么浏览器允许我手动编辑 dom,而不是 javascript?显然,这个交叉 domain 策略应该暗示的任何类型的安全措施都会受到任何可以按 F12 的人的影响,因此浏览器阻止访问是没有意义的。

或者,我可以用我的服务器抓取网站 B,然后将(非法)检索到的 HTML 放入我自己的网站(颜色更好)。我再次绕过了 cross domain 策略,因此做了 cross domain 策略禁止我做的事情。

作为一个相关问题,是否可以在 iframe 中更改带有 javascript 的元素的颜色而不会出现交叉 domain 错误?

Same Origin Policy 防止恶意 Javascript 与其他域交互。
否则,攻击者可能会编写与您的电子邮件或银行帐户进行静默交互的代码。

开发工具假定您不会作恶并攻击自己。 (这个假设是not always true

why would a browser allow me to edit the dom by hand

如果是您的浏览器。它信任你。

but not by javascript?

您的浏览器不信任在域 A 上编写 JavaScript 的人有权访问在域 B 上编写页面的人提供给您的数据。

如果域 A 是 您在电子邮件中找到链接的随机站点,而域 B 是您的网上银行怎么办?

重要的是要记住可能涉及三个人:

  • 控制浏览器的人
  • 控制域 A 的人
  • 控制域 B 的人

其中一些可能是同一个人,但也可能不是,浏览器无法分辨。

Alternatively, I could just scrape website B with my server

在这种情况下,域 B 首先将数据委托给域 A。

域 A 无法访问您的浏览器可以访问的内容(例如域 B 的 cookie),这可能会导致域 B 为您提供不同的数据(例如您自己的银行记录)。

As a related question, is there anyway to change the color of an element with javascript inside an iframe without getting a cross domain error?

需要B域的配合,此时可以使用postMessage要求B域更改颜色。 (域 B 必须注册事件侦听器才能听到请求)。