常用页面嵌套方法+防止页面嵌套方法

一、常用嵌套页面方法

1.iframe 

< iframe name="XXX" width=“x” height=“x” frameborder="0" src="XXX.htm" >< /iframe >

2.object

<object style="border: 0px" type="text/x-scriptlet" data="XXX.htm" width=“x” height=“x” >< /object>”


二、常用防止页面嵌套的方法


X-Frame-Options是一个HTTP标头(header),用来告诉浏览器这个网页是否可以放在iFrame内。例如:·

X-Frame-Options: DENY
X-Frame-Options: SAMEORIGIN
X-Frame-Options: ALLOW-FROM http://caibaojian.com


使用X-Frame-Options 响应头


X-Frame-Options 有三个值:

DENY

表示该页面不允许在 frame 中展示,即便是在相同域名的页面中嵌套也不允许。

SAMEORIGIN

表示该页面可以在相同域名页面的 frame 中展示。

ALLOW-FROM uri

表示该页面可以在指定来源的 frame 中展示。

换一句话说,如果设置为 DENY,不光在别人的网站 frame 嵌入时会无法加载,在同域名页面中同样会无法加载。另一方面,如果设置为 SAMEORIGIN,那么页面就可以在同域名页面的 frame 中嵌套。

1.通过标签

<metahttp-equiv="X-Frame-Options"content="deny">

<meta http-equiv="X-Frame-Options" content="SAMEORIGIN">

<metahttp-equiv="X-Frame-Options"content="ALLOW-FROM">


2.通过response设置

response.setHeader("X-Frame-Options","SAMEORIGIN");

3.添加配置

配置 Apache

配置 Apache 在所有页面上发送 X-Frame-Options 响应头,需要把下面这行添加到 'site' 的配置中:

Header always append X-Frame-Options SAMEORIGIN

配置 nginx

配置 nginx 发送 X-Frame-Options 响应头,把下面这行添加到 'http', 'server' 或者 'location' 的配置中:

add_header X-Frame-Options SAMEORIGIN;

配置 IIS

配置 IIS 发送 X-Frame-Options 响应头,添加下面的配置到 Web.config 文件中:

<system.webServer>

  ...


  <httpProtocol>

    <customHeaders>

      <add name="X-Frame-Options" value="SAMEORIGIN" />

    </customHeaders>

  </httpProtocol>

  ...

</system.webServer>

注:使用X-Frame-Options后该页面将无法嵌入其他页面

参考

https://developer.mozilla.org/zh-CN/docs/Web/HTTP/X-Frame-Options?redirectlocale=en-US&redirectslug=The_X-FRAME-OPTIONS_response_header

http://blog.csdn.net/lingchen1112/article/details/42519757


  • 0
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
你可以使用 Vue Router 来嵌套外部页面。Vue Router 是 Vue.js 官方的路由管理器,它可以帮助你在 Vue 应用中实现页面之间的导航和路。 首先,你需要在项目中安装 Vue Router。可以使用 npm 或者 yarn 进行安装: ``` npm install vue-router ``` 然后,在你的 Vue 项目中创建一个 router 文件夹,并在其中创建一个 index.js 文件。在该文件中,你可以定义你的路由配置。例如: ```javascript import Vue from 'vue' import VueRouter from 'vue-router' import ExternalPage from '@/views/ExternalPage.vue' Vue.use(VueRouter) const routes = [ { path: '/external', name: 'ExternalPage', component: ExternalPage }, // 其他路由配置... ] const router = new VueRouter({ mode: 'history', routes }) export default router ``` 在上面的代码中,我们定义了一个名为 ExternalPage 的组件,并将其与 '/external' 路径相关联。 接下来,在你的主 Vue 实例中,将路由器与应用程序进行关联。例如: ```javascript import Vue from 'vue' import App from './App.vue' import router from './router' new Vue({ router, render: h => h(App) }).$mount('#app') ``` 最后,在你的模板中,你可以使用 `<router-view>` 标签来显示路由对应的组件。例如: ```html <template> <div id="app"> <!-- 其他内容... --> <router-view></router-view> </div> </template> ``` 现在,当你访问 '/external' 路径时,Vue Router 将会渲染 ExternalPage 组件,并将其显示在 `<router-view>` 中。 希望这个方法可以帮助你嵌套外部页面。如果还有其他问题,请随时向我提问。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值