相关问题: 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中运行,我绝对可以使用某种逻辑来弄清楚是否要从外部网站调用服务器,不是吗?
此外,浏览器使用referrer
而服务器使用referer
(一个r)...
答案 0 :(得分:0)
我已经通过实验获得了更多经验,所以这是到目前为止我所学到的。
我认为,我们可以通过document.referrer
(浏览器)和req.headers.referer
(服务器)来解析引荐来源网址。
因此,可以检测当前引荐来源网址是否不同于我们的托管服务器,在这种情况下,我们知道查询来自iframe。
当您想从服务器端知道站点中的页面是否已通过同一站点中的iframe加载时,这变得更加棘手。在这种情况下,无法自动检测是否正在iframe中运行页面。
例如,如果在页面
/index
上有一个iframe加载了/page2
页面,那么就无法从服务器端知道是否从iframe加载了/ page2(在/ index上) )或导航到/ page2。
这就是为什么人们说无法从服务器端知道是否通过iframe加载了页面。因为不确定。
现在,我的实际需求有所不同。我需要知道我的/page2
是否从我自己(跨域)的另一个域加载,这很容易知道,因为在服务器端和浏览器上,引荐来源网址都不同于我自己的域一侧。
由于我的集成测试更加复杂,因为我有一个/tests/iframeIntegration
页,其中包含一个iframe,该iframe加载了来自同一域的另一页/page2
。 (相对网址)
关键是要测试iframe集成是否按预期工作,并且因为它在同一域上运行,所以我无法确定是否通过iframe进行加载。
对于这种特殊情况,我在网址中添加了/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;
}
};