Permissions-Policy（浏览器特性权限）安全管控最佳实践

概述

通过在响应头与嵌入策略中配置Permissions-Policy，可限制页面与子帧对敏感特性的访问，实现最小授权与域级隔离。

响应头策略

Permissions-Policy: geolocation=(), camera=(), microphone=(), payment=(self), fullscreen=(self), accelerometer=(), magnetometer=(), gyroscope=()

iframe嵌入约束

<iframe src="/embed.html" allow="geolocation 'none'; microphone 'none'; camera 'none'; fullscreen 'self'"></iframe>

服务器统一设置

function setPermissionsPolicy(res: any) {
  const policy = [
    "geolocation=()",
    "camera=()",
    "microphone=()",
    "payment=(self)",
    "fullscreen=(self)",
    "accelerometer=()",
    "magnetometer=()",
    "gyroscope=()"
  ].join(", ")
  res.setHeader("Permissions-Policy", policy)
}

客户端验证

async function verifyPolicy(url: string): Promise {
  const res = await fetch(url, { method: "GET" })
  const hdr = res.headers.get("permissions-policy") || res.headers.get("Permissions-Policy")
  return !!hdr && hdr.includes("geolocation=()") && hdr.includes("camera=()")
}

运维要点

• 为高敏特性设置空集或仅self
• 子帧统一使用allow属性限制敏感特性
• 在CI中抓取关键页面验证响应头策略

该策略可与CSP、Trusted Types配合形成前端综合防护基线。

Permissions-Policy 管控

通过 Permissions-Policy 响应头限制浏览器特性权限，防止跨站滥用摄像头、麦克风、定位等敏感能力。

• geolocation=() 禁用定位
• camera=() 与 microphone=() 禁用媒体采集