文件上传在生产环境中违反 Angular 内容安全策略

Question

我有一个 Angular 应用程序，用户可以在其中上传和提交图像，在本地工作时一切正常，但是一旦我构建了我的项目并托管了它，当我尝试通过 file input 上传图像时，我遇到了违反内容安全策略的错误，并且显示图像的预览。

这是我遇到的错误示例:

Refused to load the image 'data:image/png;base64,/9j/...' because it violates the following
Content Security Policy directive: "default-src https: 'unsafe-eval' 'unsafe-inline'".
Note that 'img-src' was not explicitly set, so 'default-src' is used as a fallback.

用户使用表单内的文件输入选择文件后立即显示错误，预览图像显示为断开的链接。

我尝试在我的 index.html 元标记中实现一些 CSP，如下所示:

<meta http-equiv="Content-Security-Policy" content="script-src 'self'; style-src 'self'; img-src 'self';" />

但它没有用，您可以推荐他们的一些文档以了解我的问题吗？

如果您需要任何代码或更多信息，请告诉我，老实说，我不确定首先导致问题的原因。

Answer 1

也许这能帮上忙？ https://github.com/Azure/static-web-apps/issues/2还有这个https://learn.microsoft.com/en-us/azure/static-web-apps/routes#default-headers 我无法访问 azure，所以我只能提供资源，但也许通过遵循这些资源，您将能够更改 csp 以满足您的需要。