在插件中使用第三方库时出现CSP错误

开发
1

经过多次尝试和不同的方法，我终于成功加载了一个第三方库供我的插件使用。

该库位于 public/javascripts/some-library.js。

在我的控制器中，我可以通过以下方式成功加载脚本：

loadScript("/plugins/my-plugin/javascripts/some-library.js")

在某些情况下，该库会在该文件中创建 Blob 并将其分配给正在使用的变量。例如：

var A=URL.createObjectURL(new Blob(['\n\tsome code snippet...],{type:"application/javascript"}))

每当我尝试在我的插件代码中使用该库时，我都会收到：

Refused to load the script 'blob:http://localhost:4200/f33a6788-a853-4286-883a-48cb8e2c9cc1' because it violates the following Content Security Policy directive: "script-src http://localhost:4200/assets/ etc etc...

有什么最好的方法可以解决这个问题？

感谢任何帮助和建议！

2

如果将 http://localhost:4200 添加到 CSP 中会怎样？

3

我确实试过了，但没有任何改变 :

4

blob:http://localhost:4200怎么样？

5

我也试过了，但这对 CSP 来说是一个无效的声明 :confused:

6

对于偶然发现此问题的人来说，添加到 csp script src 的正确行是 blob:

7

等等！您不需要在开发中实现 CSP，您不会面临攻击者的风险？

它还可能阻止一些开发者工具。

只需关闭此设置：

IMG_0197
IMG_0197781×155 22.5 KB

很简单。

等到您的插件在生产暂存服务器上正常运行并经过测试后再处理这个麻烦。

8

我确实正处于准备生产阶段，所以这是最后一个需要解决的麻烦。而且，我不喜欢拖延这些事情，尤其是当需要弄清楚它们是否可能是潜在的交易破坏者，以及我是否需要寻找其他途径时 :man_surfing:

9

是的，但你应该在具有真实互联网地址的生产暂存服务器上处理 CSP 配置。

localhost 不是互联网地址！:slight_smile::wink: 它甚至不是 https……