前端内容安全事件采集与自动防护（CSP报告联动）最佳实践

前端内容安全事件采集与自动防护（CSP报告联动）最佳实践概述在仅报告模式下收集与聚合CSP违规事件，并按阈值自动更新策略或阻断不可信源，可形成闭环的内容安全治理。响应头配置（报告模式）Reporting-Endpoints: csp="https://example.com/reports/csp"

Content-Security-Policy-Report-Only: default-src 'self'; report-to=csp

聚合与阈值触发class CsProtect {

store = new Map<string, number>()

threshold = 50

add(src: string) { this.store.set(src, (this.store.get(src) || 0) + 1) }

risky(): string[] { return Array.from(this.store.entries()).filter(([_, c]) => c >= this.threshold).map(([s]) => s) }

}

动态策略更新function updateCspPolicy(riskySources: string[]): string {

const base = ["default-src 'self'", "script-src 'self'", "style-src 'self' 'unsafe-inline'" ]

const block = riskySources.map(s => `blocked:${s}`)

return [...base, ...block].join('; ')

}

自动阻断流程async function onCspBatch(reports: any[]) {

const p = new CsProtect()

for (const r of reports) p.add(r['csp-report']?.['blocked-uri'] || '')

const risky = p.risky()

if (risky.length > 0) await applyPolicy(updateCspPolicy(risky))

}

运维要点先以报告模式收集数据，达到阈值后再切换强制策略对误报进行例外管理与来源白名单将策略变更与CSP报告统一审计，支持回滚通过报告联动的动态策略与阻断流程，可持续提升前端内容安全防护效果。