コミュニティ
学ぶ
ツールライブラリ
AIツール
レジャー
検索
日本語
ホームページ > ウェブフロントエンド > jsチュートリアル > Web 開発者向けの重要な JavaScript セキュリティのベスト プラクティス

Web 開発者向けの重要な JavaScript セキュリティのベスト プラクティス

Linda Hamilton
リリース： 2024-12-21 19:16:15
オリジナル
858 人が閲覧しました

ssential JavaScript Security Best Practices for Web Developers

Web 開発者として、私は JavaScript アプリケーションを構築する際にはセキュリティが最も重要であることを学びました。長年にわたり、私は数多くの課題に直面し、Web アプリケーションの堅牢性を高めるためにさまざまな戦略を実装してきました。この記事では、安全で信頼性の高い Web アプリケーションを作成するために重要であると私が判断した 8 つの JavaScript セキュリティのベスト プラクティスを共有します。

入力の検証

Web アプリケーションのセキュリティの最も重要な側面の 1 つは、適切な入力検証です。ユーザー入力は悪意のある攻撃者にとって潜在的な侵入ポイントであり、それらをサニタイズおよび検証しないと、重大なセキュリティ脆弱性が発生する可能性があります。私は常に、すべてのユーザー入力を処理する前に徹底的にチェックし、クリーニングするようにしています。

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 Token (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 (内部サーバー エラー) 応答のカスタム エラー ページが提供され、機密のスタック トレースやエラーの詳細がユーザーに公開されるのを防ぎます。

結論として、これら 8 つの JavaScript セキュリティのベスト プラクティスを実装することで、Web アプリケーションの堅牢性とセキュリティが大幅に向上しました。入力検証、コンテンツ セキュリティ ポリシー、HTTPS、安全な認証、CSRF 保護、安全な Cookie 処理、サードパーティ ライブラリ管理、適切なエラー処理に重点を置くことで、より安全で信頼性の高いアプリケーションを作成することができました。

セキュリティは継続的なプロセスであることに注意することが重要です。新たな脅威が出現し、テクノロジーが進化するにつれて、私たちは警戒を怠らず、セキュリティ慣行を継続的に更新する必要があります。定期的なセキュリティ監査、侵入テスト、最新のセキュリティ傾向に関する情報の入手はすべて、強力なセキュリティ体制を維持する一環です。

セキュリティとは、これらのプラクティスを一度実装したら忘れてしまうことだけではないことを覚えておいてください。それは、開発のあらゆる側面においてセキュリティを第一に考える考え方を養うことです。私たちが書くコードのすべての行、実装するすべての機能、そして私たちが下すすべての決定は、セキュリティというレンズを通して見るべきです。

JavaScript アプリケーションのセキュリティを優先することで、ユーザーとそのデータを保護するだけでなく、製品に対する信頼と信頼性も構築します。データ侵害やサイバー攻撃がますます一般的になっている今日のデジタル環境では、堅牢なセキュリティ戦略は単にあると便利なものではなく、絶対に必要なものです。

開発者として、私たちには機能的でユーザーフレンドリーなアプリケーションだけでなく、安全なアプリケーションを作成する責任があります。これらのベスト プラクティスに従い、セキュリティについて継続的に教育することで、すべての人にとってより安全な Web エコシステムに貢献できます。

私たちの作品

私たちの作品をぜひチェックしてください:

インベスターセントラル | 投資家中央スペイン人 | 中央ドイツの投資家 | スマートな暮らし | エポックとエコー | 不可解な謎 | ヒンドゥーヴァ | エリート開発者 | JS スクール

私たちは中程度です

Tech Koala Insights | エポックズ＆エコーズワールド | インベスター・セントラル・メディア | 不可解な謎 中 | 科学とエポックミディアム | 現代ヒンドゥーヴァ

以上がWeb 開発者向けの重要な JavaScript セキュリティのベスト プラクティスの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

前の記事：JavaScript でオブジェクトの配列をディープ クローン作成する方法 次の記事：JavaScript RegExp コンストラクター文字列でバックスラッシュを二重にエスケープする必要があるのはなぜですか?
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
最新の問題
function_exists() はカスタム関数を決定できません Function test () {return true;} if (function_exists ('test')) {echo "テストは関数です";
から 2024-04-29 11:01:01
0
3
2673
Google Chromeのモバイル版を表示する方法 こんにちは、先生、Google Chrome をモバイル版に変更するにはどうすればよいですか?
から 2024-04-23 00:22:19
0
11
2805
子ウィンドウは親ウィンドウを操作しますが、出力は応答しません。 最初の 2 つの文は実行可能ですが、最後の文は実装できません。
から 2024-04-19 15:37:47
0
1
2366
親ウィンドウには出力がありません document.onclick = function(){ window.opener.document.write('私は子ウィンドウの出力です');
から 2024-04-18 23:52:34
0
1
2228
CSS マインド マッピングに関するコースウェアはどこにありますか? コースウェア
から 2024-04-16 10:10:18
0
0
2331
関連トピック
詳細>
人気のおすすめ
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート