服务器端检测iframe

Question

相关问题： Server-side detection that a page is shown inside an IFrame

我觉得很奇怪，我们显然无法从服务器端知道页面是否通过 iframe 加载。大多数答案都说它只能从浏览器中检测到，我只是不明白为什么。

在浏览器中，我们可以访问 document.referrer，这清楚地表明了我们来自 url。使用 req.headers.referer.

在服务器端有类似的东西

我刚刚使用本地 iframe 对其进行了测试，得到了以下结果：

referer http://localhost:8888/tests/chatbotIframeIntegration // The page containing the iframe
referer http://localhost:8888/chatbot // The page displayed within an iframe
referer undefined // seems to be undefined sometimes, maybe due to HMR?)

我绝对可以检测到请求来自 url。所以，如果我知道 url 我的应用程序应该运行进入什么，我肯定可以有一些逻辑来判断我是否从外部网站调用我的服务器，不是吗？

另外，浏览器使用referrer而服务器使用referer（一个r）很奇怪...

Answer 1

I've gained more experience through experimentation, so here is what I've learned so far.

正如我所想，我们可以通过document.referrer（浏览器）和req.headers.referer（服务器）来解析referrer。

因此，可以检测当前引荐来源网址是否与我们的托管服务器不同，在这种情况下，我们知道查询来自 iframe。

如果您想从服务器端知道您站点中的页面是否已通过同一站点中的 iframe 加载，则变得更加棘手。在这种情况下，无法自动检测我们是否运行来自 iframe 的页面。

For instance, if you have an iframe on page /index that loads /page2 page, then you can't know, from the server side if /page2 was loaded from the iframe (on /index) or from navigating to /page2.

这就是为什么人们说无法从服务器端知道页面是否通过 iframe 加载的原因。因为不确定。

现在，我的实际需求有点不同。我需要知道我的 /page2 是否是从我自己的另一个域（跨域）加载的，这很容易知道，因为引荐来源网址与我自己的域不同，无论是在服务器端还是在浏览器上边.

我的集成测试变得有点复杂，因为我有一个 /tests/iframeIntegration 页面，其中包含一个从同一域加载另一个页面 /page2 的 iframe。（相对url）

重点是测试 iframe 集成是否按预期工作，因为它是运行在同一个域上，我无法解决我是否通过 iframe 加载它。

对于这个特殊情况，我在 url 中添加了一个 /page2?iframe=true。这是我发现的最简单的解决方法，可以普遍使用（浏览器 + 服务器）。

以下是一些实用脚本：

import { isBrowser } from '@unly/utils';
import includes from 'lodash.includes';

/**
 * Resolves whether the current web page is running as an iframe from another page
 *
 * Iframes are only detectable on the client-side
 * Also, using iframe=true as search parameter forces iframe mode, it's handy when using an iframe from the same domain
 * (because same-domain iframes aren't detected when comparing window.parent and window.top since it's the same window)
 *
 * @return {boolean}
 * @see 
 */
export const isRunningInIframe = (): boolean => {
  if (isBrowser()) {
    try {
      return window.self !== window.top || includes(document.location.search, 'iframe=true');
    } catch (e) {
      return null; // Can't tell
    }
  } else {
    return null; // Can't tell
  }
};

/**
 * Resolve the iframe's referrer (the url of the website the iframe was created)
 *
 * Helpful to know which of our customer use our app through an iframe, and analyse usage
 * May not always work due to security concerns
 *
 * @return {string}
 * @see 
 */
export const getIframeReferrer = (): string => {
  if (isRunningInIframe()) {
    try {
      return document.referrer || null;
    } catch (e) {
      return null;
    }
  } else {
    return null;
  }
};

服务器端检测iframe

Server side detection iframe

iframe

server

http-referer