Bootstrap 5 次违反内容安全政策

Question

我有一个使用 Bootstrap 5 的网站，其中包含以下输入标签：

<input class="form-check-input ms-1" id="validated" name="validated" type="checkbox" checked>

包含表单检查输入 class 导致客户端生成错误消息：

Refused to load the image 'data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10l3 3l6-6'/%3e%3c/svg%3e' because it violates the following Content Security Policy directive: "img-src 'self' www.w3.org".

有人可以告诉我为什么这被阻止吗？我在CSP中尝试了data://www.w3.org、http://www.w3.org、*.w3.org等所有排列，none似乎让客户满意.

这与 Chrome 和 Edge 客户端的情况相同。

Answer 1

Bootstrap CSS stylesheet 包含 .form-check-input class 数据：-Url 图片：

.form-check-input:checked[type=checkbox] {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10l3 3l6-6'/%3e%3c/svg%3e");
}
.form-check-input:checked[type=radio] {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2' fill='%23fff'/%3e%3c/svg%3e");
}
.form-check-input[type=checkbox]:indeterminate {
  background-color: #0d6efd;
  border-color: #0d6efd;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10h8'/%3e%3c/svg%3e");
}

要允许这些图像，您必须将 data: scheme-source 添加到 img-src 指令中。

Answer 2

您还可以使用 Webpack 将 SVG 提取到单独的文件中。例如，参见 https://github.com/charlesroelli/bootstrap-webpack-csp-compat-config，具体是文件 webpack.config.js:

modules.exports = {
  ...,
  module: {
    rules: [
      {
        mimetype: 'image/svg+xml',
        scheme: 'data',
        type: 'asset/resource',
        generator: {
          filename: 'icons/[hash].svg'
        }
      }
    ]
  }
};

Bootstrap 5 次违反内容安全政策

Content Security Policy violation with Bootstrap 5

content-security-policy

bootstrap-5