前言
Progressive Web App(PWA) 是现代 Web 开发的一项重要技术。使用 PWA 可以使 Web 应用更加接近于原生应用的体验，包括快速的页面响应，离线访问和系统推送通知等功能。然而，随着 PWA 的流行，安全问题也日益凸显，尤其是客户端代码可能会受到 XSS 攻击的威胁。 Content Security Policy (CSP) 是一种常见的 Web 安全技术，可以提供有效的防护措施。本文将介绍如何使用 CSP 来保护 PWA 程序代码的安全，包括 CSP 的概念、实现和示例代码。
什么是 Content Security Policy
Content Security Policy(CSP)是一种 Web 安全策略，旨在减少 XSS（跨站脚本攻击）等攻击的影响。 CSP 可以帮助将 Web 应用程序中可能引起风险的资源（如脚本、样式和图像等）与外部来源分离，从而防止攻击者使用这些资源劫持 Web 应用程序。
CSP 通过设置 HTTP 响应头来实现。 以下是一个最小配置的例子：
Content-Security-Policy: default-src 'self'
这个示例告诉浏览器只有来自应用程序自己的资源才是可信的（即 same-origin）。
CSP 指令
CSP 指令表明了一组允许客户端请求的源，以及该源所允许的访问（如允许脚本执行，允许内联脚本或允许各种类型的数据来源）。
这里列出一些常用的 CSP 指令：
default-src限制与页面有关的所有资源的来源script-src限制可信脚本的来源style-src限制样式表的来源font-src限制字体的来源img-src限制图像的来源connect-src限制 AJAX 调用和 WebSocket 的来源child-src限制框架的来源
使用 Content-Security-Policy 头来设置 CSP 是一种轻量级协议，以原文形式在 HTTP 头中传输。
PWA CSP 安全策略
下面介绍几种常用的 PWA CSP 安全策略：
禁止内联脚本
内联脚本是一种常见的 XSS 攻击方式。为防止此类攻击，我们可以使用 Content-Security-Policy 来禁止内联脚本的使用。
Content-Security-Policy: script-src 'self' 'unsafe-inline';
上述示例指定了只允许来自同源的脚本，但有时我们会使用内联脚本或 eval 函数，此时可以使用 'unsafe-inline' 或 'unsafe-eval' 指令允许这些行为。
注意：使用 'unsafe-inline' 和 'unsafe-eval' 会降低安全等级，需要根据实际情况慎重考虑。
白名单
使用白名单是一个安全的做法，即只允许特定的资源请求。以下是一个限制仅允许从上游 API 获取资源的示例：
Content-Security-Policy: default-src 'self'; connect-src 'self' my-apiserver.com;
在上述示例中，只允许从 'self' 和 'my-apiserver.com' 请求。其他源的资源将被阻止。
降级处理
在服务无法满足要求时，服务应该能够执行降级处理，即自动更改响应以使页面显示正常。下面是一个例子：
Content-Security-Policy: default-src 'self'; script-src 'self' 'unsafe-inline' cdn.jsdelivr.net;
上述示例表示该页面允许使用 <script> 标记内的内联脚本，使用自身源和安全cdn.jsdelivr.net内部信任资源。如果 CDN 失效，程序仍可运行，但使用内联脚本。
示例代码
下面给出一个使用 PWA 的 CSP 安全策略的示例代码。实现情况包括禁止内联脚本、启用白名单限制资源来源、降级处理：
-- -------------------- ---- -------
--------- -----
----- ----------
------
----- ----------------
---------- --- ---------------
--------
-- ---------------- -- ---------- -
------------------------------- -------- -- -
------------------------------------------
-------------- -------------- -
-------------------------- ------------ ---------- ---- -------- --------------------
----------------- ----- -
---------------------------- ------------ --------- -----
---
---
- ---- -
--------------------- ------- --- --- -------------
-
---------
----- ------------------ ------------------
----- ---------- ---------------- -------------------- --------------
----- ----------------- ---------------- ----------------
----- --------------- ---------------------------- ---------------- -----------------
----- ------------------ ---------- --- --- ---------
----- ----------------------------------- --------------
----- -------------------------------------------- ----------------
----- --------------------------------- ----------------
----- ----------------------------- --------------
----- ------------------ ------------------
----- -------------- ---------------------
------- ----------------------------------------------------------
--------
-------- ------------- -
-----------
----- ----------
----- ------
--
-
-------- ----------- -
-----------
----- --------
----- ------
--
-
---------
-------
------
---------- --- ---------
------ --- --- ------
--------- --- ---------- ------ --------------
---------------
---- --------------- ----------
------- -----------------------------------
------- ---------------------------------
-------
-------在 index.html 中，我们使用 Content-Security-Policy 指令来限制脚本，样式和图像源。 我们使用的默认源 'self' ，并且禁止了内联脚本，只允许使用名为 cdn.jsdelivr.net 的外部脚本源，同时只允许来自本身的请求。 如果某个源不在白名单中，它将无法加载。
总结
本文为您介绍了如何使用 CSP 来保护 PWA 程序代码的安全。 CSP 可以限制不安全的资源，减少 XSS（跨站脚本攻击）等攻击的影响。您可以根据您的实际需求和风险情况，定制化设置 CSP 指令来保证您的应用程序安全。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64cb36bc5ad90b6d041f46b8