导航栏汉堡包中引导映像的 CSP 错误答案

【问题标题】：CSP error for bootstrap image in navbar hamburger导航栏汉堡包中引导映像的 CSP 错误
【发布时间】：2022-02-11 05:41:26
【问题描述】：

我刚刚向我的 Django 站点添加了内容安全策略。除了我不知道它们是什么的图像的这两个错误之外，我一切都正常工作

我花了很多时间试图弄清楚，直到我注意到引导汉堡菜单上的图标消失了

在 CSS 中我发现这告诉我这一定是导航栏中的图像导致了这个错误。

我在网上找到了一些解决方法，但它们存在安全漏洞，我想正确地解决这个问题我该如何解决这个问题。

CSP

CSP_STYLE_SRC = ("'self'", 
    "https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css",
    ...
    
    )
  
CSP_SCRIPT_SRC = ("'self'",
    "https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/",
    ...

    )

【问题讨论】：

标签： django twitter-bootstrap bootstrap-5

【解决方案1】：

从代码 sn-ps 看来，您正在使用 https://django-csp.readthedocs.io/en/latest/configuration.html 包来处理 CSP 指令的设置，这对于 Django 项目来说是一个不错的选择。

最安全的情况是，如果您允许从同一域加载内容并严格禁止任何其他资源，但这并不实际。一个足够好的策略是如果你允许'self'并且只允许像https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css这样的显式路径。 https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/、cdn.jsdelivr.net 或 https: 之类的值可能会引起关注，因为它们将允许使用范围广泛的资源。

在您的情况下，img-src 指令或 default-src 可能需要 data:，如果您没有明确的 img-src 指令值，这将作为后备。

https://csp-evaluator.withgoogle.com/ 可以为您当前的 CSP 配置和您正在使用的特定域提供更多安全建议。

【讨论】：

允许data: 工作。但是我可以下载图像并将其存储在本地并通过 css/html 将其链接起来。这会是更好的方法吗？
是的，从技术上讲，这将是一个更好的选择，而不是允许:data。