npm 包 ngx-appsecurity 使用教程

阅读时长 8 分钟读完

随着 web 开发的不断发展，用户对于网站安全性的要求也越来越高，为此，在开发过程中需要使用各种安全性工具进行网站的保护。本文介绍一个常用的 npm 包 ngx-appsecurity 的使用教程，希望对前端工程师有所帮助。

ngx-appsecurity 是什么?

ngx-appsecurity 是一个 Angular 框架下的安全性 npm 包。它旨在帮助开发人员轻松实现多方面的安全性特性比如内容策略、安全头、 CORS 和 CSP 等。

如何安装 ngx-appsecurity？

在开始前，请确保您已安装了最新版本的 Node。

  1. 在控制台中输入如下代码并执行:

npm install ngx-app-security --save

  1. 在您的 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

纠错
反馈
相关推荐
精选内容