如何禁用对 iframe 的直接访问答案

【问题标题】：How to disable direct access to Iframe如何禁用对 iframe 的直接访问
【发布时间】：2015-04-17 08:52:38
【问题描述】：

假设我的用户通常通过https://www.mycompany.com/go/mybusinessname访问我们的网页

在这个网页中，我们有一个 iframe，它实际上来自 https://www.mycompany.com/myapp

一切正常，除了如果由于某种原因，用户知道了这个 URL https://www.mycompany.com/myapp。他们可以通过在地址栏中输入直接开始访问它。

这就是我想阻止他们做的事情。是否有任何最佳实践来实现这一目标？

==== 更新以提供更多背景 ====

父页面https://www.mycompany.com 是公司的页面，由其他团队维护。所以他们拥有所有通用的页眉和页脚等，因此每个应用程序都在其中呈现为 iframe。（这也意味着我们不能更改父页面的代码）

如果用户直接访问https://www.mycompany.com/myapp，他们将无法看到页眉和页脚。是的，这没什么大不了的，但我只是想保持一致性。

我担心的另一个问题是，在我们的开发环境中（也就是在本地运行页面时）我们没有父 iframe 的东西。我们直接从http://localhost:port 访问我们的页面。因此，我想找到一个解决方案，让我们在本地运行时也可以正常访问它。

如果不存在这样的简单解决方案，也请告诉我:)

【问题讨论】：

使用 Javascript 对外部父框架进行 IFRAME 调用以验证自身。名义上这不会直接浏览（我说名义上是因为只要付出足够的努力，一切皆有可能）。
Detect iFrame embedding in Javascript 的可能重复项

标签： javascript jquery iframe

【解决方案1】：

在 iframe 的源上，您可以使用 window.top.location 检查父窗口，看看它是否设置为“https://www.mycompany.com/go/mybusinessname”。如果没有，请重定向页面。

var myUrl = 'https://www.mycompany.com/go/mybusinessname';

if(window.top.location.href !== myUrl) {
    window.top.location.href = myUrl;
}

【讨论】：

【解决方案2】：

我意识到我们已经有一个函数来确定页面是否在https://www.mycompany.com 下运行。所以现在我只需要在我们的页面不是 iframe 时执行以下操作即可执行重定向

var expectedPathname = "/go/mybusinessname";
var getLocation = function (href) {
    var l = document.createElement("a");
    l.href = href;
    return l;
};
if (window == window.top) { // if not iframe
    var link = getLocation(window.top.location.href);
    if (link.pathname !== expectedPathname) {
        link.pathname = expectedPathname;
        window.top.location.replace(link.href);
    }
}

【讨论】：

判断 window == window.top 和 getLocation 函数的语句是多余的。 location.href 已返回 URL 并包含路径名。事实上，你的方式留下了一个安全漏洞。有人可以在他们的网站上欺骗一个名为 /go/mybusinessname 的文件，然后在 iframe 中打开您的“myapp”链接。您最安全的解决方案是评估整个 URL 并确保它与您的公司 URL（或一系列可接受的 URL）相匹配。详情见我的回答。

【解决方案3】：

您可以在服务器端使用 HTTP referer 标头。如果页面在 IFRAME 中打开 - referer 包含父页面地址。否则为空或包含不同的页面。

【讨论】：