第三方脚本治理与引入策略（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`加载并使用白名单通信。统一报告与聚合端点可用，异常上报采样与处置流程明确。