未捕获的安全错误：无法从“HTMLIFrameElement”读取“contentDocument”属性

Posted 2023-05-09

【中文标题】未捕获的安全错误：无法从“HTMLIFrameElement”读取“contentDocument”属性

【英文标题】：Uncaught SecurityError: Failed to read the 'contentDocument' property from 'HTMLIFrameElement'

【发布时间】：2014-12-07 09:35:55

【问题描述】：

我正在尝试为特定需求制作自己的“网站检查器”，但在访问 iFrame 时遇到问题。

未捕获的安全错误：无法读取“contentDocument”属性 来自“htmlIFrameElement”：阻止了一个带有来源“http://”的框架 checker.xcore.co.il”从访问来源为“http://”的框架 xcore.co.il”。请求访问的框架将“document.domain”设置为 “checker.xcore.co.il”，但被访问的框架没有。两者都必须 将“document.domain”设置为相同的值以允许访问。

我必须使用 iFrame 执行此操作，因为我需要访问 CSS 类。 Click on this link，加载网站然后点击右边的“fontSizeErrors” 然后就可以在控制台日志中看到错误了。

请问我该如何通过？我在 Google 上找不到任何有用的东西..

谢谢！

【问题讨论】：

称为html同源策略。 en.wikipedia.org/wiki/Same_origin_policy。出于安全原因，即使a.example.com 也无法访问来自b.example.com 的数据。

你不能绕过它，除非你可以访问两个域并且可以设置document.domain在两个域中都匹配

通过 tampermonkey 或 greasmonkey 在实际页面上运行您的脚本，而不是使用 iframe 在您自己的页面上运行。

人们如何制作诸如wave.webaim.org之类的网站检查器？必须有一种方法可以提取每个类的 CSS

【参考方案1】：

这是所有浏览器都使用的正常安全措施。您不能访问具有不同来源的元素或框架，这将是一个巨大的安全漏洞。因此，浏览器会阻止所有尝试执行此类操作的脚本。要在框架内执行任何操作，其内容必须具有相同的来源。

更多信息take look at this answer我的。

【讨论】：

人们如何制作诸如wave.webaim.org之类的网站检查器？必须有一种方法可以提取每个类的 CSS

@user3298188 我猜他们只是做一些 XMLHttpRequests 并检查内容，但我不知道其背后的逻辑，抱歉

一旦你有了能够将 URL 页面解析为字符串的语言，你就可以做任何你想做的魔法;)

@Dalibor 不，你不应该。如果这是可能的，那么任何人 都可以在不同站点的框架内修改和注入脚本，为所欲为。这将是一个巨大的安全漏洞。举一个愚蠢的例子，想想一个恶意网站加载一个隐藏的 iframe，其中包含你银行的网页：你已经登录了，因为你经常使用它，恶意网站将能够访问你的所有数据。这会非常非常危险。

你是对的。在我发布回复的那一刻，我想到了那些网络钓鱼的例子。有道理，谢谢。然而，这个问题让我在 cordova/ionic 应用程序中实现远程 iframe 的工作变得复杂......