点击Bootstrap 5单选按钮触发CSP报告模式报错：无法加载SVG图片

点击Bootstrap样式的单选按钮时，Firefox、Chrome等浏览器控制台会弹出以下CSP报错：

[Report Only] 拒绝加载图片'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'，原因是违反了Content Security Policy指令："default-src 'self'"。注意未显式设置'img-src'，因此使用'default-src'作为 fallback。

对应的测试代码如下：

<!DOCTYPE html>
<html>
<head>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
</head>
<body>
  <div class="form-check">
    <input class="form-check-input" type="radio" name="flexRadioDefault" id="flexRadioDefault1">
    <label class="form-check-label" for="flexRadioDefault1">
    Default radio
    </label>
  </div>
</body>
</html>

问题根源 #

Bootstrap的form-check-input类会通过CSS的background-image，用data URI格式的SVG渲染单选按钮的选中状态样式。但你的页面CSP仅设置了default-src 'self'，且未单独配置img-src规则（此时会继承default-src的限制），而'self'并不允许加载data URI资源，因此触发报错。移除该类后，Bootstrap的自定义样式不再生效，也就不会加载这个SVG资源，报错自然消失。

可行解决方案 #

方案1：调整CSP规则，允许data URI资源

在你的CSP配置中，把data:添加到img-src或default-src指令里，比如：

default-src 'self' data:;

或者单独指定img-src：

img-src 'self' data:;

这样既能保留Bootstrap的单选按钮样式，又能符合CSP规则。

方案2：自定义CSS覆盖Bootstrap样式

如果不想修改CSP规则，可以用纯CSS替换掉依赖data URI的Bootstrap样式，比如：

.form-check-input:checked {
  background-color: #0d6efd; /* 保留Bootstrap默认主色调 */
  border-color: #0d6efd;
  background-image: none; /* 移除原有的SVG背景 */
  position: relative;
}
/* 自定义选中标记 */
.form-check-input:checked::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 60%;
  height: 60%;
  background-color: #fff;
  border-radius: 50%;
}

把这段CSS加到页面中，就能替代原有的SVG背景，同时避开CSP限制。

内容的提问来源于stack exchange，提问作者tirenweb