Skip to content
⚠️ This article was written in 2020. Some content may be outdated.

CORS:クロスオリジンリソース共有の深掘り

CORS(クロスオリジンリソース共有)の深い理解については、コミュニティで何度も議論されてきましたが、バージョンアップに伴い、多くの結論を更新する必要があります。本記事では最新バージョンに基づいて再整理します。

はじめに

実際のプロジェクトでの使用方法はもう少し複雑です:

javascript
function setCSP(req, res, next) {
  const nonce = crypto.randomBytes(16).toString('base64')
  res.setHeader('Content-Security-Policy', [
    "default-src 'self'",
    `script-src 'self' 'nonce-${nonce}'`,
    "style-src 'self' 'unsafe-inline'",
    "img-src 'self' data: https:",
    "connect-src 'self' https://api.example.com",
    "frame-ancestors 'none'"
  ].join('; '))
  next()
}

この方法により、コードのテスト容易性と拡張性が向上しました。

ソースコード解析

以下は完全なサンプルです:

javascript
function setCSP(req, res, next) {
  const nonce = crypto.randomBytes(16).toString('base64')
  res.setHeader('Content-Security-Policy', [
    "default-src 'self'",
    `script-src 'self' 'nonce-${nonce}'`,
    "style-src 'self' 'unsafe-inline'",
    "img-src 'self' data: https:",
    "connect-src 'self' https://api.example.com",
    "frame-ancestors 'none'"
  ].join('; '))
  next()
}

境界条件の処理に注意してください。これは本番環境で非常に重要です。

実際のシナリオへの応用

核心となるロジックを理解することが重要です:

javascript
function setCSP(req, res, next) {
  const nonce = crypto.randomBytes(16).toString('base64')
  res.setHeader('Content-Security-Policy', [
    "default-src 'self'",
    `script-src 'self' 'nonce-${nonce}'`,
    "style-src 'self' 'unsafe-inline'",
    "img-src 'self' data: https:",
    "connect-src 'self' https://api.example.com",
    "frame-ancestors 'none'"
  ].join('; '))
  next()
}

パフォーマンスの最適化は具体的なシナリオに基づく必要があり、すべてのケースで過度な最適化が必要なわけではありません。

最適化のコツ

以下の方法で改善できます:

javascript
function setCSP(req, res, next) {
  const nonce = crypto.randomBytes(16).toString('base64')
  res.setHeader('Content-Security-Policy', [
    "default-src 'self'",
    `script-src 'self' 'nonce-${nonce}'`,
    "style-src 'self' 'unsafe-inline'",
    "img-src 'self' data: https:",
    "connect-src 'self' https://api.example.com",
    "frame-ancestors 'none'"
  ].join('; '))
  next()
}

この方法はすでに本番環境で半年以上安定して稼働しており、実際に検証されています。

まとめ

  • チームでの取り決めとドキュメントは技術そのものよりも重要です。
  • コミュニティの動向に注目し、技術戦略は継続的に見直す必要があります。
  • 新しい技術を使うために使うのではありません。
  • コードサンプルは参考用です。実際のビジネスシナリオに合わせて調整してください。
  • CORS(クロスオリジンリソース共有)の深い理解は銀の弾丸ではありません。プロジェクトの規模や技術スタックに応じて選択する必要があります。

MIT Licensed