社群 學習 工具庫 休閒
搜尋
繁体中文
首頁 > web前端 > js教程 > Web 開發人員的基本 JavaScript 安全最佳實踐

Web 開發人員的基本 JavaScript 安全最佳實踐

Linda Hamilton
發布： 2024-12-21 19:16:15
原創
774 人瀏覽過

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 僅透過安全連線傳輸，不能被客戶端腳本訪問，並且可以防止跨網站請求攻擊。

第三方圖書館管理

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

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

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

正確的錯誤處理

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

以下是我如何處理 Express.js 應用程式中的錯誤的範例：

npm update
登入後複製

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

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

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

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

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

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

我們的創作

一定要看看我們的創作：

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

我們在媒體上

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

現代印度教

以上是Web 開發人員的基本 JavaScript 安全最佳實踐的詳細內容。更多資訊請關注PHP中文網其他相關文章！

來源：dev.to
上一篇：如何在 JavaScript 中深度複製物件數組？ 下一篇：為什麼我需要在 JavaScript RegExp 建構函式字串中使用雙轉義反斜線？
本網站聲明
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn
作者最新文章
最新問題
function_exists()無法判定自訂函數 function test()    {        return true;    }    if (function_exists('TEST')) {        ech...
來自於 2024-04-29 11:01:01
0
3
2268
google 瀏覽器 手機版顯示的怎麼實現 老師您好，google 瀏覽器怎麼變成手機版樣式的？
來自於 2024-04-23 00:22:19
0
11
2401
子窗口操作父窗口，輸出沒反應 前兩句可執行，最後一句沒辦法應
來自於 2024-04-19 15:37:47
0
1
2015
父視窗沒有輸出 document.onclick = function(){ window.opener.document.write('我是子視窗的輸出');                  ...
來自於 2024-04-18 23:52:34
0
1
1901
關於CSS心智圖的課件在哪？ 課件
來自於 2024-04-16 10:10:18
0
0
1970
相關專題
更多>
熱門推薦
熱門教學
更多>
相關教學
熱門推薦
最新課程
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板