0%

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


如有错误,欢迎指正

您的支持将鼓励我继续创作!