Canvas不直接泄露内容，但跨域污染致数据不可用、指纹追踪致身份暴露、内存残留致侧信道泄漏、富文本编辑器缺乏隔离均会引发风险；需设crossOrigin、用Canvas Blocker、清空缓冲区、严格过滤HTML。
Canvas本身不直接“泄露”内容，但它的设计特性会让敏感信息在特定场景下意外暴露——比如跨域图片污染后无法读取数据、内存中残留图像帧、或被指纹追踪技术反向识别。关键不是画布本身危险，而是使用方式不当放大了风险。
防止跨域图片污染导致的数据不可用
当用<img>加载外部图片并绘制到Canvas时，若服务器未返回Access-Control-Allow-Origin响应头，且图片未设置crossOrigin="anonymous"，画布会被标记为“污染”。此时调用toDataURL()、toBlob()或getImageData()会直接报错，看似是功能限制，实则是浏览器强制阻断信息提取的保护机制。
- ✅ 正确做法：加载前显式设置
img.crossOrigin = 'anonymous'，同时确保服务端配置CORS头 - ⚠️ 避免使用
crossOrigin="use-credentials"，部分浏览器会拒绝渲染或仍触发污染 - ? 替代方案：用
fetch+createImageBitmap加载图片，绕过<img>生命周期，更可控
规避Canvas指纹追踪带来的身份暴露
Canvas指纹通过测量字体渲染差异、抗锯齿表现、GPU精度等细微特征生成唯一哈希值。用户即使禁用Cookie，也能被长期识别。这不是漏洞，而是API设计使然。
- ✅ 浏览器端：安装Canvas Blocker类插件，拦截
toDataURL()等敏感API调用并返回噪声数据 - ✅ 应用端：避免在登录态或敏感页面主动触发Canvas指纹采集逻辑（如自动执行绘图+哈希）
- ✅ 服务端配合：对高敏感操作（如二次验证）不依赖前端Canvas生成的标识，改用服务端签发的token
阻止内存中图像残留引发的信息侧信道泄漏
Canvas绘制的每一帧都驻留在GPU显存或JS堆中，尤其在MJPEG流、截图工具、编辑器等长周期应用里，旧帧可能未被及时清理，被恶意脚本通过getImageData()（若未污染）或内存扫描间接获取。
- ✅ 每次重绘前调用
ctx.clearRect(0, 0, width, height)，清除像素缓冲区 - ✅ 动态图像流中，绘制完成后立即置空引用：
image.src = ''或bitmap.image = null（EaselJS） - ✅ 敏感内容绘制完毕后，主动调用
ctx.resetTransform()和ctx.setTransform(1, 0, 0, 1, 0, 0)重置上下文状态，减少状态残留
富文本编辑器中Canvas内容的安全隔离
像canvas-editor这类基于Canvas渲染富文本的组件，常嵌入用户可编辑的HTML片段。若未严格过滤，恶意脚本可能借由SVG<foreignObject>或<script>标签注入执行。
- ✅ 启用编辑器的
enableStrictFilter: true配置，开启HTML白名单与属性校验 - ✅ 所有粘贴内容必须经过DOM解析+标签剥离+事件属性移除三步清洗
- ✅ 嵌入式内容（如图表块）用
<iframe sandbox="allow-scripts allow-same-origin">包裹，隔离执行环境
