随着 web 开发的不断发展，用户对于网站安全性的要求也越来越高，为此，在开发过程中需要使用各种安全性工具进行网站的保护。本文介绍一个常用的 npm 包 ngx-appsecurity 的使用教程，希望对前端工程师有所帮助。
ngx-appsecurity 是什么?
ngx-appsecurity 是一个 Angular 框架下的安全性 npm 包。它旨在帮助开发人员轻松实现多方面的安全性特性比如内容策略、安全头、 CORS 和 CSP 等。
如何安装 ngx-appsecurity？
在开始前，请确保您已安装了最新版本的 Node。
- 在控制台中输入如下代码并执行:
npm install ngx-app-security --save
- 在您的 app.module.ts 文件中添加 ngx-appsecurity：
------ - -------------------- - ---- ------------------
-----------
------------- -
------------
--
-------- -
--------------
------------------------------
---------------------- ------------ -------
---
--
---------- --------------
--
------ ----- --------- - -在上述代码中，我们将 contentSecurityPolicy 设置为了 "default-src 'self'"，这是我们在协议安全性中常用的设置。您可以根据自己的需求进行设置。
这里使用了 forRoot() 方法，将其输入了 app.module.ts 文件进行使用。
支持的选项：
- contentSecurityPolicy
- Cross Origin Resource Sharing (CORS)
- Strict Transport Security (HSTS)
- Referrer Policy
Content Security Policy (CSP)
Content Security Policy 就是网络安全协议， 用于防止和减轻跨站点脚本（XSS）攻击、恶意注入以及其他安全漏洞攻击。
在 ngx-appsecurity 中，contentSecurityPolicy 选项可以设置为文本字符串，也可以设置为一个函数，用于返回值。
-----------
------------- -
------------
--
-------- -
--------------
------------------------------
---------------------- ----- -- -
-- ------------- --- ------------------ -
------ ------------ ------ ------------------------
-
------ ------------ --------
-
---
--
---------- --------------
--
------ ----- --------- - -上述代码为我们提供了一个高度可定制的 contentSecurityPolicy 选项，以便我们可以根据当前请求的信息动态地计算文本字符串。
Cross Origin Resource Sharing (CORS)
CORS 是一种机制，允许网页向不同的域请求服务。CORS 机制允许您在任意域名的脚本中执行某个指定域名的脚本，实现跨域操作。
ngx-appsecurity 使得 CORS 设置变得非常简单。只需要在 app.module.ts 文件中设置 allowedOrigins 和 allowedHeaders 选项即可。例如：
------ - -------------------- - ---- ------------------
-----------
------------- -
------------
--
-------- -
--------------
------------------------------
----- -
--------------- --------------
--------------- -----------------
-
---
--
---------- --------------
--
------ ----- --------- - -上述代码允许来自localhost的 ajax 或者 http 属性的请求访问。而且加上 Authorization 属性的请求也是被允许的。
Strict Transport Security (HSTS)
HTTP Strict Transport Security，简称 HSTS，是一个安全策略，通过 HTTP 响应头告诉浏览器仅使用 HTTPS 访问网站。
一般情况下，HSTS 台配置为 30 天或更长时间。
在 app.module.ts 文件中设置 HSTS 的配置选项：
-----------
------------- -
------------
--
-------- -
--------------
------------------------------
----- -
------- ---------
------------------ ----
-
---
--
---------- --------------
--
------ ----- --------- - -上述代码中，指定 maxAge 为 365 天，includeSubDomains 为 true，表示该策略通常应用于整个域名链。
Referrer Policy
Referrer Policy 是一个用于控制 HTTP 请求中 Referrer 消息头的属性。
匹配类型为这样的 HTML 链接避免了在链接 Referrer 中包含查询字符串。
app.module.ts 文件中此配置可根据需要添加：
-----------
------------- -
------------
--
-------- -
--------------
------------------------------
--------------- ----------------------------
---
--
---------- --------------
--
------ ----- --------- - -上述代码设置 referrerPolicy 为 "no-referrer-when-downgrade"， 确保浏览器仅当安全等级没有降低时，Referrer 消息头才可视为除了Web页面外的自由上下文。
示例代码：
我们来看一个示例，使用 ngx-appsecurity 实现对静态资源的保护（防止被非法请求），该示例中，我们使用 ngx-appsecurity 实现 contentSecurityPolicy 选项。
------ - -------------------- - ---- ------------------
-----------
------------- -
------------
--
-------- -
--------------
------------------------------
---------------------- -
---------- --------------
----------- -
----------- -----------
--------- ---------- -------------------
------- ---------- -------- ------------------
--
--
---
--
---------- --------------
--
------ ----- --------- - -上述代码中，我们设置了一个 reportUri，这表示违反策略时会将违规信息发送到服务端的 '/report-uri' 地址。
我们还定义了三个常用的指令，defaultSrc，imgSrc 和 styleSrc。defaultSrc 禁止引用任何外部资源，而 imgSrc 仅允许从本域，data URI 和 cdn.example.com 引入图片资源。
styleSrc 指示允许内联样式，并防止外部样式表执行，以避免攻击有效负载。
总结：
本文介绍了 Angular 框架下的安全性 npm 包 ngx-appsecurity。我们详细讲解了如何使用 ngx-appsecurity 实现多种安全特性，包括内容策略、CORS 和 CSP 等。
希望本文对前端工程师有所帮助，并能够帮助您优化网站的安全性表现。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/60055eb881e8991b448dc6a5