我要招人

前端/移动开发面试题更新 2026-08-05

在一个面向企业级的 AI 网关项目中，作为前端开发者，你会采取哪些具体措施来防范跨站脚本攻击（XSS）？请给出你的方案。

前端/移动开发风险判断安全意识技术原理

考察说明

考查候选人在真实项目中防范 XSS 的实操能力和安全意识。

回答思路

  1. 【回答框架 1】XSS 攻击的本质是未信任数据被注入到页面并执行，前端防护的核心原则是所有外部输入都不可信，输出必须按上下文编码。具体措施包括：输入验证，对用户提交的数据进行白名单校验，过滤或拒绝非法字符；输出编码，在 HTML、属性、URL、CSS、JavaScript 等不同上下文中使用正确的编码方式。
  2. 【回答框架 2】合理使用浏览器内置安全机制：设置 Content-Security-Policy（CSP）限制脚本来源，开启 X-XSS-Protection（虽然现代浏览器已废弃），配置 HttpOnly 和 Secure 属性的 Cookie，减少 Cookie 被脚本读取的风险。
  3. 【回答框架 3】在框架层面，React、Vue 等框架默认会对文本内容进行转义，但 v-html、dangerouslySetInnerHTML 等 API 会绕过转义，必须谨慎使用，且使用前对内容进行消毒。对于富文本内容，建议使用经过验证的库如 DOMPurify 进行净化。
  4. 【回答框架 4】针对企业级 AI 网关项目，特别要注意聊天记录、模型输出等动态内容。这些内容可能包含用户输入或 AI 生成，展示时同样要遵循上述原则。同时，建立安全编码规范和代码审查流程，将 XSS 防护落实到开发全过程中。
  5. 【关键点 1】对用户输入进行白名单校验。
  6. 【关键点 2】针对不同上下文进行输出编码。
  7. 【关键点 3】启用 CSP 等浏览器安全机制。
  8. 【关键点 4】慎用 v-html、dangerouslySetInnerHTML 等不安全 API。
  9. 【关键点 5】使用 DOMPurify 等工具消毒富文本。
  10. 【易错点 1】只做前端过滤而忽略输出编码，攻击可绕过。
  11. 【易错点 2】使用 innerHTML 拼接动态内容。
  12. 【易错点 3】忽略属性上下文和 URL 上下文中的编码。