如何设置iframe中元素的值？

Question

我需要设置 iframe 文档中几个元素的 value 属性。我可以从 Chrome 工具控制台轻松完成此操作。但是相同的命令在通过 Keyboard Maestro 或 AppleScript 注入页面的 JavaScript 中不起作用。

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

这个 script/commands 在 Chrome 控制台中工作，在我 select 编辑了 iframe 文档后：

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

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

我尝试了很多不同的 SO 解决方案，none 其中有效。

这里是 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 工具，当我有主文档时 selected:

//--- 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
*/

Any/Allsuggestions/ideas感激不尽

Answer 1

您遇到的错误：

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

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

与 [=80 相比，您的域 forum.latenightsw.com 被认为完全不同=]: / / pioc… （主页与扩展注入的 IFrame 域 …）。在这种情况下访问 IFrame 的 DOM 将是一个巨大的安全漏洞。

我担心没有现实的解决方案可以让你运行来自主页 Javascript 上下文的这段代码。

如果您控制了 chrome 扩展，您可以尝试在 manifest[=65] 中将您的域添加为 host 权限 =] 文件（如果这真的相关）。（有关 Google Chrome documentation 的更多详细信息）。
我不确定 window.postMessage 能帮到你。

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

编辑

回应“请帮助我理解为什么这会成为安全问题” 评论。

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

WEB 页面是最容易受到攻击的上下文，任何浏览器都会在获取其 URL 后执行其中包含的代码。这是攻击的理想目标（例如 XSS) because the more people visit an affected website the more people pay the costs. This is why restriction such as Cross-Origin Resource Sharing 存在，它默认阻止不同的框架（具有不同的域）访问彼此的文档。有一些因素可以缓解攻击，例如：在开源过时的 CMS 中发现了安全漏洞，包括不正确地转义来自数据库的内容，让标签出现在页面源代码中（然后是由浏览器执行...)，等等

在"Extension"上下文中，一些API要求开发者明确要求permissions in the extension's manifest file. Interactions with the current page (active tab) is granted if the ActiveTab permission已声明。安装扩展程序后，您就可以访问该扩展程序请求的 API。

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

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

这一切让我想起了开发者的interesting article。

如何设置iframe中元素的值？

How Do I Set Value of Elements in iframe?

javascript

iframe

google-chrome

evernote

编辑