代码之家 › 专栏 › 技术社区 › JMichaelTX

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

evernote iframe google-chrome javascript

JMichaelTX · 技术社区 · 8 年前

我需要设置 value iframe文档中几个元素的属性。我可以很容易地从Chrome工具控制台做到这一点。但同样的命令在键盘大师或AppleScript注入页面的JavaScript中不起作用。

在下面的示例中,我已经调用了Evernote Web裁剪器。

在我选择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工具中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
*/

1 回复 | 直到 8 年前

Stphane 8 年前

您面临的错误:

http://forum.latenightsw.com “从访问交叉原点帧。

明确说明您的代码由于 Cross-Origin Resource Sharing restriction 内容安全策略 或evn CORS)。

您的域名当与扩展的注入IFrame的域 â¦ ). 在这种情况下访问IFrame的DOM将是一个巨大的安全漏洞。

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

如果你控制着chrome扩展,你可以尝试将你的域名添加为在 Google Chrome documentation ).
我不确定 window.postMessage 我会帮你的。

如果要执行静态代码,可以创建一个包含代码,然后要求访问者将其添加到书签(栏)中,并单击它以执行更改。但这不是一个现实的解决方案,可能不适合您的需要。

编辑

议论

浏览器沙盒在上下文中编码,每个上下文都有自己的一组安全限制,其中一些存在风险(主要是) XSS attacks

网页是最容易受到攻击的上下文,任何浏览器都会在获取其URL后执行其包含的代码。这是攻击的理想目标(例如 XSS Cross-Origin Resource Sharing 默认情况下,存在阻止不同框架(具有不同域)访问彼此文档的漏洞。有一些因素可以缓解攻击,例如:在开源过时的CMS中发现了安全缺陷,其中包括无法正确转义来自数据库的内容

在“扩展”上下文中,一些API要求开发人员明确要求 permissions 在分机中 manifest file ActiveTab permission 已声明。一旦安装了扩展,就可以访问扩展所请求的API。

安慰语境是一种特殊情况。被执行的东西只来自你,只会影响你的体验。可以猜测,与网站源代码相比,风险是非常有限的(其中可能有注入恶意代码使用换句话说,只有您在控制台中输入的代码才会在那里执行,网页中的任何代码都无法访问控制台上下文。

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

interesting article 对于开发者。