Web应用中的XSS防护实践-优快云博客

本文链接：https://blog.youkuaiyun.com/exlink2012/article/details/144524078

什么是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>; // 危险!
}