我正在写一个基于iframe的Facebook应用程序.现在我想使用相同的html页面来呈现普通网站以及facebook中的画布页面.我想知道我是否可以确定页面是在iframe中加载还是直接在浏览器中加载?
我正在构建一个聊天仪表板和小部件,客户应该可以将小部件放入他们的页面.一些类似的例子是Intercom或Drift.
目前,"main"应用程序是用Meteor.js编写的(它的前端是React).我编写了一个<Widget />组件并将其抛入/widget目录.在这个目录里面,我还有一个index.jsx文件,它只包含以下内容:
import React from 'react';
import ......
ReactDOM.render(
<Widget/>,
document.getElementById('widget-target')
);
Run Code Online (Sandbox Code Playgroud)
然后,我设置了一个带有入口点的webpack配置,index.jsx当webpack运行时,bundle.js在公共目录中吐出一个.
然后,只需包含一个script和,就可以将其包含在另一个页面中div:
<script src="http://localhost:3000/bundle.js" type="text/javascript"></script>
<div id="widget-target"></div>
Run Code Online (Sandbox Code Playgroud)
几个问题:
我想测试我的页面(php)是否嵌入在iframe中,以便实现不同的行为.知道如何测试这个.我也在使用jQuery,如果有帮助的话.
另外: 我特别感兴趣的是,如果有一种方法可以在服务器上测试,而不是在客户端使用Javascript
假设我的用户通常通过https://www.mycompany.com/go/mybusinessname访问我们的网页
在这个网页中,我们有一个 iframe,它实际上来自https://www.mycompany.com/myapp
一切工作正常,除了如果由于某种原因,用户开始了解这个网址https://www.mycompany.com/myapp。他们可以通过在地址栏中键入内容来直接开始访问它。
这就是我想要阻止他们做的事情。有没有最佳实践可以实现这一目标?
====更新以提供更多背景====
父页面https://www.mycompany.com是该公司的页面,由其他团队维护。因此它们具有所有通用的页眉和页脚等,因此每个应用程序都在其中呈现为 iframe。(这也意味着我们无法更改父页面的代码)
如果用户直接访问https://www.mycompany.com/myapp,他们将无法看到页眉和页脚。是的,这没什么大不了的,但我只是想保持一致性。
我担心的另一个问题是,在我们的开发环境中(也称为本地运行页面时),我们没有父 iframe 的东西。我们直接从http://localhost:port访问我们的页面。因此我想找到一个解决方案,可以让我们在本地运行时也能正常访问它。
如果这样的简单解决方案不存在,也请告诉我:)
如何阻止我的网站加载到框架中?
从这里可以看到:http: //yehg.net/lab/pr0js/pentest/cross_site_framing.php
谷歌将无法加载,msn.com将突破框架.AOL.com将加载罚款.如何让我的网站突破框架或加载整个窗口?