登录框在嵌套页面里时，自动填充如何既好用又安全

很多网站的登录框不在你打开的那一层大页面上，而在页面里嵌套的小页面中（技术上常叫 iframe）。统一登录、支付页、企业门户都很常见。

对用户来说，它仍是一个登录界面；对浏览器扩展来说，却是「网页里的网页」。处理不好时，常见问题包括：

• 候选账号不出现，或菜单位置偏移；
• 密码被填到错误页面；
• 明文密码过早暴露。

蛙记浏览器扩展的做法是：在小页面里发现并填写，在大页面上展示候选并接收选择，由后台完成匹配、安全核对，并把填写任务发回正确位置。

使用流程

步骤	界面表现
1	点进小页面里的账号或密码框
2	出现候选账号或扩展入口
3	点选一条账号
4	账号密码写回该登录框，网站继续登录

与普通页面的关键差别是：

候选菜单画在最外层大页面上，便于点击；密码写回小页面里的输入框，保证填对。

简记为：交互上浮，填写下沉。

为什么不能只扫大页面

嵌套小页面往往来自其他站点，大页面脚本读不到其中的 DOM。扩展如果只在最外层扫描输入框，就会漏掉真正的登录框。

因此蛙记会在**每个相关页面（含嵌套小页面）**中识别账号框与密码框。

分工

角色	位置	职责
识别与填写	各页面 / 小页面内部	发现输入框、计算菜单位置、写入账号密码
界面展示	最外层大页面	展示候选列表、图标与提示
调度	扩展后台	记录登录框所在标签页与小页面；匹配保险库；核对后派发填写任务

对应目标：

1. 找得到：小页面内的登录框也能被识别；
2. 点得到：菜单尽量不被小区域裁切或遮挡；
3. 填得对：写入发生在原小页面，而不是外层其它输入框。

关键设计

1. 用浏览器认定的页面身份区分小页面

同一大页面可能包含多个嵌套区域。扩展结合浏览器提供的权威信息区分：

• 当前浏览器标签；
• 登录框所在的嵌套小页面。

填写任务只发回目标小页面，避免写到相邻区域或外层页面。

2. 菜单位置逐层换算

输入框坐标在小页面内测量，菜单画在大页面上。扩展将位置逐层换算到整页坐标，使菜单贴近目标输入框。

坐标换算只影响菜单显示位置，不决定密码写入哪个小页面；写入目标由页面身份与任务派发决定。

3. 按小页面地址匹配账号

统一登录、支付页中，小页面网址常与大页面不同。匹配保险库时，蛙记参考登录框所在小页面的地址，而不是只看最外层网站。

4. 点选后再取出密码

候选阶段只展示可选账号，不在页面上铺开明文密码。点选之后，扩展会：

1. 确认目标登录框仍在，页面未发生跳转或替换；
2. 确认该凭据仍匹配当前登录地址；
3. 对不安全连接、跨站小页面等场景做额外判断；
4. 通过后取出密码，生成短时有效的填写任务；
5. 将任务仅发送到原小页面执行写入。

5. 写入前的本地检查

小页面收到任务后，还会检查：

• 是否仍是目标文档；
• 任务是否仍在有效期内；
• 当前环境是否允许自动写入。

通过后写入输入框，并触发相应输入事件，便于网站继续后续登录逻辑。

设计目标

目标	做法
识别嵌套登录框	每个小页面独立发现输入框
避免填错页面	使用浏览器认定的页面身份，定向派发填写任务
菜单可点击	在最外层展示，并按整页坐标对齐
密码不早暴露	点选并通过核对后再取出明文密码
页面变化时不硬填	点选后复核、任务限时、写入前再检查
敏感场景更谨慎	不安全连接、跨站小页面等按安全与隐私设置处理

能力边界

情况	说明
登录框在嵌套小页面内	支持识别、展示候选并写回
多层嵌套	支持逐层换算位置；极深嵌套时菜单位置可能略有偏差，但不应填错页面
账号在外层、密码在内层	通常无法一次填齐，需分别填充
需要额外验证的账号	可能不直接自动填充
受限较强的小页面环境	可能无法自动写入

总结

当登录框位于嵌套小页面时，蛙记的路径是：

在小页面内发现并完成填写；在大页面展示候选并接收选择；由后台匹配凭据、完成安全核对，并精确派发填写任务。