如何用TypeScript打造更安全的应用程序？

在当今应用程序安全至上的时代，开发安全的应用程序已不再是可选的，而是一种必要。TypeScript 以其强大的类型系统和在开发过程中捕捉错误的能力，有助于更自然地编写更安全的代码。然而，安全性不仅仅局限于语法和类型，而是涉及更广泛的方面。本文将探讨保护 TypeScript 应用程序的高级策略，从代码漏洞到运行时保护再到部署实践，本文将涵盖所有关键方面。

TypeScript 给 JavaScript 加上了静态类型，减少了常见的错误。不过，安全性还包括：

• 防止未授权的访问。
• 确保数据的完整性。
• 保护免受恶意代码的注入。
• 保护运行时行为的安全。

主要关注点包括，

• 编译时安全: 在运行时之前发现错误。
• 运行时保护: 因此，在运行时采取安全措施至关重要，因为TypeScript编译为JavaScript。

一些严格的编译设置

在 tsconfig.json 文件中设置严格模式：

    {
      "compilerOptions": {
        "strict": "严格",
        "noImplicitAny": "禁止隐式任意类型",
        "strictNullChecks": "严格的空值检查",
        "strictPropertyInitialization": "严格的属性初始化"
      }
    }

全屏，开启全屏，关闭全屏

• 为什么呢？ 这些选项是为了执行更严格的检验，防止出现未定义行为。

避免任何。

如果你过度使用 any 类型，就会让 TypeScript 的类型系统失效，

    let userData: any = fetchUser(); // 尽量不要这样做，因为会造成潜在的类型问题。

进入全屏，退出全屏

而是：

    type User = { id: number; name: string; };
    let userData: User = fetchUser();

按全屏按钮，再按退出按钮

即使使用 TypeScript，也应明确验证输入：

下面的函数用于验证用户输入是否只包含字母和数字。
function validateUserInput(input: string): boolean {
  const regex = /^[a-zA-Z0-9]+$/;
  return regex.test(input);
}

切换到全屏 退出全屏

• 为什么呢？ 这样可以避免 SQL 注入和 XSS 攻击。

运行时类型验证

可以使用类似io-ts这样的库来进行程序运行时验证。

    import * as t from "io-ts";

    const User = t.type({
      id: t.number,
      name: t.string,
    });

    const input = JSON.parse(request.body);

    if (User.is(input)) {
      // 可以安全使用
    }

点全屏，再退出全屏

a. 跨站脚本 (XSS)

TypeScript 本身并不清理数据。使用像 DOMPurify 这样的编码库来进行安全地渲染。

从 'dompurify' 导入 DOMPurify;
const sanitized = DOMPurify.sanitize(不安全的HTML);
文档.body.innerHTML = sanitized;

进入全屏；退出全屏

b. SQL 注入攻击

避免直接使用 SQL 查询。使用像 TypeORM 或 Prisma 这样的 ORM 工具

const user = await userRepository.findOne({ where: { id: userId } });
// 根据id从用户仓库中查找用户

全屏查看，退出全屏

a. OAuth 和 JWT 这两样

TypeScript可以帮助在认证过程中强制执行强类型：

    interface JwtPayload {
      userId: string;
      roles: string[];
    }

    const decoded: JwtPayload = jwt.verify(token, secret);

全屏模式, 退出全屏

基于角色的访问权限控制（RBAC）:

使用 TypeScript 枚举来设计角色相关的系统：

    类型 Role {
      Admin = "admin",
      User = "user",
    }

    函数 authorize(userRole: Role, requiredRole: Role): boolean {
      return userRole === requiredRole;
    }

全屏切换（切换到全屏/切换出全屏）

a. 类型安全的, API

可以利用诸如tRPC或者GraphQL之类的库，配合使用TypeScript，确保整个栈的类型安全：

    import { z } from "zod";
    import { createRouter } from "trpc/server";

    // 定义了一个名为 userRouter 的路由器，用于处理获取用户信息的查询
    const userRouter = createRouter().query("getUser", {
      // 查询的输入参数是一个对象，包含一个 id 字符串
      input: z.object({ id: z.string() }),
      // resolve 函数用于处理输入参数并调用 getUserById 函数获取用户信息
      resolve({ input }) {
        return getUserById(input.id);
      },
    });

进入全屏模式/退出全屏模式

b. CORS 及 HTTP 头部

配置合适的头部信息以防止CSRF：

app.use(cors({
  origin: "https://trusted-domain.com",
}));
// 设置允许的跨域请求来源为 'https://trusted-domain.com'.

切换到全屏模式 退出全屏模式

a. 审计与更新

定期检查依赖项。

运行 `npm audit` 命令

注意：npm audit 用于检查和审核项目中的安全问题。

全屏模式：进入/退出

更新为

npm update
运行这个命令来更新npm包

全屏 开/关

使用的类型

尽量使用带有类型声明的包，以减少由于使用不当引起的安全隐患。

可以使用像 ESLint 这样的带有安全插件的工具。

在项目中安装 eslint-plugin-security 依赖包，可以使用以下命令:

npm install eslint-plugin-security --save-dev

点击全屏切换

设置规则来标识不安全的情况或模式。

环境变量

不要直接在代码中写入敏感数据。使用 .env 文件来存储敏感信息：

定义一个常量 dbPassword，它的值是从环境变量 process.env.DB_PASSWORD 获取的。

点击全屏 点击退出全屏

最小化和混淆代码

使用 Webpack 这样的工具进行构建：

运行webpack命令以生产模式：webpack --mode production

全屏查看 退出全屏

设置日志和监控系统：

• 使用如Sentry这样的工具进行错误追踪。
• 监控应用日志，使用ELK（Elasticsearch, Logstash, Kibana，这三个工具分别负责数据的收集、处理和展示）。

确保 TypeScript 应用的安全需要多层次防护，从利用其强大的类型系统到整合运行时防护和安全部署实践。虽然 TypeScript 提供了构建更安全应用程序的坚实基础，但最终的安全性要求在开发到生产的每个阶段都需要保持警惕。

嘿！下回文章见！伙计！😄

略

我的个人主页：网址是https://shafayet.zya.me