Angular Service Worker能否处理JWT令牌？Spartacus+Hybris场景方案咨询

背景说明 #

我们的Spartacus前端应用将JWT令牌存储在浏览器本地存储中，该令牌用于Spartacus与后端Hybris之间的所有API调用。
当前流程：
注：仅登录用户可在浏览器中查看该令牌，业务担忧在于若令牌被窃取，攻击者可通过其他客户端调用API。
计划参考IETF浏览器端OAuth应用规范（第6.4.2节）优化令牌安全机制。

疑问解答 #

1. Spartacus如何调用Service Worker？ #

Spartacus基于Angular构建，直接复用Angular原生Service Worker集成逻辑即可：

• 通过Angular CLI执行ng add @angular/pwa添加Service Worker支持，生成的ngsw-config.json用于配置缓存规则和API路由拦截范围。
• Angular会自动完成Service Worker的注册与激活，所有符合配置规则的Hybris API请求都会被Service Worker自动拦截处理，无需在Spartacus代码中额外编写调用逻辑。

2. 是否需要凭证？凭证是否仍会暴露？ #

• 需要凭证：Service Worker拦截请求后，需从安全存储位置获取JWT并添加到请求头。这里必须放弃本地存储，改用带HttpOnly、Secure、SameSite=Strict标记的Cookie存储令牌（IETF规范推荐方案）。
• 凭证不会暴露：HttpOnly Cookie无法通过前端JS访问，从根源避免XSS窃取风险；Service Worker运行在独立于页面的上下文，可安全读取Cookie并注入请求头，令牌全程不会在前端代码或页面环境中暴露。

3. Angular官方Service Worker能否解决该问题？ #

完全可以：

• Angular官方Service Worker具备完整的请求拦截与代理能力，可接管Spartacus与Hybris之间的所有API调用。
• 结合HttpOnly Cookie存储令牌的方案，可彻底解决本地存储令牌易被窃取的问题，完全符合IETF规范对浏览器端OAuth应用的安全要求。

实现方案建议 #

1. 后端Hybris配置调整 #

• 修改OAuth令牌发放逻辑：将JWT令牌以HttpOnly、Secure、SameSite=Strict的Cookie形式返回前端，不再通过响应体返回给前端存入本地存储。
• 配置CORS规则：确保Hybris允许来自Spartacus域名的跨域请求携带Cookie，在CORS配置中设置Access-Control-Allow-Credentials: true，并明确指定允许的Origin。

2. 前端Spartacus+Angular配置 #

• 集成Angular Service Worker：执行ng add @angular/pwa，修改ngsw-config.json将Hybris的API路径加入dataGroups，确保所有API请求被Service Worker拦截。
• 移除本地存储令牌逻辑：删除Spartacus中原本将JWT存入localStorage/sessionStorage的代码，调整认证拦截器，不再从本地存储读取令牌（请求头注入由Service Worker处理）。
• 开启请求凭证：在Spartacus的HTTP请求全局配置中设置withCredentials: true，确保请求携带Cookie。

3. 自定义Service Worker逻辑（可选） #

若需要更精细的请求控制，可扩展Angular Service Worker：

• 在Service Worker脚本中添加拦截逻辑，自动从Cookie提取JWT令牌，注入Authorization: Bearer <token>请求头。
• 实现令牌自动刷新：当Service Worker检测到令牌过期响应时，自动触发刷新令牌请求，无需前端页面介入。

4. 安全加固补充 #

• 强制HTTPS：全站启用HTTPS，避免Cookie在传输过程中被窃听。
• 配置CSP策略：限制脚本、资源的加载来源，降低XSS攻击风险。
• 缩短令牌有效期：在Hybris端配置较短的令牌过期时间，降低令牌泄露后的影响范围。

内容的提问来源于stack exchange，提问作者Karthik