6.前端安全之 XSS 与 CSRF
输入“/”快速插入内容
6.前端安全之 XSS 与 CSRF
6.前端安全之 XSS 与 CSRF
用户8691用户86912025年9月9日修改
核心思想
前端安全的核心在于“信任”问题。我们永远不能信任任何来自用户（或第三方）的输入。XSS 和 CSRF 是两种最常见、也最具代表性的 Web 攻击方式，它们都巧妙地利用了网站对用户或浏览器行为的“信任”。
一、XSS (Cross-Site Scripting) 跨站脚本攻击
1. 攻击原理
攻击者将恶意的 JavaScript 脚本注入到网页中，当其他用户访问该网页时，这些恶意脚本就会在用户的浏览器中执行，从而窃取用户信息（如 Cookie）、操作用户行为、或在页面上展示恶意内容。
本质： 恶意代码在受害者的浏览器上“无中生有”地执行了。
2. 攻防演练：一个简单的评论区
【攻】攻击演示
假设一个网站的评论区，后端直接将用户提交的评论内容插入到页面的 HTML 中。
易受攻击的代码 (前端渲染)
代码块
// 从后端获取评论列表
const comments = [
{ author: '小明', text: '这是一条正常的评论。' },
{ author: 'Hacker', text: '<script>alert("XSS Attack! Your cookie is: " + document.cookie)</script>' }
];
// 前端直接将内容渲染到页面
const commentContainer = document.getElementById('comment-list');
comments.forEach(comment => {
// 危险操作：直接使用 innerHTML 渲染未经过处理的用户输入
commentContainer.innerHTML += `<div><strong>${comment.author}:</strong> ${comment.text}</div>`;
});
攻击效果
当任何用户浏览这个评论区时：
1.
浏览器在渲染 Hacker 的评论时，会遇到 <script> 标签。
2.
浏览器会立即执行其中的 JavaScript 代码。
3.
页面会弹出一个警告框，显示当前用户的 Cookie。攻击者可以将 alert 换成更复杂的代码，将 Cookie 发送到自己的服务器，从而盗用用户身份。
【防】防御策略
核心防御思路是：“数据”永远是“数据”，绝不能让它变成“代码”。