在我们的网络应用程序(Angular)中,我们需要相机来扫描二维码。然而,一段时间以来,我们看到了一个错误
无法构建“Worker”:访问“blob:https://somehin.ch/38a37229-2d47-4b12-a8f1-0080265163f9”处的脚本被文档的内容安全策略拒绝。
与一些用户。
为了解决此问题,我们将“blob:”添加到 CSP script-src。
令我们惊讶的是,这导致某些用户的浏览器变得非常慢(在某些情况下,按下按钮后响应时间长达 30 秒)。这并不是发生在所有用户身上,而是发生在少数用户身上。大多数问题发生在 Chromium 浏览器中。删除 cookie 在每种情况下都提供了解决方案。
我们尝试通过从 script-src 中删除“blob:”并添加
来解决该问题worker-src 'self' blob: *.something.ch
但是一旦我们将“blob:”添加到 CSP 中,我们就会遇到性能问题。有人对此有解释吗?
问题如下:我们的代码中已经通过第三方库有了一个 Web Worker,但我们没有意识到。然而,这之前被缺失的 CSP 条目阻止了,我们没有注意到。
使用新的 CSP 条目,现在允许 Web Worker 运行,这导致具有许多表条目的页面加载时间非常长。删除cookie和本地存储,将表中的条目数重置回10,问题就消失了。
更糟糕的是,我们的 IT 部门在我们的测试系统中覆盖了 CSP,这使我们无法重现该问题。
结论:永远不要相信客户支持,也不要相信我们的 IT 测试系统!