在前端开发中，网站安全性是一个十分重要的问题。其中之一就是如何防范网站被 Clickjacking 攻击。Clickjacking 就是利用 iframe 的透明度或者位置掩盖网页上的一些按钮，将用户点击的按钮伪装为另一个按钮，从而进行一些恶意操作。为了防范 Clickjacking，我们可以使用一个 npm 包叫做 fastify-frame-guard。
fastify-frame-guard 是什么
fastify-frame-guard 是专门为 fastify 框架设计的一个防范 Clickjacking 的模块。它可以实现以下功能：
- 增加 X-Frame-Options 的响应头，限制网页在 iframe 中的使用；
- 增加 Content-Security-Policy 的响应头，限制 iframe 的使用；
- 增加 Set-Cookie 的响应头，防止 Cookie 被附加在 iframe 中的 GET 请求中；
- 为 options 请求方式添加 Cors 的响应头，防止 CSRF 攻击。
fastify-frame-guard 的使用方法十分简单，只需要在 fastify 的实例上注册即可。
fastify-frame-guard 的安装及使用
安装
要使用 fastify-frame-guard，我们先需要使用 npm 进行安装。
npm i fastify-frame-guard
注册插件
安装完成后，在 fastify 的实例上注册 fastify-frame-guard 插件即可。
const fastify = require('fastify')()
fastify.register(require('fastify-frame-guard'), {
action: 'deny'
})这里我们设置 action 为 deny，表示拒绝网页在 iframe 中的使用。fastify-frame-guard 的 options 如下：
- action：它的值可以是 deny, sameorigin 或者 allow-from uri。
- setAllHeaders：表示是否设置所有类别 headers，默认是 true。
- xFrameOptions：一个对象，其中 keys 的值是其对应 headers 的名字，例如 xFrameOptions，keys 可以是 strict-transport-security，xss-protection，frame-guard，content-security-policy，以及 expect-ct，values 则是 headers 对应的值。
- csp：一个包含 CSP 相关设置的对象，在 fastify-frame-guard 中 CSP 支持以下 keys：
{
policy: 'default-src self',
reportUri: '/some-uri',
reportOnly: false,
sandbox: 'allow-forms ...',
disableAndroid: false,
}- cookies：一个包含设置 cookies 的对象，其中的 key 值是 headers 的名字，value 是其对应 headers 的值。
{
key: '',
value: '',
domain: '',
path: '',
secure: '',
sameSite: ''
}示例代码
-- -------------------- ---- -------
----- ------- - --------------------
------------------------------------------------ -
------- -------
-------------- -----
-------------- -
----------- ------
--
---- -
------- ------------ --------
---------- --------------------
----------- ------
-------- ------------ ---------------
--------------- ------
--
-------- -
---- -------------------
------ --------------------
------- ---------------
----- ----
------- -----------
--------- ------
-
--小结
本文介绍了 fastify-frame-guard 这个 npm 包，它是专门为 fastify 框架设计的一个防范 Clickjacking 的模块，可以为网站增加 X-Frame-Options 的响应头、Content-Security-Policy 的响应头、Set-Cookie 的响应头、防止 CSRF 攻击等功能。在前端开发中，网站安全性很重要，fastify-frame-guard 可以帮助我们有效防范 Clickjacking 攻击。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60065f91238a385564ab6fc0