仅在本地编辑跨域 iframe 内容

Question

我们很多人都知道，由于同源策略，无法编辑跨域 IFrame 。

如果我们只在本地使用 Stylish 扩展等，有没有办法解决这个问题？

以在 iframe 内启动的这个视频为例：

我需要简单地添加“缩放：2；” 到“#video21588864 iframe 图”

如果这 100% 不可能，为什么我可以在 Inspector 窗口中成功完成，但不能自动完成？是否真的有零自动本地方式使用 Javascript 或其他东西来解决这个问题？

Answer 1

您无法<iframe>以跨域方式访问其中的内容。如果响应包含 CORS 标头，您也许可以。

为什么我可以在 Inspector 窗口中成功执行此操作

开发人员工具与您的文档是分开的。它可以做更多的事情，你不可能在网页中使用普通的 JavaScript。

基本原理

您无法访问 iframe 内的内容是有原因的。考虑到这一点，用户登录到他们的银行网页。令牌存储在 cookie 中以证明用户已登录。

现在您在您的网页中包含一个 iframe 并加载银行的网页。由于 cookie 包含有效令牌，iframe 将显示用户已登录。

如果您可以访问 iframe 并给自己寄钱，那不是很好吗？好吧，这正是不允许的原因，100% 不可能，因为浏览器已正确实现。

附录

看到你在本地提到了这个词，我决定添加这部分。现在，我不知道您到底要做什么，但是如果您具有提升的权限，则可以操纵 iframe 内的内容，包括：

• 用户脚本
• 获得适当权限的扩展
• 开发者工具
• 浏览器本身

如果您只想zoom: 2在自己的计算机上添加来自 ESPN 的视频，我建议您创建一个用户脚本，该脚本的权限比普通网页高得多，而且比扩展程序更容易制作。

// ==UserScript==
// @match http://www.espn.com/core/video/iframe*
// ==/UserScript==

document.querySelector("figure").style.zoom = 2;

将其另存为myscript.user.js. 打开 chrome://extensions 并将该文件拖到页面上。用户脚本将拥有更高的权限，可以访问该页面。

Answer 2

在 iframe 中编辑跨域域的一种方法是通过服务器 (PHP) 加载它们并通过添加基本标记来修改 html：<base href='http://www.espn.com'/> 不能保证它们会让您将所有元素加载为 html 并仍然呈现页面正常但在某些情况下可以工作，值得一试。

一个非常简单的iframe-loader.php看起来像这样：

<?php
error_reporting(0);

$url = $_REQUEST['url'];
$html = file_get_contents($url);
$dom = new domDocument;
$dom->strictErrorChecking = false;
$dom->recover = true;
$dom->loadHTML($html);


//Add base tag
$head = $dom->getElementsByTagName('head')->item(0);
$base = $dom->createElement('base');
$base->setAttribute('href',$url);

if ($head->hasChildNodes()) {
    $head->insertBefore($base,$head->firstChild);
} else {
    $head->appendChild($base);
}

//Print result
echo $dom->saveHTML();

演示

然后你通过去加载一个网址 /iframe-loader.php?url=http://www.espn.com/core/video/iframe?id=21588864...

祝你好运！