首页 >web前端 >js教程 >Web 开发人员的基本 JavaScript 安全最佳实践

Web 开发人员的基本 JavaScript 安全最佳实践

Linda Hamilton原创: 2024-12-21 19:16:15820浏览

ssential JavaScript Security Best Practices for Web Developers

作为一名 Web 开发人员，我了解到在构建 JavaScript 应用程序时安全性至关重要。多年来，我遇到了许多挑战并实施了各种策略来增强 Web 应用程序的稳健性。在本文中，我将分享八个基本的 JavaScript 安全最佳实践，我发现它们对于创建安全可靠的 Web 应用程序至关重要。

输入验证

Web 应用程序安全性最关键的方面之一是正确的输入验证。用户输入是恶意行为者的潜在入口点，未能对其进行清理和验证可能会导致严重的安全漏洞。我始终确保所有用户输入在处理之前都经过彻底检查和清理。

以下是我如何在 JavaScript 代码中实现输入验证的示例：

function validateInput(input) {
  // Remove any HTML tags
  let sanitizedInput = input.replace(/<[^>]*>/g, '');

  // Remove any special characters
  sanitizedInput = sanitizedInput.replace(/[^\w\s]/gi, '');

  // Trim whitespace
  sanitizedInput = sanitizedInput.trim();

  // Check if the input is not empty and within a reasonable length
  if (sanitizedInput.length > 0 && sanitizedInput.length <= 100) {
    return sanitizedInput;
  } else {
    throw new Error('Invalid input');
  }
}

// Usage
try {
  const userInput = document.getElementById('userInput').value;
  const validatedInput = validateInput(userInput);
  // Process the validated input
} catch (error) {
  console.error('Input validation failed:', error.message);
}

此函数删除 HTML 标签、特殊字符并修剪空格。它还检查输入是否在合理的长度内。通过实施此类验证，我们可以显着降低应用程序中注入攻击和意外行为的风险。

内容安全政策

内容安全策略 (CSP) 是一项强大的安全功能，有助于防止跨站脚本 (XSS) 攻击和其他代码注入攻击。通过实现 CSP 标头，我们可以控制允许在 Web 应用程序中加载和执行哪些资源。

以下是我通常如何在 Express.js 应用程序中设置 CSP：

const express = require('express');
const helmet = require('helmet');

const app = express();

app.use(helmet.contentSecurityPolicy({
  directives: {
    defaultSrc: ["'self'"],
    scriptSrc: ["'self'", "'unsafe-inline'", 'https://trusted-cdn.com'],
    styleSrc: ["'self'", 'https://fonts.googleapis.com'],
    imgSrc: ["'self'", 'data:', 'https:'],
    connectSrc: ["'self'", 'https://api.example.com'],
    fontSrc: ["'self'", 'https://fonts.gstatic.com'],
    objectSrc: ["'none'"],
    upgradeInsecureRequests: []
  }
}));

// Your routes and other middleware

此配置将资源加载限制为特定的可信来源，有助于减轻 XSS 攻击和未经授权的资源加载。

HTTPS

实施 HTTPS 对于保护客户端和服务器之间的数据传输至关重要。它对传输中的数据进行加密，防止中间人攻击并确保交换信息的完整性。

在我的 Node.js 应用程序中，我始终使用 HTTPS，即使在开发环境中也是如此。以下是我如何设置 HTTPS 服务器的简单示例：

const https = require('https');
const fs = require('fs');
const express = require('express');

const app = express();

const options = {
  key: fs.readFileSync('path/to/private-key.pem'),
  cert: fs.readFileSync('path/to/certificate.pem')
};

https.createServer(options, app).listen(443, () => {
  console.log('HTTPS server running on port 443');
});

// Your routes and other middleware

安全身份验证

实施安全身份验证对于保护用户帐户和敏感信息至关重要。我总是使用强密码策略和安全身份验证方法，例如 OAuth 或 JSON Web 令牌 (JWT)。

以下是我如何在 Express.js 应用程序中实现 JWT 身份验证的示例：

const express = require('express');
const jwt = require('jsonwebtoken');
const bcrypt = require('bcrypt');

const app = express();
app.use(express.json());

const SECRET_KEY = 'your-secret-key';

// User login
app.post('/login', async (req, res) => {
  const { username, password } = req.body;

  // In a real application, you would fetch the user from a database
  const user = await findUserByUsername(username);

  if (!user || !(await bcrypt.compare(password, user.passwordHash))) {
    return res.status(401).json({ message: 'Invalid credentials' });
  }

  const token = jwt.sign({ userId: user.id }, SECRET_KEY, { expiresIn: '1h' });

  res.json({ token });
});

// Middleware to verify JWT
function verifyToken(req, res, next) {
  const token = req.headers['authorization'];

  if (!token) {
    return res.status(403).json({ message: 'No token provided' });
  }

  jwt.verify(token, SECRET_KEY, (err, decoded) => {
    if (err) {
      return res.status(401).json({ message: 'Invalid token' });
    }
    req.userId = decoded.userId;
    next();
  });
}

// Protected route
app.get('/protected', verifyToken, (req, res) => {
  res.json({ message: 'Access granted to protected resource' });
});

// Your other routes

此示例演示了基本的 JWT 身份验证流程，包括用户登录和用于验证受保护路由的令牌的中间件功能。

跨站请求伪造保护

如果处理不当，跨站请求伪造 (CSRF) 攻击可能会造成灾难性后果。我总是在我的应用程序中实施 CSRF 保护，以防止代表经过身份验证的用户进行未经授权的操作。

以下是我通常如何使用 Express.js 中的 csurf 中间件实现 CSRF 保护：

function validateInput(input) {
  // Remove any HTML tags
  let sanitizedInput = input.replace(/<[^>]*>/g, '');

  // Remove any special characters
  sanitizedInput = sanitizedInput.replace(/[^\w\s]/gi, '');

  // Trim whitespace
  sanitizedInput = sanitizedInput.trim();

  // Check if the input is not empty and within a reasonable length
  if (sanitizedInput.length > 0 && sanitizedInput.length <= 100) {
    return sanitizedInput;
  } else {
    throw new Error('Invalid input');
  }
}

// Usage
try {
  const userInput = document.getElementById('userInput').value;
  const validatedInput = validateInput(userInput);
  // Process the validated input
} catch (error) {
  console.error('Input validation failed:', error.message);
}

此设置为每个请求生成一个唯一的 CSRF 令牌，并在表单提交时验证它，从而防止 CSRF 攻击。

安全 Cookie 处理

正确的 cookie 处理对于维护会话安全和保护敏感信息至关重要。我总是在 cookie 上设置 Secure 和 HttpOnly 标志以增强其安全性。

以下是我如何在 Express.js 应用程序中设置安全 cookie 的示例：

const express = require('express');
const helmet = require('helmet');

const app = express();

app.use(helmet.contentSecurityPolicy({
  directives: {
    defaultSrc: ["'self'"],
    scriptSrc: ["'self'", "'unsafe-inline'", 'https://trusted-cdn.com'],
    styleSrc: ["'self'", 'https://fonts.googleapis.com'],
    imgSrc: ["'self'", 'data:', 'https:'],
    connectSrc: ["'self'", 'https://api.example.com'],
    fontSrc: ["'self'", 'https://fonts.gstatic.com'],
    objectSrc: ["'none'"],
    upgradeInsecureRequests: []
  }
}));

// Your routes and other middleware

这些设置确保 cookie 仅通过安全连接传输，不能被客户端脚本访问，并且可以防止跨站点请求攻击。

第三方图书馆管理

管理第三方库是维护应用程序安全的一个重要方面。我总是强调定期更新依赖项并审核它们是否存在已知漏洞。

这是我管理依赖项的典型工作流程：

定期更新软件包：

const https = require('https');
const fs = require('fs');
const express = require('express');

const app = express();

const options = {
  key: fs.readFileSync('path/to/private-key.pem'),
  cert: fs.readFileSync('path/to/certificate.pem')
};

https.createServer(options, app).listen(443, () => {
  console.log('HTTPS server running on port 443');
});

// Your routes and other middleware

检查是否有过期的软件包：

const express = require('express');
const jwt = require('jsonwebtoken');
const bcrypt = require('bcrypt');

const app = express();
app.use(express.json());

const SECRET_KEY = 'your-secret-key';

// User login
app.post('/login', async (req, res) => {
  const { username, password } = req.body;

  // In a real application, you would fetch the user from a database
  const user = await findUserByUsername(username);

  if (!user || !(await bcrypt.compare(password, user.passwordHash))) {
    return res.status(401).json({ message: 'Invalid credentials' });
  }

  const token = jwt.sign({ userId: user.id }, SECRET_KEY, { expiresIn: '1h' });

  res.json({ token });
});

// Middleware to verify JWT
function verifyToken(req, res, next) {
  const token = req.headers['authorization'];

  if (!token) {
    return res.status(403).json({ message: 'No token provided' });
  }

  jwt.verify(token, SECRET_KEY, (err, decoded) => {
    if (err) {
      return res.status(401).json({ message: 'Invalid token' });
    }
    req.userId = decoded.userId;
    next();
  });
}

// Protected route
app.get('/protected', verifyToken, (req, res) => {
  res.json({ message: 'Access granted to protected resource' });
});

// Your other routes

审核包中的漏洞：

const express = require('express');
const csrf = require('csurf');
const cookieParser = require('cookie-parser');

const app = express();

app.use(cookieParser());
app.use(csrf({ cookie: true }));

app.use((req, res, next) => {
  res.locals.csrfToken = req.csrfToken();
  next();
});

app.get('/form', (req, res) => {
  res.send(`
    <form action="/submit" method="POST">
      <input type="hidden" name="_csrf" value="${req.csrfToken()}">
      <input type="text" name="data">
      <button type="submit">Submit</button>
    </form>
  `);
});

app.post('/submit', (req, res) => {
  res.send('Form submitted successfully');
});

app.use((err, req, res, next) => {
  if (err.code !== 'EBADCSRFTOKEN') return next(err);
  res.status(403).send('Invalid CSRF token');
});

// Your other routes and middleware

尽可能修复漏洞：

const express = require('express');
const session = require('express-session');

const app = express();

app.use(session({
  secret: 'your-secret-key',
  resave: false,
  saveUninitialized: true,
  cookie: {
    secure: true, // Ensures the cookie is only sent over HTTPS
    httpOnly: true, // Prevents client-side access to the cookie
    sameSite: 'strict', // Prevents the cookie from being sent in cross-site requests
    maxAge: 3600000 // Sets the cookie expiration time (1 hour in this example)
  }
}));

// Your routes and other middleware

我还使用 Snyk 或 npm-check-updates 等工具来自动执行此过程，并接收有关依赖项中潜在安全问题的警报。

正确的错误处理

正确的错误处理不仅仅是为了改善用户体验；这也是一项重要的安全措施。我总是实现自定义错误页面并避免在错误消息中暴露敏感信息。

以下是我如何处理 Express.js 应用程序中的错误的示例：

npm update

此设置为 404（未找到）和 500（内部服务器错误）响应提供自定义错误页面，防止向用户暴露敏感的堆栈跟踪或错误详细信息。

总之，实施这八个 JavaScript 安全最佳实践显着提高了我的 Web 应用程序的稳健性和安全性。通过专注于输入验证、内容安全策略、HTTPS、安全身份验证、CSRF 保护、安全 cookie 处理、第三方库管理和正确的错误处理，我已经能够创建更安全、更可靠的应用程序。

需要注意的是，安全是一个持续的过程。随着新威胁的出现和技术的发展，我们必须保持警惕并不断更新我们的安全实践。定期安全审核、渗透测试以及随时了解最新安全趋势都是保持强大安全态势的一部分。

请记住，安全性不仅仅是实施一次这些实践然后就忘记它们。这是关于在开发的各个方面培养安全第一的心态。我们编写的每一行代码、我们实现的每个功能以及我们做出的每个决定都应该从安全的角度来看待。

通过优先考虑 JavaScript 应用程序的安全性，我们不仅可以保护我们的用户及其数据，还可以为我们的产品建立信任和信誉。在当今的数字环境中，数据泄露和网络攻击越来越普遍，强大的安全策略不仅仅是可有可无的，而且是绝对必要的。

作为开发人员，我们不仅有责任创建功能强大且用户友好的应用程序，而且有责任创建安全的应用程序。通过遵循这些最佳实践并不断进行安全教育，我们可以为每个人打造一个更安全的网络生态系统。

我们的创作

一定要看看我们的创作：

我们在媒体上

以上是Web 开发人员的基本 JavaScript 安全最佳实践的详细内容。更多信息请关注PHP中文网其他相关文章！

JavaScript json html npm xss csrf express Resource if for Cookie Session Error Token using protected internal Length JS function this input https Other

声明：

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

上一篇：How to Deep Clone Arrays of Objects in JavaScript?下一篇：Why Do I Need to Double Escape Backslashes in JavaScript RegExp Constructor Strings?

查看更多