---

title: CSP报告与Report-To聚合与监控最佳实践

keywords:

• CSP
• Report-To
• Reporting-Endpoints
• report-uri
• 违规上报
• 报告聚合

description: 结合Report-To与Reporting-Endpoints及legacy report-uri，构建CSP违规报告的统一采集与监控聚合，实现前端安全策略可观测。

categories:

• 文章资讯
• 技术教程

---

CSP报告与Report-To聚合与监控最佳实践

概述

通过配置CSP报告通道与服务端聚合，可及时发现前端策略违规与潜在威胁。

响应头配置

Reporting-Endpoints: csp="https://example.com/reports/csp"
Report-To: {"group":"csp","max_age":10800,"endpoints":[{"url":"https://example.com/reports/csp"}]}
Content-Security-Policy-Report-Only: default-src 'self'; report-to=csp; report-uri /csp-report

采集端点

type CspReport = { "csp-report": Record<string, any> }

async function collectCspReport(reqBody: string): Promise<boolean> {
  try {
    const body = JSON.parse(reqBody) as CspReport
    const item = body["csp-report"]
    return !!item && typeof item["blocked-uri"] === "string"
  } catch {
    return false
  }
}

聚合与告警

class CspAggregator {
  store: Map<string, number> = new Map()
  add(uri: string): void {
    const v = this.store.get(uri) || 0
    this.store.set(uri, v + 1)
  }
  top(n: number): [string, number][] {
    return Array.from(this.store.entries()).sort((a, b) => b[1] - a[1]).slice(0, n)
  }
}

运维要点

• 同时支持legacy report-uri与现代 Reporting-Endpoints
• 聚合违规来源并在阈值触发告警
• 将报告与安全日志统一入库并进行留存与分析

通过统一采集与聚合，可持续提升前端安全策略的可观测与迭代质量。