javascript - 如何设置iframe中元素的值？

Question

我需要设置 iframe 文档中多个元素的 value 属性。我可以通过 Chrome 工具控制台轻松完成此操作。但相同的命令无法通过 Keyboard Maestro 或 AppleScript 注入(inject)到页面的 JavaScript 来运行。

iframe 由 Chrome 扩展程序生成:Evernote Web Clipper。 在下面的示例中，我已经调用了 Evernote Web Clipper。

在我选择 iframe 文档后，此脚本/命令可在 Chrome 控制台中运行:

var remElem = document.getElementById("comments");
remElem.value = "KM This is a test";
var titleElem = document.getElementById("title")
titleElem.value = 'KMTEST title'

我怀疑在运行上述脚本之前我首先需要获取或选择 iframe 文档。我该怎么做？

我尝试了许多不同的 SO 解决方案，但没有一个有效。

以下是 Chrome 工具中主文档的屏幕截图:

Chrome 工具中 iframe 文档的屏幕截图:

这是我尝试过但不成功的方法:

// *** NONE of These Work ***

//--- Method 1 ---
var frame = window.frames[‘frame1’];
var documentObj = frame.document;
var element = documentObj.getElementsByName(‘frame1Text’); 

//--- Method 2 ---
var frame = document.getElementById(‘myframe1’);
var documentObj = frame.contentWindow.document;
var element = documentObj.getElementById(‘frame1Text’);

//--- Method 3 ---
window.frames[1].document.getElementById('someElementId')

例如，在 Chrome 工具中，当我选择主文档时:

//--- From Chrome Tools with Main document selected ---

enFrm = document.getElementById("evernoteGlobalTools")
/*RESULTS
<iframe id=​"evernoteGlobalTools" src=​"chrome-extension:​/​/​pioclpoplcdbaefihamjohnefbikjilc/​content/​global_tools/​global_tools.html" class=​"evernoteClipperVisible" style=​"height:​ 528px !important;​">​</iframe>​
*/

oDoc = enFrm.contentWindow.document;
/* ERROR
VM882:1 Uncaught DOMException: Blocked a frame with origin "http://forum.latenightsw.com" from accessing a cross-origin frame.
    at <anonymous>:1:27
(anonymous) @ VM882:1
*/

oDoc = enFrm.contentWindow.document;

/* ERROR
VM892:1 Uncaught DOMException: Blocked a frame with origin "http://forum.latenightsw.com" from accessing a cross-origin frame.
    at <anonymous>:1:27
*/

感激地接受任何/所有建议/想法。

Answer 1

您遇到的错误:

Uncaught DOMException: Blocked a frame with origin "http://forum.latenightsw.com" from accessing a cross-origin frame.

明确指出您的代码已因Cross-Origin Resource Sharing restriction而被阻止(又名内容安全策略或evn CORS)。

与 chrome-extension:​/​/​pioc... 相比，您的域名 forum.latenightsw.com 被正确地认为是不同的。 (主页与扩展程序注入(inject)的 IFrame 的域 ...)。在这种情况下访问 IFrame 的 DOM 将是一个巨大的安全缺陷。

我担心没有现实的解决方案可以让您从主页 Javascript 上下文运行此代码。

如果您可以控制 Chrome 扩展程序，则可以尝试将您的域添加为 manifest 文件中的主机权限(如果这确实相关)。 (更多详情请参阅Google Chrome documentation)。
我不确定window.postMessage会在这里帮助你。

如果您有要执行的静态代码，您可以创建一个包含该代码的Bookmarklet，然后要求访问者将其添加到他们的书签(栏)中并单击它来执行更改。但这不是一个现实的解决方案，可能无法满足您的需求。

编辑

回应“请帮助我理解为什么这更多是一个安全问题”评论。

浏览器在上下文中沙箱代码，每个上下文都有自己的一组安全限制，其中一些(大部分)面临 XSS attacks 的风险.

WEB 页面是最容易受到攻击的上下文，任何浏览器在获取其 URL 后都会执行其中包含的代码。这是攻击的理想目标(例如 XSS )，因为访问受影响网站的人越多，支付费用的人就越多。这就是为什么限制如 Cross-Origin Resource Sharing默认情况下，存在阻止不同框架(具有不同域)访问彼此文档的情况。 有一些因素可以缓解攻击，例如:开源过时的 CMS 中已发现的安全缺陷，其中包括来自数据库的内容不正确转义，让 标 checkout 现在页面源代码中(然后由浏览器执行) ...)等

在“扩展”上下文中，某些 API 要求开发人员明确请求 permissions在扩展程序的 manifest file 中。如果 ActiveTab permission 则授予与当前页面(事件选项卡)的交互已宣布。安装扩展程序后，您就可以访问扩展程序请求的 API。

开发人员控制台上下文是一个特殊情况。所执行的内容仅来自您，并且只会影响您的体验。 人们可以猜测，与网站源代码中的代码相比，那里的风险相当有限(其中可能使用 XSS attacks 注入(inject)了恶意代码)。 换句话说，只有您在控制台中输入的代码才会在那里执行，而来自 WEB 页面的代码将无法访问控制台上下文。
您可能有过这样的经历:当您在控制台中执行代码时，浏览器会警告您存在风险，并告诉您当且仅当您了解代码将执行的操作或至少当您绝对信任代码片段的作者/来源时才能执行此操作。

一个(并非如此)虚构的场景:从主页访问 Iframe 内容。 假设我们有一个包含恶意脚本的网页。该脚本可以尝试通过定期扫描 DOM 节点来识别已安装的扩展，并查找特定扩展注入(inject)的内容，并最终访问该内容。

这一切让我想起了interesting article对于开发人员。