这是最近面试 bd 时面试官问的一个问题，当时没有回答上来。
本篇就以问答的形式来讲解这题。当然以下内容纯属虚构，只是为了说明大厂面试是一环扣一环的。或许当你成为面试官时也可以采用这种形式。
“我看你简历上说使用过 canvas ，能说说什么是 canvas 污染么？”
“将一张跨域的图片绘制到 canvas 上，这个 canvas 就是被污染的，此时无法读取该 canvas 的数据。”
“那你能说说浏览器为什么要做这个限制？”
“为了用户的安全。” 由于之前没有思考过，又不想承认不会，我随口一说。
“能具体讲讲么？” 面试官似乎读出了我言语中的犹豫。
“嗯。。。让我想想。” 先稳住，假装不慌，其实内心慌得一p。
“这个是同源策略的限制。应该是为了避免第三方网站读取其他网站的图片数据（Canvas 渲染第三方图片请求不受 CORS 限制），避免用户隐私泄露。比如已知某个隐私图片的 url，进入第三方网站后，可以请求到该图片，如果不做数据读取限制的话，该数据将被传送到网站后台进而导致信息泄露。”
“很好。那如果是我们自己的网站要用，有什么解决方案？”
“嗯，这个要看能否控制图片的响应了。如果可以控制的话，利用 cors 跨域，并在图片请求发起时增加 crossOrigin = "Anonymous" 设置；否则只能自己的网站做个代理，让网站与图片同源。”
“你刚刚有提到同源，那你说说为什么浏览器会有同源策略？”
“为了限制其他源文档或脚本与当前源的资源进行交互。主要有两个地方：一个是 iframe 节点访问控制，如果没有同源策略限制的话，iframe 可以随意访问其他非同源 iframe 的 dom 节点，如钓鱼网站嵌套了一个银行网站的 iframe ，从外部就可以读取到内部密码输入框的值。另一个是 http 响应控制，如果没有同源策略限制的话，在第三方网站直接对其他网站发起请求，可以读取到响应，这样就可以获取用户的个人信息，造成隐私泄露。”
“很好，你刚刚说到响应控制，那请求是成功的么？”
“利用 img/form 等支持跨域的标签，请求会自动带上 cookie，没有额外处理的话请求是成功的，这也就是所谓的 csrf 攻击。而如果是 ajax ，不会带上 cookie ，需要鉴权的请求也就直接失败。注意同源策略只是对终端进行信息防护，只拦截响应，不拦截请求。”
“为什么浏览器不直接拦截非同源请求？”
“浏览器得通过响应才知道要不要拦截，如果直接拦截请求了，想用 cors 做跨域请求就做不了了。”
...中间又穿插了 csrf 等各种前端安全的问题。
“回到 canvas，最后再问一个问题，说说 canvas 性能分析和常见的渲染优化策略？”
“不太了解。。”
“好吧，我们下一篇文章见。”
如有错误，欢迎指正
