面试官问：什么是 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 性能分析和常见的渲染优化策略？”
“不太了解。。”
“好吧，咱们下一篇文章见。”

---

若有错误，欢迎指正