Recurly.js HostedFields深度解析为什么iframe托管卡号字段让PCI合规如此简单【免费下载链接】recurly-jsSimple subscription billing in the browser项目地址: https://gitcode.com/gh_mirrors/re/recurly-jsRecurly.js是一款运行在浏览器中的订阅支付 SDK核心能力之一HostedFields托管卡号字段它用跨域 iframe 把卡号、有效期、CVV 输入框搬离你的页面用户输入的银行卡数据全程只存在于 Recurly 的服务器域内你的网站自始至终拿不到明文卡号——这正是让PCI 合规从大工程变成小确幸的关键设计。本文带你从源码角度看懂这套机制几乎没有代码门槛。什么是 HostedFields一个看不见输入框的输入框想象一下页面上有四个普通的空div用户却能往里打字——卡号、月、年、CVV。秘密是每个 div 内部被动态注入了一个透明 iframe真正的input就藏在 iframe 里。HostedFields 支持 5 种字段类型定义在 hosted-fields.js 中类型用途number卡号month/year有效期cvv安全码card一个 iframe 打包全部卡信息最常用宿主页面里你只需要留好占位符 div 并配上 CSS 尺寸Recurly.js 会自动完成注入见 hosted-field.js 的inject()方法。iframe 隔离内幕卡号为什么碰不到你的域名PCI DSS 的核心要求之一是商户页面不得接触敏感卡号数据。Recurly.js 用三层设计把它变成默认行为跨域 iframe输入框运行在 Recurly 官方服务器域名下你的 JS 受同源策略限制读不到里面的任何值——想读都没这个能力。iframe 的地址由 hosted-field.js 中的url属性生成指向${api}/field.html配置参数直接编码在 URL hash 中随页面加载。消息总线Bus宿主页与 iframe 之间靠浏览器原生的postMessage通信bus.js 负责监听、按groupId过滤并分发这些消息。注意消息里传输的只有状态是否聚焦、是否为空、是否校验通过绝无明文卡号。iframe 内令牌化点击支付后父页面通过总线发出token:init事件见 token.js。iframe 内的脚本把各字段的值收集起来在 iframe 域内直接调用 token 接口完成后通过token:done:id把令牌送回父页面可参考测试桩实现 field.html.ejs。整个流程一句话总结明文卡号只在 Recurly 域内出生、流转、死亡你的服务器只收到一个安全的 token。这就是PCI 合规如此简单的全部原因——你把责任最大的环节物理隔离出去了。三行 CSS 搞定字段美化状态类名是设计亮点iframe 本身没法从外部直接换肤Recurly.js 的巧妙之处在于容器 div 上会随状态动态更新 CSS 类名见 hosted-field.js 的classList属性recurly-hosted-field-focus字段聚焦时recurly-hosted-field-valid内容校验通过recurly-hosted-field-invalid失焦且内容无效配合 recurly.css 中的默认样式你只需在聚焦/合法/非法三种状态下各写几条 CSS就能做出与原生输入框无异的体验。细节体验焦点、Tab 键与移动端适配新手容易忽略的是iframe 嵌套的表单在键盘 Tab 导航和移动端上很容易翻车而 HostedFields 做了完整的工程化处理延迟焦点绑定点击字段容器或对应的label都会把焦点送进 iframehosted-field.js符合用户对原生表单的直觉。Tab 键无缝穿越iframe 内部监听 Tab 键通过总线把tab:next / tab:previous事件报给父页面父页面再用 tabbableItems() 计算出页面中相邻的可聚焦元素并聚焦——Tab 序列跨 iframe 边界依然顺畅。移动端代理在手机上会在 iframe 前插入一个隐藏输入框作为Tab 代理hosted-field.js解决移动端浏览器无法直接聚焦 iframe 的顽疾。快速上手5 分钟搭好合规的卡号表单从 Recurly 官方 CDN 加载recurly.jsREADME.md 强调请勿自行托管或打包务必走 CDN 以保证安全版本。在表单里放 4 个带固定宽高的空 div分别指定number、month、year、cvv的 selector。调用Recurly.hostedFields.configure({ ... })注入字段提交时调用Recurly.token(form, callback)回调里拿到 token 传给后端即可。完整可运行的示例页面在 hosted-fields-card.html.ejs 与 hosted-fields-card-distinct.html.ejs对应的单元测试见 hosted-fields.test.js。总结把安全交给架构把体验留给自己Recurly.js 的 HostedFields 用三个设计回答了如何既合规又好用跨域 iframe 隔离——明文卡号在架构层面就不可能出现在你的域名postMessage 总线——只传状态、只传 token通信极简状态类名 默认样式——CSS 即可美化表单行为与原生一致。对新手而言理解这套机制后再看任何托管字段Hosted Fields方案都会发现它们殊途同归PCI 合规不靠自觉而靠隔离。【免费下载链接】recurly-jsSimple subscription billing in the browser项目地址: https://gitcode.com/gh_mirrors/re/recurly-js创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考