1 引言

在构建全栈应用程序的过程中，安全性的考量应始终贯穿整个开发周期。安全不仅仅是一个附加的考虑，而是构建可靠和可信产品的核心要素。您是否曾经深入思考过，为了保护您的产品，需要遵循哪些基本的安全原则？我们如何确保我们的应用程序不仅满足，而且超越了安全标准？实施这些原则的复杂性又如何？

在本文中，我将深入探讨前端和后端开发中的基本安全原则。我们将一起审视实施这些安全标准的实用步骤，并确保您的应用程序符合行业安全标准。

2 保护前端

2.1 输入验证和清理

确保对所有用户输入进行严格的验证和清理，以防止注入攻击，如 Cross-Site Scripting (XSS)。
使用 DOMPurify 库来清理将要插入到 DOM 中的用户输入。

// 使用 DOMPurify 清理用户输入
const cleanInput = (input) => DOMPurify.sanitize(input);

2.2 身份验证和授权

实施安全的身份验证方法，例如 OAuth 或 JSON Web Tokens (JWT)，以确保用户身份的真实性。
采用基于角色的访问控制（RBAC）来限制用户界面的某些部分，根据用户的角色显示不同的界面。

// 根据用户登录状态和角色创建路由
const createRoutes = (logged, role) =>
  createBrowserRouter([
    {
      path: "/dashboard",
      loader: combinedDashboardLoader,
      element: (
        
          {role === "admin" ?  : }
        
      ),
      errorElement: ,
    },
  ]);

2.3 敏感数据的安全存储

避免将敏感信息如访问令牌存储在 localStorage 或 sessionStorage 中，因为它们容易受到 XSS 攻击。相反，应使用设置了 HttpOnly 和 Secure 标志的 Cookie。

// 在服务器端设置安全的 Cookie
res.cookie("accessToken", accessToken, {
  httpOnly: true,
  secure: process.env.NODE_ENV === "production",
  maxAge: expirationTime * 1000,
  sameSite: "lax",
});

2.4 CORS（Cross-Origin Resource Sharing，跨域资源共享）

实施适当的 CORS 策略，只允许特定的源与您的后端 API 交互，并限制允许的方法和标头。

2.5 内容安全策略（Content Security Policy，CSP）

设置 CSP 以防止执行不受信任的脚本，通过控制资源加载的位置来降低XSS攻击风险。
实现：最简单的方法是在 HTML 页面的头部使用 meta 标签。如下面的代码所示，更多细节可以参考这个链接。

...

或者，在 ExpressJS 中使用中间件设置 CSP。

app.use((req, res, next) => {
  res.setHeader("Content-Security-Policy", "default-src 'self'; script-src 'self' https://trusted.cdn.com; object-src 'none';");
  next();
});

2.6 HTTPS 的 URL

强制使用 HTTPS 来加密客户端和服务器之间的通信，确保数据在传输过程中的安全。

莫方教程网

专业程序员编程教程与实战案例分享

探索Web开发的关键安全原则:前端篇