X-Frame-Options：防点击劫持神器

创作时间:

2025-01-22 00:58:18

作者:

@小白创作中心

X-Frame-Options：防点击劫持神器

点击劫持（Clickjacking）是一种常见的Web安全漏洞攻击，攻击者通过嵌套一个透明的iframe或其他HTML元素，将目标网站的页面覆盖在一个看似无害的页面上。然后，攻击者引导用户在看不见的情况下点击页面上的某个区域，实际上是点击了目标网站的一些敏感操作按钮或链接。

点击劫持可能导致以下危害：

敏感操作执行：用户可能无意中执行了目标网站上的敏感操作，如修改账户信息、购买商品等。
欺骗用户：用户被欺骗认为他们在与一个安全的页面交互，实际上却可能导致数据泄露、账户被盗等问题。
CSRF攻击：点击劫持可以被利用来执行跨站请求伪造（CSRF）攻击，通过欺骗用户执行未经授权的操作。
信息泄漏：通过点击劫持，攻击者可能获取用户在目标网站上的敏感信息，如个人资料、账户凭证等。

为了防御点击劫持，可以使用X-Frame-Options头。X-Frame-Options是一个HTTP头部字段，用于控制网页在、、<object>、<embed>等标签中的展示方式。这个头部的主要目的是防止点击劫持攻击。 X-Frame-Options头有三个主要的取值： <ol> <li>DENY：如果设置为DENY，表示页面不能在任何frame中展示，即便是相同域名的页面也不允许。</li> </ol> <pre><code>X-Frame-Options: DENY </code></pre> <ol start="2"> <li>SAMEORIGIN：如果设置为SAMEORIGIN，表示页面只能在相同域名的frame中展示。</li> </ol> <pre><code>X-Frame-Options: SAMEORIGIN </code></pre> <ol start="3"> <li>ALLOW-FROM uri：如果设置为ALLOW-FROM，表示页面只能在指定的URI中展示。</li> </ol> <pre><code>X-Frame-Options: ALLOW-FROM https://example.com </code></pre> 在实际应用中，可以通过以下方式配置X-Frame-Options： <ol> <li>Apache服务器配置： 要配置Apache以发送X-Frame-Options响应头，需要把下面这行添加到'site'的配置中： <pre><code class="language-apacheconf">Header always set X-Frame-Options "SAMEORIGIN" </code></pre> 要将Apache的配置X-Frame-Options设置成DENY，按如下配置去设置你的站点： <pre><code class="language-apacheconf">Header set X-Frame-Options "DENY" </code></pre> </li> <li>Nginx服务器配置： 配置Nginx发送X-Frame-Options响应头，把下面这行添加到'http'、'server'或者'location'的配置中： <pre><code class="language-nginx">add_header X-Frame-Options SAMEORIGIN always; </code></pre> </li> <li>IIS服务器配置： 配置IIS发送X-Frame-Options响应头，添加下面的配置到Web.config文件中： <pre><code class="language-xml"><system.webServer> ... <httpProtocol> <customHeaders> <add name="X-Frame-Options" value="SAMEORIGIN" /> </customHeaders> </httpProtocol> ... </system.webServer> </code></pre> </li> <li>HAProxy配置： 配置HAProxy发送X-Frame-Options响应头，添加这些到你的前端、监听（listen），或者后端的配置里面： <pre><code>rspadd X-Frame-Options:\ SAMEORIGIN </code></pre> 或者，在较新的版本中： <pre><code>http-response set-header X-Frame-Options SAMEORIGIN </code></pre> </li> <li>Express框架配置： 要配置Express以发送X-Frame-Options响应头，你可以使用借助了frameguard的helmet来设置首部。在你的服务器配置里面添加： <pre><code class="language-javascript">const helmet = require("helmet"); const app = express(); app.use(helmet.frameguard({ action: "SAMEORIGIN" })); </code></pre> 或者，你也可以直接用frameguard： <pre><code class="language-javascript">const frameguard = require("frameguard"); app.use(frameguard({ action: "SAMEORIGIN" })); </code></pre> </li> </ol> 虽然X-Frame-Options是一个有效的防御点击劫持的工具，但它已经被废弃。现代浏览器推荐使用Content-Security-Policy（CSP）的frame-ancestors指令来实现相同的功能。CSP提供了一个更全面的内容安全策略机制，可以防范多种类型的攻击，包括点击劫持。 例如，使用CSP的frame-ancestors指令： <pre><code>Content-Security-Policy: frame-ancestors 'self' </code></pre> 这行代码的作用与X-Frame-Options的SAMEORIGIN相同，但提供了更好的兼容性和安全性。 通过合理配置X-Frame-Options或CSP的frame-ancestors指令，可以有效防止点击劫持攻击，保护用户和网站的安全。 <div id="show" style="display: block;width: 0;height: 0;visibility: hidden;opacity: 0;"></div><script src="https://www.wenxiaobai.com/common-bridge-sdk.js"></script><script src="https://www.wenxiaobai.com/baike-huaxian.js"></script><script> const firstSection = document.querySelector('section'); firstSection?.setAttribute('open', ''); document.querySelectorAll('section header').forEach(header => { header.addEventListener('click', function() { const section = this.parentElement; if (section.hasAttribute('open')) { section.removeAttribute('open'); } else { section.setAttribute('open', ''); } }); }); </script>

热门推荐

预防脑中风！中医推荐：按摩7个穴位来保健