html-in-canvas 安全与隐私哪些敏感信息不能画进Canvas读回允许渲染read-back-allowed完整解读【免费下载链接】html-in-canvas项目地址: https://gitcode.com/gh_mirrors/ht/html-in-canvashtml-in-canvas 是 Chromium 社区的一个开放提案让 2D/3Dcanvas直接绘制带样式的 HTML 内容核心 API 为drawElementImage。本文面向新手完整解读它的安全与隐私设计哪些敏感信息绝不能画进 Canvas以及 read-back-allowed读回允许渲染如何守住像素读回这道安全底线。为什么画进Canvas是个安全敏感操作传统上canvas里的像素一旦生成网页脚本就能通过getImageData()等方法逐像素读回——而 WebGL/WebGPU 的像素读回更是随时可用。html-in-canvas 让 DOM 内容变成 Canvas 像素等于给脚本开了一条像素级观测通道。攻击者可能借此探测两条路像素读回把画进 Canvas 的内容读回来逐像素分析时机侧信道观察paint事件是否触发、何时触发也能推断出画面上发生了什么。所以设计的第一条铁律是任何绘制元素快照的 API 和paint事件绝不能泄露网页代码原本看不到的安全/隐私敏感信息。这个设计就叫read-back-allowed rendering读回允许渲染——既然读回总有可能发生那就保证画进去的东西不含秘密读回自然无害。来源README.md 的 Read-back-allowed rendering 一节。敏感信息黑名单这些内容不能画进 Canvas#敏感信息风险原因1跨源嵌入内容iframe、img等把其他站点的私有数据变成可读像素2url跨源引用background-image、clip-path同上3被跨源数据污染的canvas经典 tainted canvas 场景4SVG 跨源引用use、pattern、feImage同上5系统颜色、主题、偏好设置可用于设备/系统指纹识别6拼写与语法检查标记暴露用户正在书写的内容7已访问链接信息visited暴露浏览历史8表单自动填充的待填入内容涉及姓名、卡号等个人数据9字幕偏好、IME 候选窗与特殊排版暴露个性化设置与输入行为⚠️ 还有一个容易被忽略的细节子像素文字抗锯齿同样会被排除因为它也可被用于指纹识别。注意一个部分放行同源的iframe会正常绘制但其中嵌套的跨源内容不会。允许清单这些信息不算敏感有些信息虽然新出现在画布里但设计文档明确判定它们不敏感——判断标准只有一条作者代码本就能观察到的信息才允许出现在画布上。 页面内搜索find-in-page与 text-fragment 标记滚动条与表单控件的外观浏览器中早已可被检测光标闪烁频率caret blink rateforced-colorsJS 本就能通过媒体查询读取侧信道也被堵住不止像素还有刷新时机很多 API 只防画出来但 html-in-canvas 把invalidation失效/重绘通道也纳入了防线paint事件的触发时机本身就是信息源——比如某个敏感内容变了就会多触发一次paint。设计上对敏感信息的剔除是渲染和失效判定同时生效的不画它也不会因为它的变化而多触发paint。官方安全与隐私问卷security-privacy-questionnaire.md对关键问题的回答非常直接不暴露新的安全信息并尽量把新增隐私信息压到最低渲染出的像素不允许出现 PII跨源信息、已访问链接、拼写检查、自动填充预览一律不绘制不引入跨会话持久化状态、不访问传感器、不新增脚本执行机制隐私模式下行为无差异。新手体验如何在浏览器里试跑使用 Chrome Canary打开chrome://flags/#canvas-draw-element启用该特性参考 README.md 的最小示例核心结构只有两行属性canvas idcanvas layoutsubtree form drawable idform_element input idname /form /canvas在paint事件里调用ctx.drawElementImage(form_element, 100, 0)表单就会被绘制进 Canvas——而上面黑名单里的内容绘制时会自动被隐形处理无需你手动遮罩。更多可运行的演示均为仓库内示例旋转复杂文本Examples/complex-text.html多行标签饼图Examples/pie-chart.html3D 立方体贴 HTMLExamples/webGL.html嵌套 drawable 元素Examples/nested-sparkles.htmlWebGPU 果冻滑块Examples/webgpu-jelly-slider/小结三句话记住这套安全设计画进去的只限脚本本来就看得见的信息——read-back-allowed 的核心原则敏感信息在渲染和失效触发两个通道同时剔除堵住像素读回与侧信道两条路用最少的信息换最大的功能光标、焦点、滚动条等交互所需信息放行系统偏好、浏览历史、跨源数据一律拦下。对开发者而言这套规则意味着你不用自己操心哪些内容该遮罩画布天生就是防泄漏的——这正是 html-in-canvas 最值得借鉴的安全设计。【免费下载链接】html-in-canvas项目地址: https://gitcode.com/gh_mirrors/ht/html-in-canvas创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 html-in-canvas 安全与隐私：哪些敏感信息不能画进Canvas？读回允许渲染（read-back-allowed）完整解读
html-in-canvas 安全与隐私哪些敏感信息不能画进Canvas读回允许渲染read-back-allowed完整解读【免费下载链接】html-in-canvas项目地址: https://gitcode.com/gh_mirrors/ht/html-in-canvashtml-in-canvas 是 Chromium 社区的一个开放提案让 2D/3Dcanvas直接绘制带样式的 HTML 内容核心 API 为drawElementImage。本文面向新手完整解读它的安全与隐私设计哪些敏感信息绝不能画进 Canvas以及 read-back-allowed读回允许渲染如何守住像素读回这道安全底线。为什么画进Canvas是个安全敏感操作传统上canvas里的像素一旦生成网页脚本就能通过getImageData()等方法逐像素读回——而 WebGL/WebGPU 的像素读回更是随时可用。html-in-canvas 让 DOM 内容变成 Canvas 像素等于给脚本开了一条像素级观测通道。攻击者可能借此探测两条路像素读回把画进 Canvas 的内容读回来逐像素分析时机侧信道观察paint事件是否触发、何时触发也能推断出画面上发生了什么。所以设计的第一条铁律是任何绘制元素快照的 API 和paint事件绝不能泄露网页代码原本看不到的安全/隐私敏感信息。这个设计就叫read-back-allowed rendering读回允许渲染——既然读回总有可能发生那就保证画进去的东西不含秘密读回自然无害。来源README.md 的 Read-back-allowed rendering 一节。敏感信息黑名单这些内容不能画进 Canvas#敏感信息风险原因1跨源嵌入内容iframe、img等把其他站点的私有数据变成可读像素2url跨源引用background-image、clip-path同上3被跨源数据污染的canvas经典 tainted canvas 场景4SVG 跨源引用use、pattern、feImage同上5系统颜色、主题、偏好设置可用于设备/系统指纹识别6拼写与语法检查标记暴露用户正在书写的内容7已访问链接信息visited暴露浏览历史8表单自动填充的待填入内容涉及姓名、卡号等个人数据9字幕偏好、IME 候选窗与特殊排版暴露个性化设置与输入行为⚠️ 还有一个容易被忽略的细节子像素文字抗锯齿同样会被排除因为它也可被用于指纹识别。注意一个部分放行同源的iframe会正常绘制但其中嵌套的跨源内容不会。允许清单这些信息不算敏感有些信息虽然新出现在画布里但设计文档明确判定它们不敏感——判断标准只有一条作者代码本就能观察到的信息才允许出现在画布上。 页面内搜索find-in-page与 text-fragment 标记滚动条与表单控件的外观浏览器中早已可被检测光标闪烁频率caret blink rateforced-colorsJS 本就能通过媒体查询读取侧信道也被堵住不止像素还有刷新时机很多 API 只防画出来但 html-in-canvas 把invalidation失效/重绘通道也纳入了防线paint事件的触发时机本身就是信息源——比如某个敏感内容变了就会多触发一次paint。设计上对敏感信息的剔除是渲染和失效判定同时生效的不画它也不会因为它的变化而多触发paint。官方安全与隐私问卷security-privacy-questionnaire.md对关键问题的回答非常直接不暴露新的安全信息并尽量把新增隐私信息压到最低渲染出的像素不允许出现 PII跨源信息、已访问链接、拼写检查、自动填充预览一律不绘制不引入跨会话持久化状态、不访问传感器、不新增脚本执行机制隐私模式下行为无差异。新手体验如何在浏览器里试跑使用 Chrome Canary打开chrome://flags/#canvas-draw-element启用该特性参考 README.md 的最小示例核心结构只有两行属性canvas idcanvas layoutsubtree form drawable idform_element input idname /form /canvas在paint事件里调用ctx.drawElementImage(form_element, 100, 0)表单就会被绘制进 Canvas——而上面黑名单里的内容绘制时会自动被隐形处理无需你手动遮罩。更多可运行的演示均为仓库内示例旋转复杂文本Examples/complex-text.html多行标签饼图Examples/pie-chart.html3D 立方体贴 HTMLExamples/webGL.html嵌套 drawable 元素Examples/nested-sparkles.htmlWebGPU 果冻滑块Examples/webgpu-jelly-slider/小结三句话记住这套安全设计画进去的只限脚本本来就看得见的信息——read-back-allowed 的核心原则敏感信息在渲染和失效触发两个通道同时剔除堵住像素读回与侧信道两条路用最少的信息换最大的功能光标、焦点、滚动条等交互所需信息放行系统偏好、浏览历史、跨源数据一律拦下。对开发者而言这套规则意味着你不用自己操心哪些内容该遮罩画布天生就是防泄漏的——这正是 html-in-canvas 最值得借鉴的安全设计。【免费下载链接】html-in-canvas项目地址: https://gitcode.com/gh_mirrors/ht/html-in-canvas创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考