使用X-Frame-Options防止网页被Frame

防止被 FRAME 加载你的网站页面

1. meta 标签:很多时候没有效果,无视

meta http-equiv="Windows-Target" contect="_top"

2. js 判断顶层窗口跳转,可轻易破解,意义不大

function locationTop(){ if (top.location != self.location) { top.location = self.location; returnfalse; } return true; } locationTop();

破解:

// 顶层窗口中放入代码 var location = document.location; // 或者 var location = "";

3. header 控制,绝大部分浏览器支持

 

X-Frame-Options HTTP 响应头是用来给浏览器指示允许一个页面可否在 <frame><iframe> 或者 <object> 中展现的标记。网站可以使用此功能,来确保自己网站的内容没有被嵌到别人的网站中去,也从而避免了点击劫持 (clickjacking) 的攻击。

使用 X-Frame-Options

X-Frame-Options 有三个值:

DENY

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

SAMEORIGIN

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

ALLOW-FROM uri

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

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

配置 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>

结果

在 Firefox 尝试加载 frame 的内容时,如果 X-Frame-Options 响应头设置为禁止访问了,那么 Firefox 会用 about:blank 展现到 frame 中。也许从某种方面来讲的话,展示为错误消息会更好一点。

 

参考文章:http://blog.sina.com.cn/s/blog_67196ddc0102v2pu.html,https://developer.mozilla.org/zh-CN/docs/Web/HTTP/X-Frame-Options

HTTP响应头部的 X-Options 是一种安全头信息,用于防止页面被嵌入到 iframe 或其他页面中作为 frame 的一部分。这种攻击形式通常被称为点击劫持(Clickjacking),它允许恶意攻击者操纵用户的交互行为,使得用户实际上在不知情的情况下对攻击者的服务器发起请求。 ### X-Frame-Options 防止了网站内容被意外地或未经授权地放置在框架中。这对于保护网站免受点击劫持至关重要。通过设置此头部,网站可以指示浏览器是否以及如何显示其内容作为一个框架的一部分。 ### 设置方式 该头部支持三个值: - `DENY`:禁止将网页放入任何框架,这通常是推荐的安全策略。 - `SAMEORIGIN`:仅当源网址与当前网页来自相同的域名、协议和端口时,才允许将其放入框架。 - `ALLOW-FROM <uri>`:允许从指定的 URI 向前引用的内容放入框架。 例如: ```http X-Frame-Options: SAMEORIGIN ``` ### 实现示例 在 Web 开发中,可以通过应用服务器配置文件或者直接在 HTML 文件的 `<head>` 标签内添加 `<meta>` 标签的方式设置 X-Frame-Options。 对于使用 Node.js 和 Express 框架的项目,可以通过中间件来处理: ```javascript app.use((req, res, next) => { res.setHeader('X-Frame-Options', 'SAMEORIGIN'); next(); }); ``` ### 相关问题: 1. **为什么需要使用 X-Frame-Options**?解释为什么防止点击劫持对网站来说很重要。 2. **如何自定义 X-Frame-Options 的值**?列出所有可用选项及其含义。 3. **如何检测一个网站是否启用了 X-Frame-Options**?并解释其可能的影响。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

东境物语

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值