现代框架默认防御XSS,但危险API仍需注意
React、Vue 等现代前端框架默认对用户输入进行转义处理,但在某些场景下仍需谨慎:
安全 API:
- React:
props.children、textContent - Vue:
{{ }}插值(默认转义)
危险 API(需手动确保安全):
- React:
dangerouslySetInnerHTML - Vue:
v-html指令
示例:
// 安全
<div>{userInput}</div>
// 危险(需确保 userInput 已清洗)
<div dangerouslySetInnerHTML={{ __html: userInput }} />最佳实践:
- 尽量避免使用危险 API
- 如需使用富文本,必须使用 DOMPurify 等库进行清洗
- 限制可使用的 HTML 标签和属性白名单