如何在一个网页中真正打开任何网站？答案

【问题标题】：How to truly open any website inside a single webpage?如何在一个网页中真正打开任何网站？
【发布时间】：2020-09-17 16:32:01
【问题描述】：

我一直在开发一个数字平台，其核心理念是允许用户在一个网页中打开和访问其他网站。我已经尝试过使用 iframe 并且可能是大多数 github 公共资源，但我正在尝试做的事情与我认为在网上普遍可用的内容无关。我正在寻找一个允许我的平台创建类似于浏览器选项卡的系统，但在网站内部，因此它必须允许用户访问每个网站而没有任何类型的阻止（例如您在尝试访问 Facebook 时获得的内容）通过 iframe），并使用保存的浏览器 cookie 和缓存以确保更流畅的体验。我知道有一些方法可以通过我尝试访问的网站直接授予的权限来实现，但对于这种情况，我想创建一种机制，允许该连接以与完成连接的方式相同的方式发生一个普通的浏览器（到目前为止我称它为原型浏览器）。

我应该怎么做才能完成这项工作？我应该为每个用户创建一个代理服务器吗？如何让用户在不离开原始浏览器的情况下访问亚马逊并进行购买或访问 Facebook 并发布内容？

【问题讨论】：

标签： javascript iframe proxy

【解决方案1】：

你不能。

如果X-Frame-Options 或内容安全政策禁止第三方网站在框架中显示内容，那么他们将被禁止这样做。如果它可以被第三方网站覆盖，那将是一个毫无意义的安全功能。

如果浏览器出于隐私原因阻止了第三方 cookie，则网站无法覆盖它。如果网站可以禁用它，那将是一个毫无意义的隐私功能。

如果您实施了反向代理来按需从其他网站复制内容，那么您将无法读取用于您所代理的网站的 cookie。如果我的浏览器将与http://mybank.com 连接的cookie 发送到http://yourproxy.com/mybank.com/，这将是一个重大的安全问题。

如果您使用 SOCKS 或类似方式实现了转发代理，那么您可以这样做……但它要求使用该网站的每个人都必须重新配置他们的浏览器才能使用您的代理。这将使您能够访问他们所有的 HTTP 请求和响应。这将是一个重大的安全问题。

如果您希望以这种级别访问用户在 Internet 上所做的事情，那么您需要编写浏览器而不是网站。

【讨论】：

看看我们为 GRIDNET OS gridnet.org 实施的浏览器 UI dApp，它由一个“被黑”iframe 和一个 CORS 缓解反向代理组成。

【解决方案2】：

简单回答：我不认为你可以。为什么？见下文。

大多数网站都会阻止框架以防止称为点击劫持的攻击，这种攻击会诱使用户做一些无害但有害的事情。下面显示了一个示例。

var iframe = document.getElementsByTagName("iframe")[0];

function transparent() {
iframe.style.opacity = 0;
}

function opaque() {
iframe.style.opacity = 1;
}

body {
font-family: sans-serif;
margin: 0;
}

iframe {
border: none;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 100%;
height: 100%;
z-index: 9999;
opacity: 0;
transition: opacity 2s;
}

.clickjack {
position: absolute;
top: 10px;
right: 140px;
}

<p>In the example below, a fake button is underneath a link on a transparent Wikipedia iframe.</p>
<p>To see an example:</p>
<ol>
<li>Click "Opaque" to see the Wikipedia iframe. Notice that you're viewing the page called "Main Page".</li>
<li>Click "Transparent" to see the fake button.</li>
<li>Click the fake button.</li>
<li>Click "Opaque" to see the Wikipedia iframe.</li>
<li>Did you notice that the page has changed to "Contributions"? This is an example of clickjacking.</li>
</ol>
<button onclick="transparent();">Transparent</button>
<button onclick="opaque();">Opaque</button>
<div style="position:relative;height:200px">
<iframe src="https://en.wikipedia.org/wiki/Main_Page"></iframe>
<button class="clickjack">Click here!</button>
</div>

【讨论】：