第三方脚本治理与引入策略（SRI/Trusted Types/异步沙箱）最佳实践

一、SRI与CSP头<link rel="preconnect" href="https://cdn.example.com" crossorigin>

<script src="https://cdn.example.com/lib.min.js" integrity="sha384-Base64Hash" crossorigin="anonymous" async></script>

Content-Security-Policy: default-src 'none'; script-src 'self' https://cdn.example.com 'strict-dynamic'; object-src 'none'; base-uri 'none'; require-trusted-types-for 'script'; report-to csp-endpoint

Report-To: {"group":"csp-endpoint","max_age":10800,"endpoints":[{"url":"https://report.example.com/csp"}]}

二、Trusted Types策略// @ts-ignore

const policy = (window as any).trustedTypes?.createPolicy('default', {

createScriptURL: (s: string) => s,

createHTML: (s: string) => s

})

三、异步沙箱加载第三方<iframe id="third" src="/third.html" sandbox="allow-scripts" referrerpolicy="no-referrer"></iframe>

const frame = document.getElementById('third') as HTMLIFrameElement

const origin = 'https://third.example.com'

function send(msg: { type: string; payload?: any; version: number }) {

frame.contentWindow?.postMessage(msg, origin)

}

function onMessage(ev: MessageEvent) {

if (ev.origin !== origin) return

const m = ev.data as { type: string; payload?: any; version: number }

if (typeof m?.type !== 'string' || typeof m?.version !== 'number') return

}

window.addEventListener('message', onMessage)

四、白名单与报告聚合const allow = new Set(['https://cdn.example.com','https://third.example.com'])

function allowedSrc(src: string): boolean { try { const u = new URL(src); return allow.has(u.origin) } catch { return false } }

五、验收清单SRI与`crossorigin=anonymous`启用；CSP中开启`require-trusted-types-for 'script'`并限制来源。Trusted Types策略存在且受控；第三方通过`sandbox`加载并使用白名单通信。统一报告与聚合端点可用，异常上报采样与处置流程明确。