5 分钟 JS 安全编码 - XSS与CSRF防御（第21节）

惊落一身雪 · 2025-1-24 22:46:37

5 分钟 JS 说第21节：JavaScript 安全

引言

在当今的 Web 开发中，JavaScript 是不可或缺的一部分。然而，随着其广泛应用，安全题目也日益凸显。本文将带你深入了解 JavaScript 安全的核心概念，包括常见的漏洞类型（如 XSS 和 CSRF）以及怎样通过安全编码实践来防范这些威胁。无论你是初学者还是资深开发者，都能从中获得实用的知识和技能。

1. 什么是 JavaScript 安全？

JavaScript 安满是指通过一系列技术和实践，确保 JavaScript 代码在运行时不会对用户、应用步伐或体系造成危害。它包括防止恶意代码注入、掩护用户数据隐私以及确保应用步伐的完整性。
1.1 为什么 JavaScript 安全云云重要？

用户数据掩护：JavaScript 通常用于处理用户输入和敏感数据，安全题目大概导致数据泄漏。
应用步伐完整性：恶意代码大概粉碎应用步伐的功能，乃至导致体系瓦解。
信任与合规性：安全漏洞大概损害用户对应用步伐的信任，并违反相关法律法规（如 GDPR）。

2. 常见安全漏洞

2.1 XSS（跨站脚本攻击）

2.1.1 什么是 XSS？

XSS 是一种攻击者通过注入恶意脚本到网页中，从而在用户浏览器中实行这些脚本的攻击方式。它通常分为以下三种类型：

存储型 XSS：恶意脚本被永世存储在服务器上（如数据库），并在用户访问时实行。
反射型 XSS：恶意脚本通过 URL 参数等方式通报给服务器，并立即反射回用户浏览器实行。
DOM 型 XSS：恶意脚本通过修改 DOM 布局直接在浏览器中实行。

2.1.2 XSS 的危害

盗取用户 Cookie 或会话信息。
篡改网页内容，诱导用户进行恶意使用。
传播恶意软件。

2.1.3 防御步调

输入验证：对用户输入进行严酷验证，过滤或转义特别字符。
输出编码：在将数据输出到页面时，使用适当的编码方式（如 HTML 实体编码）。
使用 Content Security Policy (CSP)：通过 CSP 限制脚本的泉源，防止恶意脚本实行。

2.1.4 完整案例代码

目录布局

/project
├── index.html # 主页面
├── script.js # JavaScript 逻辑
└── styles.css # 样式文件

复制代码

index.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>XSS 防御示例</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>XSS 防御示例</h1>
<form id="commentForm">
<label for="comment">输入评论：</label>
<textarea id="comment" name="comment"></textarea>
<button type="submit">提交</button>
</form>
<div id="comments"></div>
<script src="script.js"></script>
</body>
</html>

复制代码

script.js

// 转义 HTML 特殊字符
function escapeHTML(str) {
return str.replace(/&/g, '&')
.replace(/</g, '<')
.replace(/>/g, '>')
.replace(/"/g, '"')
.replace(/'/g, ''');
}
// 处理表单提交
document.getElementById('commentForm').addEventListener('submit', function(event) {
event.preventDefault();
const commentInput = document.getElementById('comment').value;
const safeComment = escapeHTML(commentInput); // 转义用户输入
const commentsDiv = document.getElementById('comments');
commentsDiv.innerHTML += `<p>${safeComment}</p>`; // 安全输出
});

复制代码

styles.css

body {
font-family: Arial, sans-serif;
margin: 20px;
}
form {
margin-bottom: 20px;
}
textarea {
width: 100%;
height: 100px;
}
#comments {
margin-top: 20px;
}

复制代码

运行结果：

2.1.5 案例表明

输入验证：用户输入通过 escapeHTML 函数转义，防止恶意脚本注入。
输出编码：转义后的内容安全地插入到 DOM 中，制止了 XSS 攻击。

2.2 CSRF（跨站哀求伪造）

2.2.1 什么是 CSRF？

CSRF 是一种攻击者通过伪造用户哀求，使用用户的身份实行未经授权的使用的攻击方式。比方，攻击者可以诱使用户点击一个链接，从而在用户不知情的情况下发起转账哀求。
2.2.2 CSRF 的危害

实行未经授权的使用（如转账、修改密码）。
盗取用户数据。

2.2.3 防御步调

使用 CSRF Token：在表单或哀求中添加一个随机天生的 Token，服务器验证该 Token 是否匹配。
SameSite Cookie：设置 Cookie 的 SameSite 属性为 Strict 或 Lax，防止跨站哀求携带 Cookie。
验证 Referer 头：检查哀求的泉源是否合法。

2.2.4 完整案例代码

目录布局

/project
├── index.html # 主页面
├── server.js # 服务器逻辑
└── csrf-token.js # CSRF Token 生成逻辑

复制代码

index.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSRF 防御示例</title>
</head>
<body>
<h1>CSRF 防御示例</h1>
<form id="transferForm" action="/transfer" method="POST">
<input type="hidden" id="csrfToken" name="csrfToken">
<label for="amount">转账金额：</label>
<input type="number" id="amount" name="amount" required>
<button type="submit">提交</button>
</form>
<script src="csrf-token.js"></script>
</body>
</html>

复制代码

csrf-token.js

// 生成 CSRF Token
function generateCSRFToken() {
return crypto.randomBytes(32).toString('hex');
}
// 设置 CSRF Token
const csrfToken = generateCSRFToken();
document.getElementById('csrfToken').value = csrfToken;

复制代码

server.js

const express = require('express');
const bodyParser = require('body-parser');
const cookieParser = require('cookie-parser');
const crypto = require('crypto');
const app = express();
app.use(bodyParser.urlencoded({ extended: true }));
app.use(cookieParser());
// 存储 CSRF Token
const csrfTokens = new Set();
// 生成 CSRF Token
app.get('/csrf-token', (req, res) => {
const token = crypto.randomBytes(32).toString('hex');
csrfTokens.add(token);
res.json({ csrfToken: token });
});
// 处理转账请求
app.post('/transfer', (req, res) => {
const { csrfToken, amount } = req.body;
if (!csrfTokens.has(csrfToken)) {
return res.status(403).send('CSRF Token 验证失败');
}
csrfTokens.delete(csrfToken);
res.send(`转账成功：${amount} 元`);
});
app.listen(3000, () => {
console.log('服务器运行在 http://localhost:3000');
});

复制代码

运行结果：

2.2.5 案例表明

CSRF Token：每次表单提交时天生一个唯一的 Token，服务器验证该 Token 是否有效。
防御机制：防止攻击者伪造哀求，确保哀求来自合法用户。

3. 安全编码实践

3.1 输入验证与输出编码

输入验证：确保用户输入符合预期格式（如邮箱、电话号码）。
输出编码：在将数据输出到页面时，使用适当的编码方式防止 XSS。

3.2 使用 HTTPS

通过 HTTPS 加密数据传输，防止中心人攻击。

3.3 定期更新依靠库

及时更新第三方库，修复已知的安全漏洞。

3.4 使用安全的 API

制止使用已弃用或不安全的 API（如 eval）。

// 示例：避免使用 eval
const userInput = 'alert("XSS")';
eval(userInput); // 危险操作！
// 替代方案
const safeEval = new Function('return ' + userInput);
safeEval(); // 结果为：无操作

复制代码

4. 案例对比

案例XSSCSRF攻击方式注入恶意脚本伪造用户哀求目标盗取用户数据或篡改页面实行未经授权的使用防御步调输入验证、输出编码、CSPCSRF Token、SameSite Cookie危害程度高中到高

5. 总结

JavaScript 安满是 Web 开发中不可忽视的重要环节。通过明白常见的漏洞类型（如 XSS 和 CSRF）并接纳有效的防御步调，开发者可以显著提拔应用步伐的安全性。希望本文的内容能帮助你更好地应对 JavaScript 安全挑战，成为一名更精彩的前端开发者！

6. 互动与分享

如果你觉得这篇文章对你有帮助，接待分享给更多的开发者：希望这篇文章能帮助你更好地明白和应用 JavaScript 正则表达式。如果你有任何题目或发起，接待在评论区留言！

分享到 Twitter
分享到QQ空间
分享到知乎
分享到微博

上一篇：JavaScript 性能优化 - 代码优化与内存管理
下一篇：JavaScript 构建博客网站

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。

		自动登录	找回密码
密码			立即注册

5 分钟 JS 安全编码 - XSS与CSRF防御（第21节）

本帖子中包含更多资源

0 个回复

快速回复

楼主热帖

标签云

浏览过的版块