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

Question

我需要value在iframe的文档中设置几个元素的属性.我可以通过Chrome Tools控制台轻松完成此操作.但是相同的命令不适用于由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 Tools中主要文档的屏幕截图:

Chrome Tools中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 Tools中,当我选择了主文档时:

//--- 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 " 的帧访问跨源帧.

明确指出您的代码由于跨源资源共享限制(AKA 内容安全策略或evn CORS)而被阻止.

与chrome-extension相比,你的域forum.latenightsw.com被认为是不一样的://pioc ... (主页与扩展注入IFrame的域名…).在这种情况下访问IFrame的DOM将是一个巨大的安全漏洞.

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

如果您控制了chrome扩展,则可以尝试在清单文件中添加域作为主机权限(如果这确实相关).(有关Google Chrome文档的更多详细信息). 我不确定会在这里帮到你.
window.postMessage

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

编辑

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

浏览器沙箱代码在上下文中,每个上下文都有自己的一组安全限制,其中一些存在(大多数)关于XSS攻击的风险.

WEB页面是最容易受到攻击的上下文,任何浏览器在获取其URL后都会执行它包含的代码.这是攻击的理想目标(例如XSS),因为访问受影响网站的人越多,人们支付的费用就越多.这就是为什么存在诸如跨源资源共享之类的限制,其阻止不同的帧(具有不同的域)默认地访问彼此的文档.有一些因素可以缓解攻击,例如:在开源过时的CMS中发现的安全漏洞,包括未正确转发来自数据库的内容 标签出现在页面源中(然后由浏览器执行......)等.

在"扩展"上下文中,某些API要求开发人员明确要求扩展的清单文件中的权限.如果已声明ActiveTab权限,则授予与当前页面(活动选项卡)的交互.安装扩展程序后,您可以访问扩展程序请求的API.

开发人员控制台上下文是一个特例.从他们那里执行的是什么,只会影响你的经验.可以猜测,与网站源代码(可能使用XSS攻击注入恶意代码)相比,风险相当有限.换句话说,只有您在控制台中输入的代码才会被执行,并且WEB页面中的代码不会访问控制台上下文.
当您通过代码在控制台中执行时,您可能有经验丰富的浏览器警告您有关风险的信息,当且仅当您了解代码将执行的操作时,或者至少如果您完全信任代码段的作者/来源,则告诉您这样做.

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

所有这些都让我想起了一篇有趣的开发者文章.