TypeScript 安全：SQL 注入与 XSS 攻击防护

您的代码处于瞄准镜下：为什么 TypeScript 安全不是可选项，而是必需品

您是否曾想过，当用户在您网站的搜索框中输入的不只是“Python 书籍”，而是类似 '; DROP TABLE users; -- 这样的内容时，会发生什么？如果您的 TypeScript 后端没有为此做好准备，您面临的将不仅仅是错误，而是整个数据库的丢失。听起来像恐怖电影的情节？欢迎来到 Web 开发的现实世界，在这里 TypeScript 安全 不是一种时髦的功能，而是代码的基本卫生。

在本文中，我们不会进行枯燥的说教。我们将剖析任何 Web 应用程序的两大主要敌人：SQL 注入 和 XSS（跨站脚本攻击）。您将了解黑客如何攻击您的项目，最重要的是，如何通过真实示例和最佳实践，将您的 TypeScript 代码变成一座坚不可摧的堡垒。

SQL 注入：攻击者如何与您的数据库“对话”

想象一下，您的应用程序就像一位彬彬有礼的礼宾员，会执行客人的任何请求。如果客人要求：“请展示 5 号房间”，礼宾员就会展示。但如果客人要求：“请展示所有房间，并把保险箱钥匙给我”呢？在没有检查的情况下，礼宾员也会照做。SQL 注入 的工作原理正是如此：攻击者将他们的命令“嵌入”到普通的用户输入中。

假设您有一个简单的查询，用于按名称查找用户：

// ❌ 危险：有漏洞的代码\nconst userName = req.body.username; // 用户输入了 "admin"\nconst query = `SELECT * FROM users WHERE name = '${userName}'`;\ndb.execute(query);

看起来无害？现在想象一下，用户输入了：admin' OR '1'='1。查询变成了：

SELECT * FROM users WHERE name = 'admin' OR '1'='1'

恭喜！您刚刚把系统中所有用户的列表交给了攻击者。如果他想删除点什么？很简单：admin'; DROP TABLE users; -- — 您的数据库就不复存在了。

如何防护：参数化查询——您的盾牌

在 TypeScript 中 防范 SQL 注入 的首要规则是：永远不要将用户数据直接拼接到查询字符串中。请使用参数化查询（预编译语句）。它们将 SQL 代码与数据分开，数据库会将用户输入仅视为数据，而不是命令。

使用 pg 库（用于 PostgreSQL）的示例：

// ✅ 安全：参数化查询\nimport { Pool } from 'pg';\n\nconst pool = new Pool({\n  connectionString: process.env.DATABASE_URL\n});\n\nasync function getUserByName(userName: string): Promise<any> {\n  const query = 'SELECT * FROM users WHERE name = $1';\n  const result = await pool.query(query, [userName]);\n  return result.rows;\n}\n\n// 使用\nconst userInput = req.body.username; // 即使输入是 "admin' OR '1'='1"\nconst user = await getUserByName(userInput);\n// 数据库会将其视为查找具有这个奇怪名称的用户\nconsole.log(user); // [] — 未找到任何结果

同样的原则也适用于其他 ORM，例如 Prisma 或 TypeORM。它们默认使用参数化查询，这使得 TypeScript 安全 成为一项内置功能。

// ✅ 安全：使用 Prisma\nimport { PrismaClient } from '@prisma/client';\n\nconst prisma = new PrismaClient();\n\nasync function findUser(name: string) {\n  return prisma.user.findUnique({\n    where: { name: name } // Prisma 会自动转义输入数据\n  });\n}

XSS 攻击：当您的网站开始播放他人的代码

如果说 SQL 注入攻击的是数据库，那么 XSS（跨站脚本攻击） 攻击的是您的用户。想象一下，攻击