随着移动设备的普及，PWA（Progressive Web App）应用越来越被广泛使用。PWA应用能够在浏览器、桌面、移动端等各种场景内提供高质量、类似原生应用的用户体验，其最大的优点是可以在不安装应用的情况下就可以访问应用的功能。
然而，随着技术的进步，PWA应用也遭遇了越来越多的安全风险，尤其是中间人攻击，也称“MITM攻击”，使得用户使用这类应用时面临越来越大的风险。在中间人攻击中，攻击者会在用户的设备和服务端之间插入恶意代码，以获取敏感信息，使得用户的个人信息、账号密码等都处于被盗窃的状态。
此时，Service Worker 出现了，它是一种运行在 Web Worker 线程上的 JavaScript 脚本，被广泛用于 PWA 应用中，可以提供离线缓存、消息推送、前端请求拦截等功能。
因此，在这篇文章中，将深入了解 Service Worker 以及如何使用它来防止中间人攻击。
Service Worker 简介
Service Worker 是一种运行在浏览器背后的，脱离网页运行环境，不直接和 DOM 接触的 JavaScript 脚本。它作为一个代理可以拦截我们发起的所有网络请求，可以对任何请求执行操作，例如将请求转发到另一个服务器，或者使用缓存响应。
在工作原理上，Service Worker 是一种非常轻量级的线程，可以在后台运行，而不会对应用程序的平滑运行造成不良的影响。它不能直接访问 DOM，但可以通过 postMessage 将消息发送到页面的 JavaScript 代码。
Service Worker 主要用于以下三方面：
离线缓存：实现网页离线访问，提高用户体验。
本地资源缓存：将重要的资源缓存在本地，提高加载速度。
消息推送：可以在后台给用户发送系统通知。
中间人攻击的原理
在 HTTP 协议中，浏览器和服务端之间的通信没有受到任何安全机制的保护，因此就存在一种攻击方式 - 中间人攻击（MITM攻击）。它的原理是当用户的数据请求在发送到服务器之前，别人想办法插入自己的代码并使用户的请求暴露给它们自己，于是就可以获取用户的敏感信息，获得用户的个人信息、账号密码等。
使用 Service Worker 防止中间人攻击
在 PWA 应用中，可以使用 Service Worker 来防止中间人攻击。Service Worker 可以作为一个代理程序记录每个请求和响应，它可以修改，删除，拦截和重定向请求。对于 HTTPS 协议，其通信由 SSL/TLS 加密，能够较好的防止中间人攻击，但 HTTP 协议无法保护通信，因此需要在 Service Worker 中实现一些特殊的处理。
在 Service Worker 中防止中间人攻击需要实现以下几个步骤：
1. 实现 HTTPS 协议
首先，为了防止中间人攻击，所有应用都应该使用 HTTPS 协议。它能够有效的保护通信，并防止攻击者窃取用户敏感信息。
2. 实现证书校验
服务器通常会有一个数字证书以提供安全保障，具体实现方式如下。
发送请求前，Service Worker 会发送跨域请求（
OPTIONS）到预定义的地址上，在该地址下这个 Service Worker 预存的公钥、可用的数字签名算法（如：SHA-256）和支付方背书。Server 会响应这个请求，在 Response 数据中返回自身的公钥和数字签名。
Service Worker 使用传回的公钥，验证自己收到的数字签名和数字证书是否有效。我们可以自己实现一组工具函数完成签名和验证的过程，或者使用像 node-forge 这样的框架来简化实现。如果签名通过，则 Service Worker 完成身份验证并继续获取所需资源。
3. 缓存响应
为了减少对服务器的请求，我们可以将资源保存在本地，Service Worker 可以用来缓存网络请求的响应。如下是如何为我们的应用添加缓存响应功能。
------------------------------ --------------- -
------------------
--------------------------------------------------- -
----------------
-- ---------- -
------ ---------
-
-------------- --- - ---- --
--- ------------ - ----------------------
------ -------------------------
------------------ -
-------------------------
------------ -- --------------- --- --- -- ------------- --- -------- -
------ ---------
-
----------
--- --------------- - -----------------
-------------------------------------------- -
------------------------ -----------------
---
------ ---------
-
--
--
--
---通过以上的代码，我们就能够设置并响应 Service Worker 缓存请求的响应，从而实现缓存 response 对象。
总结
本文介绍了 Service Worker 可以如何实现 PWA应用的免中间人攻击。虽然 HTTPS 协议已经具有一定的安全性保障，但是对于中间人攻击而言，安全性可能无法绝对保证。而 Service Worker 的出现，使我们有了一个可以在前端处理中间人攻击的利器。
我们使用 Service Worker 来缓存请求和响应，并在 Service Worker 内部验证服务器证书的方法就与传统的防止中间人攻击的机制不同。通过这种方法，我们可以在前端实现一套简单而高效防止中间人攻击的机制。
PWA 应用日益普及，保障这些应用的安全性日益被重视，逐渐向着更为智能化的发展道路迈进。在创建或是对 PWA 应用进行优化的过程中，如果需要保证数据的安全性，Service Worker 定能为您助力。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/64aa6e3848841e9894694e10