如何在 iframe 中设置元素的值？

Question

我需要在 iframe 的文档中设置几个元素的 value 属性。我可以从 Chrome 工具控制台轻松地做到这一点。但是相同的命令不适用于由 Keyboard Maestro 或 AppleScript 注入页面的 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

您面临的错误：

未捕获的 DOMException：阻止具有源“http://forum.latenightsw.com”的框架访问跨域框架。

明确指出您的代码已因 Cross-Origin Resource Sharing restriction（A.K.A. 内容安全政策或 evn CORS）而被阻止。

您的域 forum.latenightsw.com 与 chrome-extension:​/​/​pioc... 被认为不一样时间> （主页与扩展的注入IFrame的域…）。在这种情况下访问 IFrame 的 DOM 将是一个巨大的安全漏洞。

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

如果您可以控制 chrome 扩展，您可以尝试将您的域添加为 manifest 文件中的 主机权限（如果这确实相关）。 （更多详情请访问Google Chrome documentation）。
我不确定window.postMessage 是否会在这里为您提供帮助。

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

编辑

回应«请帮助我理解为什么这更像是一个安全问题»评论。

浏览器沙箱代码在上下文中，每个上下文都有自己的一组安全限制，其中一些（大部分）存在与XSS attacks有关的风险。

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

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

开发者控制台上下文是一个特例。执行的内容仅来自您，并且只会影响您的体验。 可以猜测，与网站源代码（可能使用XSS attacks 注入恶意代码）中的代码相比，那里的风险非常有限。 换句话说，只有您在控制台中输入的代码才会在那里执行，而 WEB 页面中的任何代码都无法访问控制台上下文。
当您在控制台中执行代码时，您可能遇到过浏览器警告您风险，告诉您当且仅当您了解代码将做什么或至少当您绝对信任 sn- 的作者/来源时才这样做p.

一个（不是这样的）虚构场景：从主页访问Iframe 内容。 假设我们有一个包含恶意脚本的网页。该脚本可以尝试通过定期扫描 DOM 节点来识别已安装的扩展程序，并查找特定的扩展程序注入的内容，并最终访问该内容。

所有这些都让我想起了开发人员的interesting article。