PWA，即渐进式 Web 应用，是一种能够像原生应用一样提供用户体验的 Web 应用程序。其中，强调“渐进式”即意味着其支持各类浏览器，并逐步增强功能，可以与本地应用一样，提供离线访问、网络交互和设备访问等优秀体验。而其对安全性的要求也相对较高，因此本文主要讲述在 PWA 开发中遇到的安全问题及相应的解决方案。
安全问题
安全威胁
PWA 是一种新兴的网络应用，与其他 Web 应用一样，也面临诸多安全威胁。其中，可能面临 CSRF 攻击、XSS 攻击、数据泄露等问题。
数据传输安全性
在网络传输数据时，需要保证其安全性，以免被窃取或被篡改。通过 HTTPS 协议传输数据是保障数据安全的主流方式。但是，在一些国内环境下，很多企业并不采用 HTTPS，这可能导致数据在传输过程中被拦截、窃取和篡改。
缓存安全性
PWA 在提供用户体验方面的一个重要设计原则，是允许在应用没有互联网连接的情况下在线浏览供用户范围内使用的信息。这大大提升了用户体验，并且使用浏览器的缓存来实现此功能。但是这也增加了应用的安全性问题，缓存数据可能被攻击者窃取。
解决方案
安全威胁
针对 CSRF 攻击和 XSS 攻击等问题，需要在编写代码时采用相应的攻击技术对策措施。例如，在反射型 XSS 攻击中，需要使用 encode html等方式过滤用户的输入。可以参考 OWASP 的资料，提高自身的安全意识和代码编写技能。
数据传输安全性
针对数据传输安全性问题，可以建议采用 HTTPS 来保证通讯安全。并采用更严格的安全机制，防范侵害不仅如上所述的 CSRF 和 XSS 攻击，还需避免 session jacking、DNS spoofing 和中间人攻击等攻击方式，以保证数据传输安全。
缓存安全性
针对缓存安全性问题，需要加强应用的认证和权限等控制机制。在读取缓存时，需根据用户的身份进行验证。同时，在创建缓存时，也要采取不同的策略，不同的缓存策略需要做好不同类型的验证。隐私敏感数据不能长时间存储在客户端，过期后要及时清除，避免泄露敏感数据。
示例代码
下面代码是针对缓存安全性问题的校验示例代码：
-- -------------------- ---- -------
-----------
-------- ------------------- -
-- --------- -- ------- -
------ ------------------------------------ ------- -
------ ------------------------------ ---------- -
-- ---------- -
------ ----------------
-
----- --- ---------------
---
---
-
----- --- ------------- --- ------
-
------
-------- ------------- ------ -
-- --------- -- ------- -
------ ------------------------------------ ------- -
------ -------------- --- -----------------
---
-
----- --- ------------- --- ------
-
------
-------- ------------ -
-- --------- -- ------- -
------ -------------------------
-
----- --- ------------- --- ------
-
--------
-------- --------------- -
----------------
------ -----
-
---------
-------- --------------- -
--- ---------- - -----
-- ----------------- -
---------- - ------ -------------
-
-- ------------ -
-------------
-- ---- -- ------- -
----- --- --------------------------
-
-
-
------
-------------------------------- -- -
-------------------------------
------------
----------------------------------------- - ------
-------------- -- -
-------------------
---结论
PWA 具有传统 Web 应用不能提供的离线体验，但同时其也面临安全性问题。本文介绍了在 PWA 开发中可能遇到的安全问题，以及如何通过一些措施进行解决。这些措施可以从不同角度提高 PWA 的安全性和功能性。开发人员和使用 PWA 的企业应该高度重视，加强安全意识和采取相应的措施。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/676d27f982fcee791c652b7f