使用ng-bootstrap组件触发Content Security Policy错误的合规解决咨询

你的CSP拦截是因为ng-bootstrap组件使用了data URI形式的内联SVG作为背景图，而当前的img-src指令仅允许'self'和指定nonce，未包含data:前缀，浏览器因此拒绝加载这些SVG资源。

有两种可行方案，可根据你的CSP严格程度选择：

方案1：微调CSP指令（简单快捷） #

在img-src规则中添加data:，允许加载data URI格式的图片：

img-src 'self' 'nonce-5e3808cd' data:;

注意事项 #

• 该调整不会大幅降低CSP安全性：ng-bootstrap的内联SVG是可信的静态资源，本身不包含可执行脚本，不存在注入风险。
• 确保你的CSP其他指令（如style-src）与该调整无冲突。

方案2：覆盖CSS使用本地SVG（更严格的CSP） #

若不想放宽CSP规则，可通过自定义CSS替换ng-bootstrap的内联SVG：

1. 将组件用到的SVG内容保存为独立文件，例如assets/icons/accordion-arrow.svg，内容如下：

<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='#212529' stroke-linecap='round' stroke-linejoin='round'>
  <path d='M2 5L8 11L14 5'/>
</svg>

2. 在全局CSS文件中覆盖对应组件类：

.bs-accordion-btn-icon {
  background-image: url('/assets/icons/accordion-arrow.svg') !important;
}

优势 #

• 完全符合严格CSP要求，无需添加data:指令。
• 可统一管理所有组件图标，方便后续自定义样式。

额外检查 #

部分新版本ng-bootstrap可能提供禁用内联SVG的配置项（如模块导入时的参数），你可查看官方文档确认是否有相关选项，开启后组件会自动使用外部图标资源而非内联data URI。

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