本文將詳細解析 crossorigin 屬性 的核心規範、底層運作機制與實務配置要點，協助開發者在專案中快速排查常見問題並落實標準寫法。
想了解基礎原理細節可前往如何使用Chrome套件解決Localhost開發中的CORS問題 – 前端無痛解決 CORS Error 問題觀看前導文章。
隨著現代網頁應用的日益複雜和功能豐富，開發者需要高度關注資源的安全引用和跨域請求問題。HTML 的 crossorigin 屬性為這一需求提供了解決方案，它允許開發者控制不同來源的資源如何被包含到文件中。本文將深入探討 crossorigin 屬性的工作原理、使用場景及其對網頁安全性與錯誤捕捉的影響。
一、 crossorigin 屬性概覽與規格對照
crossorigin 屬性是 HTML 元素的一個屬性，用於配置跨來源資源的請求方式。它主要用於 <link>、<img>、<script> 和 <video> 等標籤，以確定瀏覽器在請求不同來源的資源時是否發送憑證。
| 屬性值 | 憑證發送狀態 | 伺服器要求與行為 |
|---|---|---|
anonymous | 不發送 Cookies 與 HTTP 認證 | 要求伺服器回應有效的 Access-Control-Allow-Origin 頭部，否則資源（如 Canvas 畫面或字型）會被汙染或阻擋。 |
use-credentials | 會發送 Cookies 與 HTTP 認證 | 要求伺服器明確設定 Access-Control-Allow-Credentials: true 且 Access-Control-Allow-Origin 不得為萬用字元 *。 |
| 不設定 | 預設模式 | 不會主動觸發 CORS 機制，資源若未標註 CORS 則屬於「汙染狀態 (Tainted)」。 |
二、 常見使用場景與程式碼實作
1. 跨域字型載入
當使用外部網頁字型（如 Google 字型或企業 CDN 字型）時，若未加上 crossorigin 屬性，某些瀏覽器在解析 Canvas 繪圖或進行嚴格 CORS 檢查時可能會報錯。透過設定 anonymous 可以確保字型文件在跨域策略下被正確載入：
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet" crossorigin="anonymous">2. 跨域 JavaScript 錯誤詳細捕捉
在現代前端開發中，當 <script> 載入來自第三方 CDN 的指令碼並發生執行期錯誤時，瀏覽器的 window.onerror 通常只會捕捉到不具參考價值的 "Script error."。為了解決這個問題，必須同時加上 crossorigin 屬性以及伺服器的 CORS 標頭，這樣才能在開發者工具中取得詳細的錯誤堆疊與行號：
<script src="https://cdn.example.com/analytics.js" crossorigin="anonymous"></script>3. 影音元素與 Canvas 互動
在處理 <video> 或 <img> 元素並嘗試將其畫面繪製到 <canvas> 進行影像處理（如截圖、濾鏡處理）時，若資源來自不同來源且未設定 crossorigin，Canvas 會進入「汙染狀態」，導致 toDataURL() 或 getImageData() 拋出安全性例外錯誤。正確寫法如下：
<video src="https://media.example.com/intro.mp4" crossorigin="anonymous" controls></video>三、 crossorigin 與網頁安全機制
使用 crossorigin 屬性可以增強網站的跨域資源共享 (CORS) 安全性。它允許開發者精細控制哪些跨域資源可以被加載以及憑證如何傳遞，從而降低潛在的安全風險。特別是在加載第三方 CDN 資源時，正確配置 crossorigin 屬性能夠避免憑證意外洩漏至不受信任的第三方伺服器。
四、 常見問題 (FAQ)
Q1：為什麼 script 標籤加上 crossorigin="anonymous" 後，第三方 CDN 腳本反而載入失敗或報錯？
- 問題原因：CDN 伺服器端沒有正確設定
Access-Control-Allow-Origin回應標頭（Header）。當瀏覽器看到crossorigin屬性時，會強制啟動 CORS 檢查；若伺服器未明確允許跨域存取，瀏覽器基於安全性會直接阻擋該資源。 - 解法：聯繫 CDN 管理員補上對應的 CORS 標頭，或在不需要跨域詳細錯誤追蹤時暫時移除該屬性。
Q2：anonymous 與 use-credentials 的核心差異是什麼？何時該選 use-credentials？
- 問題原因：兩者最大差異在於「是否夾帶使用者憑證（Cookies / HTTP 認證）」。
- 解法：
anonymous不會發送任何 Cookies；而use-credentials會發送憑證，但伺服器端絕不能將Access-Control-Allow-Origin設為萬用字元*，必須指定明確的網域並開啟Access-Control-Allow-Credentials: true。若請求的靜態資源需要夾帶使用者的登入 Cookie 才能存取（例如私密會員頭像或內部影片），才必須使用use-credentials。
Q3：為什麼圖片載入明明正常，但透過 Canvas 進行 toDataURL() 卻會跳出「汙染畫布 (Tainted canvas)」錯誤？
- 問題原因：圖片來源與網域屬於不同網域（Cross-Origin）。即使圖片能在網頁上正常顯示，基於瀏覽器資安考量，只要未在
<img>加上crossorigin="anonymous"且圖片伺服器未迴應 CORS 標頭，Canvas 就會被視為「受汙染」，禁止讀取像素資料，以防惡意網站偷偷竊取跨域使用者的私密圖像。 - 解法：在圖片標籤中明確補上
crossorigin="anonymous"，並確保圖片伺服器正確回應 CORS 標頭。
總結
crossorigin 屬性是現代前端開發中不可或缺的跨域控制特性，它提供了一種標準化且靈活的方式來處理跨資源請求。透過理解並正確配置 anonymous 與 use-credentials，開發者能夠在保護用戶隱私、確保 Canvas 順利渲染以及提升錯誤追蹤效率之間取得平衡。
參考資料與延伸閱讀
- MDN Web Docs：CORS settings attributes
- MDN Web Docs：HTML element: script
- MDN Web Docs：HTML element: img
- MDN Web Docs：Allowing cross-origin use of images and canvas
- WHATWG HTML Specification：CORS settings attributes
- 延伸閱讀：Javascript location.protocol 語法教學：如何判斷網頁 http 或 https
- 延伸閱讀：解決 React 元件 defaultProps 錯誤：TypeScript Props 預設參數、HOC 與重構踩坑排查
發佈留言