什么是 PWA
PWA (Progressive Web App) 是指一种能够像应用程序一样运行在移动设备和浏览器上的 Web 应用程序，它具有以下特点：
- 快速加载
- 可离线使用
- 安全性高
- 意图识别能力
- 提供推送通知服务
PWA 将 Web 应用程序与本地应用程序相比，更具有可访问性、可发现性和可共享性等优势。目前已有很多大型互联网公司将其业务转向 PWA。
PWA 安全性漏洞
虽然 PWA 具有很多优点，但其也有一些安全性问题：
1. 非安全连接
当用户通过非安全连接访问 PWA 时，很容易出现 CSRF 和其他类型的攻击。为了避免这种情况，必须强制要求用户使用安全连接来访问 PWA。
<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">
2. Web Storage 安全性问题
大多数 PWA 应用程序都涉及到缓存，因此必须小心地处理 Web Storage。攻击者可以使用 localStorage.getItem（）来访问缓存中的敏感数据。为了避免这种情况，使用 Cookie 和 HTTP-Only 标志，或将 Web Storage 限制为当前域。
// 设置 cookie document.cookie = 'session=32charactevaluelongString'; // 确保带有 HTTP-Only 标志 Set-Cookie: session=32charactevaluelongString; HttpOnly;
3. 劫持攻击
PWA 应用程序可以为客户端推送通知，当用户被引导到恶意站点时，攻击者就可以伪造和发送这些通知。为了避免这种情况，可以使用 HTTPS 协议并在客户端浏览器上签署权限。
-- -------------------- ---- -------
-- ------
-------------------------------------------------------------- -
------ ---------------------------------------------------- -
-- ------------
-- ----- -
------ ----
-
-- --------
------ ---------------------------
---------------- ----
---
---
--------------------- -
------------------------- ------------- -----
-------------------- -
-- ------------------------ --- --------- -
------------------------ --- ------------- --- ---------
- ---- -
--------------------- -- --------- -- ------ ---
-
---4. 安全登录
PWA 应用程序需要使用安全登录机制，避免登陆和密码泄露。可以使用 OAuth2 或 OpenID Connect 等协议。
-- -------------------- ---- ------- -- ------ -- ----- - --- ------- --------- ----------------- ------- ----------------------- --- ----------------- ----------- ---------------- ------ ------- ---- ------- -- ------ -------------- -------- ------------- -------------------- -- ---- ---
防范措施
为了防止 PWA 应用程序的安全漏洞，我们可以采取以下措施：
- 使用安全连接
- 控制 Web Storage 的可访问范围
- 使用 HTTPS 协议以及签署权限
- 使用安全登录机制
总结
PWA 应用程序的出现给 Web 和移动应用程序带来了新的体验，但其也存在一些安全性问题。为了避免 PWA 应用程序被攻击和侵犯，我们需要对其漏洞保持警惕并采取相应的安全防范措施。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/646195b4968c7c53b02f08da