前端网络安全必修 2 XSS 和 CSP
内容提要
文章讲解XSS与CSP。XSS分反射型和储存型，攻击者注入恶意脚本可盗取Cookie，防范需对HTML特殊字符转义并使用安全DOM操作。CSP是白名单机制，通过HTTP头或meta标签限制资源来源，拦截未授权脚本，作为防御XSS的最后一道防线。
延伸解读
XSS 的两种类型与攻击目标
文章将 XSS 分为反射型和储存型。反射型通过错误信息或搜索结果等即时回显注入脚本，储存型则将恶意脚本提交到服务器并保存，所有访问特定页面的用户都会中招。两者常见目的是盗取用户 Cookie，例如利用 img 标签的 onerror 事件将 document.cookie 发送到攻击者服务器。理解类型差异有助于在开发中针对性排查输入输出点。
HTML 转义与安全 DOM 操作
HTML 中 < 和 > 等符号有特殊含义，直接插入用户输入会被解析为标签。文章建议对 HTML 特殊字符进行转义，如将 < 转为 <，并可使用实体编号。在 JavaScript 中，innerHTML 赋值需格外小心，而 innerText 插入的是纯文本，可安全使用 <>。React 的 dangerouslySetInnerHTML 属性名也明确提示了风险。这些是防范 XSS 的基础措施。
CSP 作为最后一道防线
CSP 通过白名单机制限制资源来源，可拦截未授权的行内脚本和外部脚本。文章示例中，设置 script-src 'self' https://trusted.cdn.com 后，注入的恶意行内脚本或非白名单外部脚本都会被浏览器拒绝执行，并在控制台报错。CSP 可通过 HTTP 头或 meta 标签配置，常用选项包括 default-src、script-src 等，关键词如 'none'、'self'、'unsafe-inline' 需加单引号。
CSP 配置的注意事项
文章提醒，CSP 配置不当可能导致资源加载失败，例如 Tauri 应用生产环境丢失样式就是由于 CSP 策略。此外，report-uri 不能在 meta 标签中使用，default-src 不能覆盖 base-uri、form-action 等选项。虽然 CSP 能有效防御 XSS，但它只是最后一道防线，不能替代输入转义和安全 DOM 操作。在富文本编辑器等场景中，仍需综合防护。
Q&A
什么是XSS攻击？它有哪些常见类型？
XSS（跨站脚本攻击）是指攻击者向网页注入恶意脚本，当其他用户访问时脚本执行，从而盗取Cookie等。常见类型有反射型XSS和储存型XSS。反射型通过错误信息或搜索结果等反射执行；储存型将恶意脚本提交到服务器并储存，所有访问特定页面的用户都会遭到攻击。
如何防范XSS攻击？
防范XSS需要对用户输入进行严格转义，将HTML特殊字符如<、>转义为<、>，并使用安全的DOM操作（如innerText而非innerHTML）。在复杂项目中难免疏漏，因此还需要CSP作为最后一道防线。
CSP是什么？它如何防御XSS？
CSP（内容安全策略）是一个白名单机制，通过HTTP头或meta标签限制网页可加载的资源来源。当XSS注入行内脚本或外部恶意脚本时，如果不符合CSP规则，浏览器会拦截并拒绝执行，从而防御XSS。
如何设置CSP？有哪些常用选项？
可以通过HTTP头设置：Content-Security-Policy: default-src https://cdn.example.net; object-src 'none'，或使用meta标签。常用选项包括default-src、script-src、style-src、img-src、connect-src、font-src、media-src、object-src、report-uri等。资源列表可使用'none'、'self'、'unsafe-inline'、'unsafe-eval'等关键词。
CSP如何拦截XSS注入的恶意脚本？
假设CSP设置为script-src 'self' https://trusted.cdn.com，未允许'unsafe-inline'。当攻击者注入行内脚本或非白名单外部脚本时，浏览器会拦截并报错，如“Refused to execute inline script”，恶意代码无法执行。
HTML转义中实体名称和实体编号有什么区别？
实体名称如<表示小于号，实体编号如<也表示小于号，两者渲染结果相同。实体编号可通过charCodeAt()获取，例如“网”.charCodeAt()返回32593，网即表示“网”字。
