angular - 向 Angular Service Worker 响应添加标头

Question

来自服务人员的一些响应违反了 CSP，我可能需要添加此标头：

内容安全策略 = “连接源代码 *;”

对服务人员的所有回复，如此处 和此处所述。

如何使用 Angular PWA 将响应标头添加到服务人员响应？

Answer 1

您可以使用 http 拦截器在一个地方拦截任何类型的 http 请求和响应。它也适用于服务人员。

请在此处找到详细说明。

https://angular.io/api/common/http/HttpInterceptor

例子：

intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    return next.handle(request).pipe(
    ...          
));
}

Answer 2

响应头不需要在服务工作者返回的缓存响应上设置，解决方案是在服务器上为 SW 脚本的响应设置特殊的 CSP 头。即，当浏览器请求 ngsw-worker.js（Angular SW 脚本的默认名称）时，服务器应将特殊的 CSP 标头（例如 Content-Security-Policy: connect-src *）附加到该响应。