Chrome 擴充功能開發：解密 Content Security Policy 的安全限制

在開發 Chrome 擴充功能時，你可能會遇到一些看似莫名其妙的錯誤訊息，尤其是關於 Content Security Policy（CSP）的警告。今天，讓我們一起來了解這些安全限制，並學習如何正確處理它們！

問題場景

想像一下，你正在開發一個簡單的 Chrome 擴充功能，需要使用外部的 JavaScript lib。你可能會寫出這樣的程式碼：

html
<script src="https://cdnjs.cloudflare.com/some-library.js"></script>
<button onclick="doSomething()">點擊我</button>

然後.......控制台就開始噴錯了...

Refused to load the script because it violates the Content Security Policy directive: "script-src 'self'"

什麼是 Content Security Policy？

CSP 是一種安全機制，用來防止跨站腳本攻擊（XSS）和其他程式碼注入攻擊。在 Chrome 擴充功能中，CSP 預設採用嚴格的安全設定，主要限制包括：

1. 只能載入擴充功能目錄內的腳本文件（script-src 'self'）
2. 不允許使用內嵌腳本（比如 onclick="..."）
3. 不允許直接從外部 CDN 載入資源

常見錯誤和解決方案

1. 外部腳本載入錯誤

❌ 問題程式碼：

html
<script src="https://cdnjs.cloudflare.com/some-library.js"></script>

✅ 解決方案：

• 下載lib的文件到你的擴充功能目錄
• 使用相對路徑引用

html
<script src="library.js"></script>

2. 內嵌腳本錯誤

❌ 問題程式碼：

html
<button onclick="doSomething()">點擊</button>
<script>
  function doSomething() {
    // ...
  }
</script>

✅ 解決方案：

• 創建獨立的 JavaScript 文件
• 使用 addEventListener 綁定事件

html
<!-- index.html -->
<button id="actionButton">點擊</button>
<script src="app.js"></script>

javascript
// app.js
document.getElementById('actionButton').addEventListener('click', function() {
  // 處理點擊事件
});

最佳實踐

要建立一個符合 CSP 規範的擴充功能，建議遵循以下原則：

1. 檔案分離
   • HTML：負責結構
   • CSS：負責樣式
   • JavaScript：負責行為
   • 外部lib：本地保存
2. 正確的檔案結構

extension/
├── manifest.json
├── popup.html
├── popup.js
├── styles.css
└── lib/
    └── external-library.js

3. 事件處理

• 避免使用內嵌的 onclick、onload 等屬性
• 統一使用 addEventListener 綁定事件
• 將所有 JavaScript 邏輯放在獨立的 .js 文件中

為什麼這些限制這麼重要？

這些安全限制看似麻煩，但它們實際上在保護：

1. 使用者安全：防止惡意程式碼注入
2. 程式碼可控性：確保擴充功能的行為可預測
3. 維護性：強制程式碼組織更加結構化

結論

理解和正確處理 CSP 限制是開發 Chrome 擴充功能的重要一環。雖然這些限制可能在開始時讓人感到困擾，但它們實際上在幫助我們建立更安全、更有組織的程式碼結構。

下次當你遇到 CSP 相關的錯誤時，不要慌張！回想這篇文章的建議，你一定能夠優雅地解決這些問題。