セキュリティ（Content Security Policy、XSS防止）

Chrome拡張機能の開発において、「セキュリティ」は極めて重要な要素です。特に、Content Security Policy（CSP） と クロスサイトスクリプティング（XSS）防止 の理解と対策は、拡張機能の安全性を保つために欠かせません。以下に、それぞれのポイントを詳しく説明します。

---

1. Content Security Policy（CSP）

概要

**CSP（コンテンツ・セキュリティ・ポリシー）**は、Webページや拡張機能における悪意のあるスクリプトの実行を防ぐためのセキュリティ機構です。拡張機能の場合、CSPはmanifest.jsonファイルの中で定義します。

役割

• インラインスクリプトの実行を防止

• 外部スクリプトの読み込みを制限

• 指定されていないリソース（スクリプト、画像、フォントなど）の読み込みをブロック

拡張機能でのCSPの指定方法（Manifest V3 例）:

json
"content_security_policy": {
  "extension_pages": "script-src 'self'; object-src 'self'"
}

主な制約（Manifest V3の場合）:

• eval()、new Function() の使用禁止

• インラインスクリプト（<script>...</script>）や HTMLタグのonclick等の属性イベントは禁止

• スクリプトは必ず外部JSファイルとして読み込む（例：popup.htmlには<script src="popup.js"></script>のみ許可）

---

2. XSS（クロスサイトスクリプティング）防止

概要

**XSS（Cross-Site Scripting）**は、ユーザーの入力などに混入した悪意あるスクリプトが、HTML中でそのまま実行される脆弱性です。拡張機能でDOM操作を行う際には、必ずXSSへの対策が必要です。

主な対策

① innerText や textContent を使う

HTMLではなく文字列として出力することで、スクリプトの実行を防止できます。

js
element.textContent = userInput; // 安全

② innerHTML の使用は慎重に

innerHTMLを使うとHTMLタグやスクリプトがそのまま解析・実行される恐れがあります。どうしても使用する場合は、信頼できる内容のみ、またはサニタイズ（無害化）処理を行ってからにします。

③ 外部ライブラリによるサニタイズ

ユーザー入力やAPIからのデータをHTMLに埋め込む際は、DOMPurify などのライブラリを使って無害化します。

js
const cleanHTML = DOMPurify.sanitize(userInput);
element.innerHTML = cleanHTML;

④ content_scripts でのスクリプト実行制限

拡張機能のcontent_scriptsで、動的にスクリプトを挿入したり、インラインスクリプトを生成しないようにすることも重要です。

---

3. その他のセキュリティのベストプラクティス

• 最小権限の原則（Principle of Least Privilege）：manifest.jsonのpermissionsやhost_permissionsは必要最小限に抑える

• HTTPSの利用：外部APIとの通信はすべてHTTPSに限定する

• ユーザー入力の検証：クライアント側だけでなく、サーバー側でも入力検証を徹底する

---

まとめ

Chrome拡張機能では、セキュリティ上の制約を理解し、これらのルールに従って設計・実装することが、安全かつ信頼性の高い拡張機能の開発に直結します。