身為 Web 開發(fā)人員，我了解到在建立 JavaScript 應(yīng)用程式時安全性至關(guān)重要。多年來，我遇到了許多挑戰(zhàn)並實施了各種策略來增強 Web 應(yīng)用程式的穩(wěn)健性。在本文中，我將分享八個基本的 JavaScript 安全最佳實踐，我發(fā)現(xiàn)它們對於創(chuàng)建安全可靠的 Web 應(yīng)用程式至關(guān)重要。

輸入驗證

Web 應(yīng)用程式安全性最關(guān)鍵的方面之一是正確的輸入驗證。使用者輸入是惡意行為者的潛在入口點，未能對其進行清理和驗證可能會導(dǎo)致嚴(yán)重的安全漏洞。我始終確保所有用戶輸入在處理之前都經(jīng)過徹底檢查和清理。

以下是我如何在 JavaScript 程式碼中實作輸入驗證的範(fàn)例：

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);
}

此函數(shù)刪除 HTML 標(biāo)籤、特殊字元並修剪空格。它還檢查輸入是否在合理的長度內(nèi)。透過實施此類驗證，我們可以顯著降低應(yīng)用程式中註入攻擊和意外行為的風(fēng)險。

內(nèi)容安全政策

內(nèi)容安全策略 (CSP) 是一項強大的安全功能，有助於防止跨站腳本 (XSS) 攻擊和其他程式碼注入攻擊。透過實作 CSP 標(biāo)頭，我們可以控制允許在 Web 應(yīng)用程式中載入和執(zhí)行哪些資源。

以下是我通常如何在 Express.js 應(yīng)用程式中設(shè)定 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

此組態(tài)將資源載入限制為特定的可信任來源，有助於減輕 XSS 攻擊和未經(jīng)授權(quán)的資源載入。

HTTPS

實作 HTTPS 對於保護客戶端和伺服器之間的資料傳輸至關(guān)重要。它會對傳輸中的資料進行加密，防止中間人攻擊並確保交換資訊的完整性。

在我的 Node.js 應(yīng)用程式中，我總是使用 HTTPS，即使在開發(fā)環(huán)境中也是如此。以下是我如何設(shè)定 HTTPS 伺服器的簡單範(fàn)例：

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

安全身份驗證

實施安全身份驗證對於保護使用者帳戶和敏感資訊至關(guān)重要。我總是使用強密碼策略和安全性身份驗證方法，例如 OAuth 或 JSON Web 令牌 (JWT)。

以下是我如何在 Express.js 應(yīng)用程式中實作 JWT 身份驗證的範(fàn)例：

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

此範(fàn)例示範(fàn)了基本的 JWT 驗證流程，包括使用者登入和用於驗證受保護路由的令牌的中間件功能。

跨站請求偽造保護

如果處理不當(dāng)，跨站請求偽造 (CSRF) 攻擊可能會造成災(zāi)難性後果。我總是在我的應(yīng)用程式中實施 CSRF 保護，以防止代表經(jīng)過身份驗證的使用者進行未經(jīng)授權(quán)的操作。

以下是我通常如何使用 Express.js 中的 csurf 中間件來實現(xiàn) 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);
}

此設(shè)定為每個請求產(chǎn)生一個唯一的 CSRF 令牌，並在表單提交時驗證它，從而防止 CSRF 攻擊。

安全 Cookie 處理

正確的 cookie 處理對於維護會話安全性和保護敏感資訊至關(guān)重要。我總是在 cookie 上設(shè)定 Secure 和 HttpOnly 標(biāo)誌以增強其安全性。

以下是我如何在 Express.js 應(yīng)用程式中設(shè)定安全 cookie 的範(fàn)例：

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

這些設(shè)定確保 cookie 僅透過安全連線傳輸，不能被客戶端腳本訪問，並且可以防止跨網(wǎng)站請求攻擊。

第三方圖書館管理

管理第三方函式庫是維護應(yīng)用程式安全的重要面向。我總是強調(diào)定期更新依賴項並審核它們是否存在已知漏洞。

這是我管理依賴項的典型工作流程：

1. 定期更新軟體包：

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

1. 檢查是否有過期的軟體包：

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

1. 審核包中的漏洞：

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

1. 盡可能修補漏洞：

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 等工具來自動執(zhí)行此過程，並接收有關(guān)依賴項中潛在安全問題的警報。

正確的錯誤處理

正確的錯誤處理不僅是為了改善使用者體驗；這也是一項重要的安全措施。我總是實現(xiàn)自訂錯誤頁面並避免在錯誤訊息中暴露敏感資訊。

以下是我如何處理 Express.js 應(yīng)用程式中的錯誤的範(fàn)例：

npm update

此設(shè)定為 404（未找到）和 500（內(nèi)部伺服器錯誤）回應(yīng)提供自訂錯誤頁面，防止向使用者暴露敏感的堆疊追蹤或錯誤詳細(xì)資訊。

總之，實作這八個 JavaScript 安全最佳實踐顯著提高了我的 Web 應(yīng)用程式的穩(wěn)健性和安全性。透過專注於輸入驗證、內(nèi)容安全策略、HTTPS、安全性身份驗證、CSRF 保護、安全性 cookie 處理、第三方程式庫管理和正確的錯誤處理，我已經(jīng)能夠創(chuàng)建更安全、更可靠的應(yīng)用程式。

要注意的是，安全是一個持續(xù)的過程。隨著新威脅的出現(xiàn)和技術(shù)的發(fā)展，我們必須保持警惕並不斷更新我們的安全實踐。定期安全審核、滲透測試以及隨時了解最新安全趨勢都是保持強大安全態(tài)勢的一部分。

請記住，安全性不僅僅是實施一次這些實踐然後就忘記它們。這是關(guān)於在開發(fā)的各個方面培養(yǎng)安全第一的心態(tài)。我們編寫的每一行程式碼、我們實現(xiàn)的每個功能以及我們所做的每個決定都應(yīng)該從安全的角度來看待。

透過優(yōu)先考慮 JavaScript 應(yīng)用程式的安全性，我們不僅可以保護我們的用戶及其數(shù)據(jù)，還可以為我們的產(chǎn)品建立信任和信譽。在當(dāng)今的數(shù)位環(huán)境中，資料外洩和網(wǎng)路攻擊越來越普遍，強大的安全策略不僅是可有可無的，而且是絕對必要的。

作為開發(fā)人員，我們不僅有責(zé)任創(chuàng)建功能強大且用戶友好的應(yīng)用程序，而且有責(zé)任創(chuàng)建安全的應(yīng)用程式。透過遵循這些最佳實踐並不斷進行安全教育，我們可以為每個人打造一個更安全的網(wǎng)路生態(tài)系統(tǒng)。

---

我們的創(chuàng)作

一定要看看我們的創(chuàng)作：

投資者中心 | 投資者中央西班牙語 | 投資者中德意志 | 智能生活 | 時代與迴音 | 令人費解的謎團 | 印度教 | 菁英發(fā)展 | JS學(xué)校

---

我們在媒體上

科技無尾熊洞察 | 時代與迴響世界 | 投資人中央媒體 | 令人費解的謎團 | | 令人費解的謎團 | >科學(xué)與時代媒介 |

現(xiàn)代印度教

以上是Web 開發(fā)人員的基本 JavaScript 安全最佳實踐的詳細(xì)內(nèi)容。更多資訊請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！