Web应用中的XSS防护实践

server/2024/12/21 9:18:36/

什么是XSS攻击？

XSS(Cross-Site Scripting)跨站脚本攻击是一种常见的网络安全漏洞。攻击者通过在网页中注入恶意脚本代码,当用户浏览这些页面时,恶意代码会在用户的浏览器中执行,从而盗取用户信息、篡改页面内容或进行其他恶意操作。

XSS攻击的主要类型

1. 反射型XSS

非持久化,需要欺骗用户点击特制的URL
恶意代码存在URL参数中
服务器将恶意代码"反射"回浏览器执行

2. 存储型XSS

持久化攻击,恶意代码存储在服务器中
常见于留言板、评论等用户输入内容的地方
影响面更大,所有访问页面的用户都会受到攻击

3. DOM型XSS

纯客户端攻击,不经过服务器
利用JavaScript动态修改DOM时的漏洞
常见于前端框架使用不当的场景

防御措施

1. 输入过滤

// 对用户输入进行过滤
function filterXSS(input) {return input.replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;').replace(/'/g, '&#x27;').replace(/\//g, '&#x2F;');
}

2. 输出编码

// HTML编码
function htmlEncode(str) {const div = document.createElement('div');div.appendChild(document.createTextNode(str));return div.innerHTML;
}

3. CSP内容安全策略

<!-- 在HTTP头部或meta标签中设置CSP -->
<meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self' 'unsafe-inline' 'unsafe-eval';">

4. HttpOnly Cookie

// 服务端设置HttpOnly标记
response.setHeader("Set-Cookie", "session=123; HttpOnly");

5. 验证码机制

防止自动化XSS攻击
限制提交频率
人机识别验证

框架层面的防护

Vue.js

// Vue默认会转义模板内容
new Vue({template: '<div>{{ userInput }}</div>' // 安全
})// 使用v-html时要格外小心
<div v-html="userInput"></div> // 危险!

React

// React默认会转义JSX内容
function App() {return <div>{userInput}</div>; // 安全// 使用dangerouslySetInnerHTML要格外小心return <div dangerouslySetInnerHTML={{__html: userInput}}></div>; // 危险!
}