代表性面试主题

前端面试:如何设计安全的本地网络访问?

前端困难
Offer.cc 编辑团队发布 更新

题干

一个公共 HTTPS 仪表盘需要配置用户网络中的打印机和开发助手。请设计本地与回环请求流程,覆盖权限弹窗、iframe 中的 Permissions Policy、混合内容、地址空间判断、浏览器降级,以及防止生产环境意外扫描的测试。

题干与适用场景

仪表盘来自公共 HTTPS 源站,有时要访问私有地址的打印机和用户设备上的 localhost 助手,同时嵌入一个不应访问本地网络的供应商 iframe。请说明浏览器如何区分公共、本地和回环地址空间、何时需要用户授权,以及拒绝后如何恢复。

应用授权、CORS 和设备认证仍需单独处理。浏览器权限是用户同意边界,不代表打印机属于当前账号。假设浏览器不支持 Local Network Access 时,产品可以提供手动配置路径。

面试官考察点

核心信号是能否把公共页面访问私有端点视为安全边界。强回答会指出路由器和打印机可能遭受 CSRF 类攻击,并用安全上下文、地址空间、权限状态和 iframe allowlist 限制流程。

面试官还会追问你是否混淆 local-networkloopback-network,或把 CORS 预检成功误认为已经获得访问权。好的回答会把策略、权限、混合内容、CORS 和设备认证拆成独立闸门。

回答前需要澄清的问题

  • 目标是否预先固定,还是允许用户输入任意 IP?任意扫描需要不同的产品边界,不能藏在普通“连接”按钮后。
  • 助手只在 localhost,还是也可能位于私有子网?这决定使用回环还是本地网络权限。
  • 供应商 iframe 或嵌套 frame 是否可能发起请求?若可能,每个 frame 边界都要显式委托能力和可能的导航源。
  • 支持哪些浏览器和企业策略?不同浏览器的发布时间不同,兼容路径应可观察,不能悄悄降低安全性。

30 秒回答框架

“我会让仪表盘保持 HTTPS,先把目标分类为公共、本地或回环,再在需要时请求对应浏览器权限。响应策略拒绝供应商 iframe 的本地访问;若可信 iframe 必须连接,就只给确切源和全部导航源设置 allow。动作前检查权限状态,说明用途,分别处理混合内容和 CORS,给不支持的浏览器提供手动配置。测试要证明任意主机和生产广告 frame 永远不能触发本地请求。”

分步骤深入解答

第一步:定义信任边界和地址空间

公共网站不能静默向用户路由器、打印机或开发服务发送改变状态的请求。至少区分三类目标:公共地址可从互联网访问;本地地址只在用户网络内可达;回环地址只指向同一设备。localhost 不等同于所有私有子网。

请求清单还应包括 fetch、子资源、WebSocket、WebTransport、WebRTC、Service Worker 请求和 frame 导航。某个库打开 socket 时,即使业务代码没有直接调用 fetch,也可能越过同一边界。

第二步:要求安全上下文和明确权限

页面使用 HTTPS。在支持的浏览器中,设备动作前查询相关权限:

js
const localState = await navigator.permissions.query({ name: "local-network" });
const loopbackState = await navigator.permissions.query({ name: "loopback-network" });

grantedpromptdenied 当成产品状态。弹窗前说明用途;拒绝后展示修复链接或手动配置,不要循环重试。HTTP 页面应视为不支持,即使某个目标碰巧能响应。

第三步:约束嵌入文档

顶层响应只能委托必要能力和源。供应商 frame 不获得本地能力:

http
Permissions-Policy: local-network=(self "https://dashboard.example"), loopback-network=(self "https://dashboard.example")

可信配置 frame 若必须连接,应收窄委托:

html
<iframe src="https://setup.example" allow="local-network https://setup.example; loopback-network https://setup.example"></iframe>

响应策略和 iframe 策略取交集,frame 不能扩大父级拒绝。如果 frame 会导航到也要访问本地的其他源,就显式列出该源,否则导航后拒绝。嵌套 frame 的每层边界都要有策略。

第四步:分开权限、混合内容和 CORS

权限不会让所有不安全请求都合法。有些浏览器在用户同意后允许特定本地 HTTP 端点,其他混合内容检查仍可能生效。只有在浏览器和端点契约支持时,才使用请求的目标地址空间信息;不能把它当成公共目标的绕过开关。

CORS 决定目标是否允许当前源读取响应,并不授权公共页面访问打印机,也不能替代设备认证。改变状态的命令应使用设备专属挑战或配对码,并保证命令幂等。

第五步:设计降级和遥测

不支持的浏览器应提供手动 IP、原生助手或引导式配对。记录目标类别、权限状态、策略结果、浏览器能力、CORS 结果和设备认证结果,不记录凭据或本地响应原文。若发布后出现新的目标类别请求本地访问,或广告 frame 尝试访问,应触发告警。

第六步:测试负向矩阵

测试 localhost、私有 IP、解析为公共地址的公共主机名、解析为本地地址的公共主机名、HTTP 页面、缺少权限、拒绝权限、缺少 iframe 委托、嵌套 frame、导航到未列出的源、CORS 拒绝、设备认证失败,以及 DNS 解析期间地址类别变化。确认只有用户明确动作能触发弹窗,后台重试不会扫描地址段。

高质量示范回答

“我会把公共到本地的请求当成必须申请并收窄的能力。仪表盘保持 HTTPS,分别判断打印机和助手的目标类别,查询 local-networkloopback-network 状态,并在一次受限请求前解释弹窗。响应策略拒绝供应商 iframe;可信配置 iframe 只委托配置源和它可能导航到的源。

我会把浏览器权限、混合内容、CORS 和设备认证分成不同闸门。浏览器拒绝或不支持时走手动配对,不反复请求。测试覆盖本地、回环、公共、DNS 重新分类、嵌套 frame、缺少委托、权限拒绝、CORS 和设备认证失败。广告或任意主机能触发请求或弹窗时立即停止发布。”

常见错误

  • 把所有私有 IP 当作回环 → 回环与本地网络权限语义不同 → 先判断目标地址类别。
  • 拒绝后持续重试 → 会造成骚扰和扫描行为 → 只解释一次并提供修复路径。
  • 认为 CORS 就能信任打印机 → CORS 控制响应共享,不证明设备身份 → 配对设备并认证命令。
  • 给供应商 frame local-network * 重定向和嵌套文档会扩大信任集合 → 列确切源或拒绝委托。
  • 只用 localhost 测试 → 可能没有覆盖公共到本地边界 → 从公共 HTTPS 测试源访问各类地址。

追问及应对

追问一:开发环境的 localhost 正常,生产为什么失败?

开发环境可能来自回环源,或浏览器尚未启用新限制。生产是公共源访问回环或本地空间,会同时遇到安全上下文、权限、策略、混合内容和 CORS 闸门。应从公共 HTTPS 测试源复现。

追问二:iframe 会自动继承顶层权限吗?

只能在策略和委托规则允许时继承。跨源 frame 需要显式能力授权,嵌套 frame 还需要逐层委托。用户决定绑定嵌入上下文,但不能绕过缺少 allow 或未列出的导航源。

追问三:agent.example 的 DNS 从公共地址变为私有地址怎么办?

重新判断解析地址并要求相应权限和安全上下文路径,不能永久缓存公共分类。记录分类变化;若目标不在批准集合中,默认失败。

追问四:为什么有权限弹窗仍不足以执行打印机命令?

弹窗只表示用户允许该站点进行网络访问,不会认证设备或授权操作。应配对设备,将命令绑定账号和 nonce,并让重试幂等。

公开来源

同类题目