相关问题： 服务器端检测页面显示在 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，我绝对可以有一些逻辑来确定我是否从外部网站调用我的服务器，不是吗？
另外，浏览器使用referrer而服务器使用referer(一个r(是很奇怪的......
我通过实验获得了更多的经验，所以这是我到目前为止学到的。
正如我所想的，我们可以通过document.referrer(浏览器(和req.headers.referer(服务器(解析引用。
因此，可以检测当前引荐来源网址是否与我们的托管服务器不同，在这种情况下，我们知道查询来自 iframe。
当您想知道从服务器端了解站点中的页面是否已通过同一站点中的 iframe 加载时，它会变得更加棘手。在这种情况下，无法自动检测我们是否从 iframe 运行页面。
例如，如果您在第
/index页上有一个加载/page2页面的 iframe，那么您无法从服务器端知道/page2 是从 iframe 加载的(在/index 上(还是从导航到/page2 加载的。
这就是为什么人们说没有办法从服务器端知道页面是否通过iframe加载。因为它是不确定的。
现在，我的实际需求有点不同。我需要知道我的/page2是否是从我自己的另一个域(跨域(加载的，这很容易知道，因为引荐来源与我自己的域不同，无论是在服务器端还是浏览器端。
我的集成测试变得更加复杂，因为我有一个包含 iframe 的/tests/iframeIntegration页面，该 iframe 从同一域加载另一个页面/page2。(相对网址(
重点是测试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 https://stackoverflow.com/a/326076/2391795
*/
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 https://stackoverflow.com/a/19438406/2391795
*/
export const getIframeReferrer = (): string => {
if (isRunningInIframe()) {
try {
return document.referrer || null;
} catch (e) {
return null;
}
} else {
return null;
}
};