在最小的Web应用程序上启用内容安全策略

Question

我是CSP的新手，我的目标是启用最简单的CSP标头。

基于阅读spec和MDN docs的经验，我认为我的应用程序应该可以运行，但是不幸的是，Chrome Canary v70没有运气。

我设置了minimal repo进行复制。你能看到我哪里出问题了吗？

Answer 1

原来，我对细节有些误解了。我将在此处发布我的解决方案，以防它帮助同一条船上的其他人。

我的目标是为启用了CSP的React SPA提供服务。该应用程序碰巧使用了Material-UI，后者使用了JSS，后者注入了内联样式-当然，默认情况下，CSP会阻止这些样式。

因为这是用于前端的静态SPA，并且修改HTTP标头不在SPA的范围之内，所以我在Web服务器上生成了一个随机数。随机数被注入到CSP HTTP标头以及与JSS expects一致的index.html标记中。

好处是CSP保护着SPA，我们不必使用unsafe-inline逃生舱口。缺点（但很小）是index.html现在是动态的，无法缓存。但是，由于文件已经很小（<1kb），因此CSP的好处似乎值得我们权衡。