ARTICLE DETAIL

资讯详情

深耕网站建设与运营推广的一线实战洞察。

Email Verification API 表单提交注入机制:浏览器何时填入 token

Email Verification API 表单提交注入机制:浏览器何时填入 token Email Verification API 表单提交注入机制浏览器何时填入 token【免费下载链接】email-verificationverified autofill项目地址: https://gitcode.com/GitHub_Trending/em/email-verificationEmail Verification API邮箱验证 API对应开源项目 email-verification是浏览器正在孵化的一项已验证自动填充verified autofill能力当用户选好邮箱、点击提交时浏览器会在表单提交瞬间自动把一个由邮箱服务商签发的加密签名 token 填入隐藏字段让网站不用发邮件验证码就能完成邮箱所有权验证。本文将讲清楚这个注入机制的完整触发链路以及浏览器到底何时动手。 一分钟看懂为什么需要这个 API传统邮箱验证的流程大家都熟悉网站生成一个不可猜测的验证码OTP或魔法链接发到用户邮箱用户切换上下文去收件箱里抄回验证码。这套流程又慢邮件可能进垃圾箱又烦用户要来回切换还有钓鱼风险直接拖累了注册转化。Email Verification API 的思路是三方协作角色是谁做什么验证方Verifier你的网站在表单里声明我要一个验证 token用户代理UA浏览器居中协调发现颁发者、校验登录、申请并注入 token颁发者Issuer邮箱服务商为用户签发加密签名的邮箱验证 tokenEVT核心收益用户只需点一次允许网站收到的 token 就是密码学意义上的邮箱所有权证明无需再走收邮件—抄验证码的流程。 表单改造只需一行隐藏输入框 nonce对网站来说改动轻到几乎无痛——在现有表单里加一个隐藏输入框即可input typeemail nameemail autocompleteemail input typehidden nametoken nonce服务端每次渲染生成的随机值 autocompleteemail-verification-token两个关键点autocompleteemail-verification-token告诉浏览器这个字段留给验证 token浏览器会在合适的时机自动填值nonce服务端为每次页面渲染生成的加密随机数用来把 token 和这一次表单展示绑定起来防止重放攻击每次渲染必须唯一。完整表单示例见规范文档 index.bs网站侧的请求方式说明见 README.md。⏱️ 核心机制浏览器在两个时机各做一件事这是本文的重点。浏览器的行为分成准备和注入两个阶段很多人误以为选完邮箱 token 就填进去了其实注入发生在更晚的时刻。时机一用户选择邮箱的瞬间浏览器开始后台准备当用户在表单的邮箱输入框里选中一个邮箱地址比如从自动填充建议中点选时浏览器开始后台流水线作业找到该表单里第一个autocompleteemail-verification-token的输入框并读取它的nonce为空则直接放弃通过 DNS 记录发现颁发者——邮箱域名可以把自己委托给专门的验证服务如gmail.com委托给accounts.google.com校验登录状态检查用户是否登录着该颁发者并拉取账号列表做大小写不敏感的邮箱匹配弹出权限提示询问用户是否共享该邮箱的验证 token用户允许后浏览器向颁发者申请 EVT并把nonce和网站 origin 绑定进 token生成 Key-Bound JWT。注意整个过程中 token 只是先存在表单的 EVP 状态里页面里的隐藏输入框依然是空的。浏览器处理模型细节见 index.bs。时机二表单提交瞬间、onsubmit 触发之前才真正填值规范的表单提交集成规则很明确见 index.gs表单提交时若该表单已有验证 token且当前邮箱输入框的值与获取 token 时的邮箱大小写不敏感地一致浏览器就把 token 写入隐藏输入框的value这一动作发生在onsubmit事件触发之前、标准表单提交流程接管之前README.md。换句话说选邮箱 ≠ 填 token提交表单 ≠ 才申请 token而是提交瞬间、onsubmit 之前这个精确窗口完成注入。各前置条件不满足时浏览器全部静默降级表单照常提交前置条件不满足时浏览器行为表单中有 token 隐藏输入框且nonce非空放弃走传统验证码流程用户已登录对应邮箱颁发者放弃用户点击允许授权放弃提交时邮箱值与授权时一致放弃 为什么等到提交才注入是更聪明的设计优雅降级网站不写一行 JS、不监听任何事件。拿不到 token 时表单照常提交服务端收不到 token 就回退到发验证码的老流程用户体验不崩天然防重放token 与nonce 网站 origin 双重绑定截获也没法拿到别处重放规范安全章节见 index.bs零额外请求token 直接搭表单 POST 的顺风车服务端在同一个请求里即可验签无需二次往返隐私考量申请 token 的请求不带网站 origin 头邮箱服务商无法借此知道用户正在哪个网站注册见 index.bs 与 QUESTIONNAIRE.md 的自述问卷。️ 新手上手在 Chrome 里实测一次想亲眼看到 token 被填入的时刻按 HOWTO.md 的官方步骤操作安装 Chrome Canary 渠道浏览器打开chrome://flags/搜索Email Verification Protocol启用#email-verification-protocol后重启在chrome://version确认版本在 145 及以上到chrome://settings/addresses确认已保存一个支持该协议的邮箱地址确认当前已登录该邮箱服务商。之后在带隐藏输入框的表单里选邮箱、点提交抓包就能看到token字段在提交请求中凭空出现。 仓库资料导航项目为 W3C WICG 孵化提案仓库为只读克隆后可离线阅读git clone https://gitcode.com/GitHub_Trending/em/email-verification文件内容适合谁README.md提案全文问题、四步流程、激活策略、备选方案与安全隐私讨论想了解为什么这样设计index.bs规范源文件HTML 扩展、浏览器处理模型、验签流程想抠实现细节含本文明引用的行号锚点index.html渲染后的规范成品Unofficial Proposal Draft只读规范、不想跑构建工具HOWTO.mdChrome 实测与网站接入步骤想动手验证QUESTIONNAIRE.mdW3C 安全与隐私自述问卷关心隐私暴露面CONTRIBUTING.mdWICG 贡献流程CLA、贡献者署名约定想参与讨论 小结记住两个词——选邮箱时准备提交时注入。浏览器把 token 的填值精确卡在了 onsubmit 之前的那个瞬间用一次声明式的隐藏输入框换掉了整个发码—抄码时代的摩擦。【免费下载链接】email-verificationverified autofill项目地址: https://gitcode.com/GitHub_Trending/em/email-verification创作声明:本文部分内容由AI辅助生成(AIGC),仅供参考
返回列表