前言
@nebular-dev/security 是一个前端安全框架，可以帮助开发者快速实现常见的前端安全功能，如 CSRF 防御、XSS 防御等。本文将详细介绍该框架的使用方法。
安装
@nebular-dev/security 是一个 npm 包，可以通过 npm 安装：
npm install @nebular-dev/security
使用
初始化
在你的项目中，首先需要引入该框架的初始化代码：
-- -------------------- ---- -------
------ - ---------------- - ---- ------------------------
-----------
-------- -
-- ---
--------------------------
-------------- -
-- ----------
------ -
----- ---
--
----- -
------- --------
----- --------------
--
------ -
------- -------
----- ----------
--
--
---
-- ---
--
--
------ ----- --------- --上面的代码中，我们初始化了一个基本的角色访问控制系统。guest 角色只可以访问一些公共的页面，如首页、登录页等；user 角色可以访问 guest 角色的所有页面，以及受保护的页面；admin 角色可以访问 user 角色的所有页面，以及一些只有管理员可以访问的页面。
你可以根据你的项目需求来修改这个访问控制系统。
CSRF 防御
@nebular-dev/security 提供了一个名为 NbCsrfTokenModule 的模块，可以用于自动注入 CSRF token 到你应用的所有请求中。
该模块会自动向每一个 http 请求中添加一个名为 X-XSRF-TOKEN 的 header，以防范 CSRF 攻击。
使用方法如下：
- 引入模块
-- -------------------- ---- -------
------ - ----------------- - ---- ------------------------
-----------
-------- -
-- ---
------------------
-- ---
--
--
------ ----- --------- --- 发送 http 请求
你的每一个 http 请求都会自动附加 CSRF token，无需手动添加：
-- -------------------- ---- -------
------ - ---------- - ---- -----------------------
-------------
------ ----- -------------- -
------------------- ----- ----------- --
------------------- -------- -
------ ------------------------------- ---------
-
-XSS 防御
@nebular-dev/security 提供了一个名为 NbXssModule 的模块，可以用于自动防御 XSS 攻击。
该模块会自动对所有输入进行 XSS 过滤，并且在输出到 HTML 中时自动转义。
使用方法如下：
- 引入模块
-- -------------------- ---- -------
------ - ----------- - ---- ------------------------
-----------
-------- -
-- ---
------------
-- ---
--
--
------ ----- --------- --- 在 template 中使用
你的所有输出都会自动进行 XSS 过滤和 HTML 转义，无需手动进行：
<p>{{ message }}</p>匿名用户处理器
@nebular-dev/security 提供了一个名为 NbNoopAuthProvider 的匿名用户处理器，可以于实现对未登录用户的统一处理。
使用方法如下：
- 引入模块
-- -------------------- ---- -------
------ - ------------------ - ---- ------------------------
-----------
-------- -
-- ---
--
---------- -
-- ---
- -------- --------------- --------- ------------------- ------ ---- --
--
--
------ ----- --------- --- 实现
NbRoleProvider接口
处理器需要实现 NbRoleProvider 接口，以返回未登录用户的角色。
import { NbRoleProvider } from '@nebular/security';
@Injectable()
export class AnonymousRoleProvider implements NbRoleProvider {
getRole() {
return Promise.resolve('guest');
}
}- 在组件中使用
你可以在任何需要处理匿名用户的组件中注入 NbAclService，以访问处理器所提供的匿名角色：
-- -------------------- ---- -------
------ - ---------- ------ - ---- ----------------
------ - ------------ - ---- ------------------------
------------
--------- -------------------
--------- -
------- ----------------------------------
------- ----------------------------------
--
--
------ ----- -------------------- ---------- ------ -
------- ----------- --------
------------------- ----------- ------------- --
---------- -
--------------------------------------------------- -- -
--------------- - --------
---
-
-结语
@nebular-dev/security 是一个强大的前端安全框架，可以帮助开发者快速实现前端安全功能。本文详细讲述了该框架的使用方法，希望本文可以对你实现前端安全功能带来帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066bcc967216659e2448a3