在禁用 CORS 安全性的情况下修改 chrome 中的 iframe答案

【问题标题】：Modifying iframe in chrome with disabled CORS security在禁用 CORS 安全性的情况下修改 chrome 中的 iframe
【发布时间】：2020-07-19 22:00:00
【问题描述】：

我已经安装了 74 个 Chrome（因为在最新的 chrome 中禁用安全性不起作用）并使用禁用 cors 安全标志运行它：

open -a "Google Chrome 74" --args --disable-web-security --user-data-dir="/Users/Victor/GoogleTmp"

Chrome 已通知我安全功能已禁用。我已经成功运行了跨域ajax请求。

现在，我有一个 iframe，我需要修改它的样式。我用谷歌搜索我可以插入一个链接标签来做到这一点。但即使禁用了安全性，我也收到以下错误：

SecurityError: Blocked a frame with origin "http://localhost:5555" from accessing a cross-origin frame.

我还尝试了其他不同的方法，比如 nginx 代理传递等，但都没有奏效。但我想知道为什么禁用网络安全没有帮助？

这是插入css的示例代码（我使用vuejs）

 let cssLink = document.createElement("link")
 cssLink.href = "style.css"
 cssLink.rel = "stylesheet"
 cssLink.type = "text/css"

 const iframe = this.$refs.vizContainer.firstChild

 this.$refs.vizContainer.firstChild.contentWindow.document.head.appendChild(cssLink)

【问题讨论】：

你在使用任何后端框架吗？
您可以访问其他 iframe 源并添加额外的 javascript 代码吗？

标签： javascript google-chrome vue.js security cors

【解决方案1】：

尝试将crossorigin 属性添加到您的 iframe 并将其设置为匿名

<iframe src="../" crossorigin="anonymous" />

来源：https://gerardnico.com/web/html/crossorigin

【讨论】：

刚试过，没有成功。但我不得不提到我动态添加了这个属性，因为我不插入 iframe，所以一个库会这样做。但在 HTML 中，我可以看到属性已设置，并且浏览器中的 URL 与 iframe 中的 url 相同。我的意思是，起源是一样的:(
我曾经遇到过这个问题，它也让我发疯了，直到我的一个团队在 Visual Studio 的 web.config 中编写了自定义配置并且它起作用了，这就是为什么我问你使用什么框架？如果 asp.net 我可能有答案
我使用 vuejs。在后端它只是一个单独的服务，无法访问他们的代码..