使用浏览器检查后使用 jquery 访问 iframe 内容

Getting access to iframe contents with jquery after inspecting it with the browser

今天测试我正在开发的网站时发生了一件奇怪的事情:我试图通过 jquery 访问 iframe 中的元素,令我惊讶的是 我能够访问它们并修改它们。令人惊讶的是因为 iframe 不在同一个域中,因此我不应该为 "same origin policy" 执行此操作(或者我错了?)。

事实是,它只能在浏览器的任何 iframe 元素 "inspecting" 之后完成(在本例中为 chrome)。如果稍后我 "inspect" 网站的任何元素不在 iframe 内,那么我会丢失 "superpower" 并得到预期的结果,即 jquery 由于 "same origin policy" 而不允许访问.

问题: 1.- 这应该发生吗? 2.- 如果它可能意味着安全风险,是否有办法防止它? 3.- 如果这是假设发生并且是安全的,我如何 jquery "simulate" 浏览器 "inspecting" 以便我可以访问 iframe 元素并修改它们

当您检查 iframe(在 Chrome 上测试)时,它会自动将控制台的上下文设置为 iframe 的上下文。因此,您可以直接在 iframe 的内容上 运行 任何 javascript。但它无法从父级别(实例化 iframe 的地方)访问它,因为此类操作可能被视为安全漏洞。

这是您尝试访问父上下文时的示例(在本例中,父上下文是 jsfiddle 的 iframe,您可以在左上角看到):

然后当我将上下文切换到我尝试访问的 iframe 时:

希望这总结了答案并能帮助其他可能有类似问题的人。