npm 包 fastify-referrer-policy 使用教程

阅读时长 6 分钟读完

在前端项目开发中,安全性一直是一个重要但容易被忽视的方面。其中之一便是设置正确的 Referrer-Policy,避免恶意攻击或数据泄露。而 fastify-referrer-policy 正是一个 npm 包,可以帮助我们简单快捷地设置 Referrer-Policy。

什么是 Referrer-Policy?

Referrer (引荐),是指在网络请求中,请求头部中的一个字段,用来标识该请求是从哪个页面跳转而来的。而 Referrer-Policy (引荐策略),则定义了浏览器如何传递 Referrer 头部信息。

在安全性方面,正确设置 Referrer-Policy 可以避免以下几个问题:

  • 隐藏 HTTP 请求的来源,避免恶意攻击;
  • 隐藏用户浏览器的历史记录,保护用户隐私;
  • 隐藏站点的外部链接来源,避免数据泄露;

安装 fastify-referrer-policy

fastify-referrer-policy 配置

在 fastify 项目中,通过注册 fastify-referrer-policy 插件,然后通过 referrerPolicy 选项来设置 Referrer-Policy。

-- -------------------- ---- -------
----- ------- - ---------------------

---------------------------------------------------- -
  --------------- -------------
---

-------------------- ----- -- -
  -- ----- -
    ------------------- ----- ------- ---------
    -------
  -
  
  ------------------- ----- -------- ------------------------
--

以上代码中,我们设置了 Referrer-Policy 为 same-origin,意味着仅允许跨域请求头部携带与当前页面具有同域名的 Referrer 信息。

fastify-referrer-policy 可选配置项

fastify-referrer-policy 还提供了一些可选配置,可以根据需求进行设置。

policy

policy 可以配置 Referrer-Policy 的值,可以是以下任意一项:

  • no-referrer: 不传递 Referrer 头部信息;
  • no-referrer-when-downgrade: 在 HTTPS 网站的内部跳转时,传递完整 Referrer 信息;外部跳转时,不传递 Referrer 信息;
  • same-origin: 仅传递与当前页面同域名的 Referrer 信息;
  • strict-origin: 仅传递完整的同域名 Referrer 信息,但不包括子路径;
  • origin: 传递完整 Referrer 信息,但仅包括协议、域名和端口号,不包括子路径;
  • strict-origin-when-cross-origin: 在页面内跳转时,传递完整 Referrer 信息,但不包括子路径;外部跳转时,不传递 Referrer 信息;
  • unsafe-url: 始终传递完整 Referrer 信息。

例如,我们要设置 strict-origin-when-cross-origin

excludedRoutes

excludedRoutes 可以设置排除路由的空白列表,列表中的路由不会被 fastify-referrer-policy 插件处理 Referrer-Policy。例如:

表示 /assets/* 路由下的请求不会被更改 Referrer-Policy。

fastify-referrer-policy 示例

-- -------------------- ---- -------
----- ------- - ---------------------

---------------------------------------------------- -
  ------- ----------------------------------
  --------------- ----------
---

---------------- ----- ---- -- -
  ----------------------
  ----------
    --------- -----
    ------
    ------
      ------------ --------------
    -------
    ------
      --------- -----------
    -------
    -------
  ---
---

--------------------- ----- ---- -- -
  ----------------------
  ----------
    --------- -----
    ------
    ------
      ------------ ------------
    -------
    ------
      --------- ---------
      -- ------------- --------
    -------
    -------
  ---
---

-------------------- ----- -- -
  -- ----- -
    ------------------- ----- ------- ---------
    -------
  -
  
  ------------------- ----- -------- ------------------------
--

在以上示例中,我们定义了两个路由://about。此时,访问 http://localhost:3000/,页面 Referrer-Policy 会被设置成 strict-origin-when-cross-origin;而访问 http://localhost:3000/about,因为该路由排除了忽略列表 /api/*,所以该页面 Referrer-Policy 保持默认值。

来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/60065f92238a385564ab7010

纠错
反馈