时间戳

首页 > 解决方案 > 如何在一个网页中真正打开任何网站？

javascript - 如何在一个网页中真正打开任何网站？

问题描述

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

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

标签： javascriptiframeproxy

解决方案

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

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

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>

推荐阅读