阻止具有来源的框架访问 wordpress 中的跨域框架

Posted 2023-02-27

【中文标题】阻止具有来源的框架访问 wordpress 中的跨域框架

【英文标题】：Blocked a frame with origin from accessing a cross-origin frame in wordpress

【发布时间】：2019-04-27 11:06:33

【问题描述】：

我正在开发一个网站，假设网站名称是“https://website”（基于 wordpress），我在控制台上收到以下错误：

Uncaught DOMException: Blocked a frame with origin "https://website" from accessing a cross-origin frame.

    at contents (https://website/wp-admin/load-scripts.php?c=1&load%5B%5D=jquery-core,jquery-migrate,jquery-ui-core,jquery-ui-widget,jquery-ui-mouse,jquery-ui-sortable,utils,underscore,wp-util,backbone,&load%5B%5D=moxiejs,plupload&ver=4.9.8:2:26921)

    at Function.map (https://website/wp-admin/load-scripts.php?c=1&load%5B%5D=jquery-core,jquery-migrate,jquery-ui-core,jquery-ui-widget,jquery-ui-mouse,jquery-ui-sortable,utils,underscore,wp-util,backbone,&load%5B%5D=moxiejs,plupload&ver=4.9.8:2:3613)

    at a.fn.init.n.fn.(anonymous function) [as contents] (https://website/wp-admin/load-scripts.php?c=1&load%5B%5D=jquery-core,jquery-migrate,jquery-ui-core,jquery-ui-widget,jquery-ui-mouse,jquery-ui-sortable,utils,underscore,wp-util,backbone,&load%5B%5D=moxiejs,plupload&ver=4.9.8:2:27001)

    at b (https://website/wp-admin/load-scripts.php?c=1&load%5B%5D=postbox,thickbox,hoverIntent,common,admin-bar,wp-a11y,updates,plugin-install,svg-painter,heartbeat,wp-auth-check,shortcode,wp-ba&load%5B%5D=ckbone,media-models,wp-plupload,wp-mediaelement,wp-api-request,media-views,media-editor,media-audiovideo,mce-view,imgareaselect,&load%5B%5D=image-edit&ver=4.9.8:347:103)

    at htmlBodyElement.<anonymous> (https://website/wp-admin/load-scripts.php?c=1&load%5B%5D=postbox,thickbox,hoverIntent,common,admin-bar,wp-a11y,updates,plugin-install,svg-painter,heartbeat,wp-auth-check,shortcode,wp-ba&load%5B%5D=ckbone,media-models,wp-plupload,wp-mediaelement,wp-api-request,media-views,media-editor,media-audiovideo,mce-view,imgareaselect,&load%5B%5D=image-edit&ver=4.9.8:347:1306)

    at HTMLBodyElement.dispatch (https://website/wp-admin/load-scripts.php?c=1&load%5B%5D=jquery-core,jquery-migrate,jquery-ui-core,jquery-ui-widget,jquery-ui-mouse,jquery-ui-sortable,utils,underscore,wp-util,backbone,&load%5B%5D=moxiejs,plupload&ver=4.9.8:3:12444)

    at HTMLBodyElement.r.handle (https://website/wp-admin/load-scripts.php?c=1&load%5B%5D=jquery-core,jquery-migrate,jquery-ui-core,jquery-ui-widget,jquery-ui-mouse,jquery-ui-sortable,utils,underscore,wp-util,backbone,&load%5B%5D=moxiejs,plupload&ver=4.9.8:3:9173)

    at Object.trigger (https://website/wp-admin/load-scripts.php?c=1&load%5B%5D=jquery-core,jquery-migrate,jquery-ui-core,jquery-ui-widget,jquery-ui-mouse,jquery-ui-sortable,utils,underscore,wp-util,backbone,&load%5B%5D=moxiejs,plupload&ver=4.9.8:3:11573)

    at Object.a.event.trigger (https://website/wp-admin/load-scripts.php?c=1&load%5B%5D=jquery-core,jquery-migrate,jquery-ui-core,jquery-ui-widget,jquery-ui-mouse,jquery-ui-sortable,utils,underscore,wp-util,backbone,&load%5B%5D=moxiejs,plupload&ver=4.9.8:9:8275)

    at HTMLDivElement.<anonymous> (https://website/wp-admin/load-scripts.php?c=1&load%5B%5D=jquery-core,jquery-migrate,jquery-ui-core,jquery-ui-widget,jquery-ui-mouse,jquery-ui-sortable,utils,underscore,wp-util,backbone,&load%5B%5D=moxiejs,plupload&ver=4.9.8:3:18991)

以上错误是点击wordpress插件的View Details部分产生的（如下图）：

每个 wordpress 插件 中似乎都存在此错误，但当我在新选项卡中打开时它会起作用，但当我在同一窗口中打开时它不起作用。

问题陈述：

我想知道我需要在 wordpress 中修改哪个文件才能解决此错误。这个错误似乎存在于每个 wordpress 插件中。 如前所述，它可以在新标签页中使用，但无法在同一页面中使用。

我觉得我必须通过看到上面的错误对以下文件进行一些更改（load-scripts.php，因为该文件中生成了错误）但不确定是哪一行我需要添加以使其正常工作。

https://website/wp-admin/load-scripts.php

【问题讨论】：

听起来整个 Wordpress 网站都是在 iframe 中加载的。请查看页面源代码并检查是否存在。该链接用于尝试在 iframe 中加载，这可以解释为什么当您在新窗口中打开时它会起作用。

@Sarcoma 我需要在哪里查找页面源代码？或者我需要检查哪个文件的页面源代码？

只需在浏览器中查看源代码并查看 iframe 在哪里。它应该在其src 属性中告诉您它在请求什么，这可能会告诉您为什么它在您的域之外请求资源。看起来@Blackbam 知道 iframe 存在的原因。如果您可以在 iframe src 中看到一个域，它可能会为您提供有关问题所在的线索。

@Sarcoma 我正在向您发送我正在处理的导致此错误的网站的link。当我在这里全局搜索 iframe 时，我可以从 line#106 to line#108 看到 iframe is commented，并且 iframe 也用于 css。如果我做错了什么，请告诉我。

@Sarcoma 和 Iframe 也用于 css line#341

【参考方案1】：

您的 WordPress 管理界面出现了问题。

首先要注意的是，您描述的错误是您可能已经注意到的众所周知的问题：SecurityError: Blocked a frame with origin from accessing a cross-origin frame

看那里的第一个答案：

您无法使用 javascript 访问具有不同来源的 如果你能做到，那将是一个巨大的安全漏洞。为了 同源策略浏览器阻止脚本尝试访问框架 来源不同。

协议、主机名和端口必须与您的域相同，如果您 想要访问一个框架。

要注意的第二件事是 WordPress 管理界面中的 “查看详细信息” 按钮的作用：它打开一个包含 iframe 的厚框，该 iframe 经常在 IFrame 中显示远程内容。此处详细描述了其工作原理：https://codex.wordpress.org/Javascript_Reference/ThickBox

load-scripts.php 是一个重要的 WordPress 后台加载核心文件，用于加载 JavaScript 文件而无需嵌入每个文件。这些 JavaScript 文件通常使用 admin_enqueue_scripts() 函数 (https://codex.wordpress.org/Plugin_API/Action_Reference/admin_enqueue_scripts) 添加到您的 WordPress 管理员。

由于您的问题很少见，并且插件的“查看详细信息”按钮几乎每次都有效，因此只有两种可能性：

1. “查看详细信息”IFrame 通常从您的 WordPress 所在的同一位置加载 - 因此您可能会遇到浏览器想要从不同主机加载它的问题

如果您在 WordPress 安装中存在一些错误配置，并且Thickbox 尝试从浏览器认为是另一台主机的主机获取 IFrame，则会发生这种情况。正确配置 WordPress。

2。您有一个编程错误的插件或主题，它正在注入导致此问题的脚本

解决方案：一一停用您的主题和所有插件，看看错误是否仍然存在。这样您就可以找出导致问题的修改，然后向插件开发人员提出错误请求。

几乎 100% 确定是单个插件、主题或错误配置导致了此问题。

【讨论】：

我会尽快评论你的回答。

找到了吗？

今天我会通知你的。

抱歉耽搁了。我停用了插件one-by-one，然后我单击了view details 按钮以获取停用的插件和未停用的插件（对于它们两者）。我发现错误仍然存​​在。现在，要检查主题。

只需停用并使用默认主题检查