面試官問：什麼是 canvas 污染

這是最近面試 bd 時面試官問的一個問題，當時沒有回答上來。

本篇就以問答的形式來說解這題。固然如下內容純屬虛構，只是爲了說明大廠面試是一環扣一環的。或許當你成爲面試官時也能夠採用這種形式。

---

「我看你簡歷上說使用過 canvas ，能說說什麼是 canvas 污染麼？」
「將一張跨域的圖片繪製到 canvas 上，這個 canvas 就是被污染的，此時沒法讀取該 canvas 的數據。」

「那你能說說瀏覽器爲何要作這個限制？」
「爲了用戶的安全。」 因爲以前沒有思考過，又不想認可不會，我隨口一說。

「能具體講講麼？」 面試官彷佛讀出了我言語中的猶豫。
「嗯。。。讓我想一想。」 先穩住，僞裝不慌，其實心裏慌得一p。
「這個是同源策略的限制。應該是爲了不第三方網站讀取其餘網站的圖片數據，避免用戶隱私泄露。好比已知某個隱私圖片的 url，進入第三方網站後，能夠請求到該圖片，若是不作數據讀取限制的話，該數據將被傳送到網站後臺進而致使信息泄露。」

「很好。那若是是咱們本身的網站要用，有什麼解決方案？」
「嗯，這個要看可否控制圖片的響應了。若是能夠控制的話，利用 cors 跨域，並在圖片請求發起時增長 crossOrigin = "Anonymous" 設置；不然只能本身的網站作個代理，讓網站與圖片同源。」

「你剛剛有提到同源，那你說說爲何瀏覽器會有同源策略？」
「爲了限制其餘源文檔或腳本與當前源的資源進行交互。主要有兩個地方：一個是 iframe 節點訪問控制，若是沒有同源策略限制的話，iframe 能夠隨意訪問其餘非同源 iframe 的 dom 節點，如釣魚網站嵌套了一個銀行網站的 iframe ，從外部就能夠讀取到內部密碼輸入框的值。另外一個是 http 響應控制，若是沒有同源策略限制的話，在第三方網站直接對其餘網站發起請求，能夠讀取到響應，這樣就能夠獲取用戶的我的信息，形成隱私泄露。」

「很好，你剛剛說到響應控制，那請求是成功的麼？」
「利用 img/form 等支持跨域的標籤，請求會自動帶上 cookie，沒有額外處理的話請求是成功的，這也就是所謂的 csrf 攻擊。而若是是 ajax ，不會帶上 cookie ，須要鑑權的請求也就直接失敗。注意同源策略只是對終端進行信息防禦，只攔截響應，不攔截請求。」

「爲何瀏覽器不直接攔截非同源請求？」
「瀏覽器得經過響應才知道要不要攔截，若是直接攔截請求了，想用 cors 作跨域請求就作不了了。」

...中間又穿插了 csrf 等各類前端安全的問題。

「回到 canvas，最後再問一個問題，說說 canvas 性能分析和常見的渲染優化策略？」
「不太瞭解。。」
「好吧，咱們下一篇文章見。」

---

若有錯誤，歡迎指正