HTML中area标签的安全属性referrerpolicy用法-html教程-PHP中文网

area标签的referrerpolicy属性生效，但仅当其位于带usemap的img中且用户点击触发跳转时才起作用；必须直接写在area标签上，值大小写敏感，同源跳转或href为空时无效。

html中area标签的安全属性referrerpolicy用法

area 标签的 referrerpolicy 属性是否生效？

生效，但仅当 area 位于带 usemap 的 img 中、且用户点击该热区触发跳转时才起作用。它和 a 标签一样，属于「导航类元素」，浏览器会据此裁剪 Referer 请求头。但注意：area 本身不渲染、不可见，它的行为完全依赖父级 img 和 map 定义，容易被误认为“没效果”。

referrerpolicy 在 area 上怎么写才有效？

必须直接写在 area 标签上，不能靠父 img 或 map 传递。值大小写敏感，拼错就退化为默认策略 no-referrer-when-downgrade：

Doc To HTML

使用 MinerU 文档处理引擎将 Word 文档（.doc、.docx）转换为保留结构和格式的干净 HTML。

下载

@@##@@
<map name="chart-map"><area shape="rect" coords="0,0,100,50" href="https://pay.example.com/checkout" referrerpolicy="strict-origin-when-cross-origin">
<area shape="circle" coords="200,100,30" href="https://support.example.com/ticket" referrerpolicy="origin"></map>

referrerpolicy="strict-origin-when-cross-origin"：推荐用于含参数的跳转（如带 ?order_id=），跨源只发 https://your-site.com
referrerpolicy="origin"：适合跳转到客服、帮助页等低敏场景，比默认值更克制
不要用 unsafe-url：热区常对应业务关键路径，暴露完整 URL 风险极高

常见踩坑点：为什么设置了却没生效？

原因往往不是语法错误，而是行为触发条件不满足：

右键“在新标签页中打开”会绕过 area 的 referrerpolicy，浏览器走自身默认策略
area 的 href 是空或 # 时，不发起导航请求，referrerpolicy 被忽略
同源跳转（如 href="/settings"）下，该属性被浏览器静默忽略——Referer 默认发完整路径
用了 rel="noreferrer" 却加在 area 上：无效，rel 不支持 area，只对 a 和 form 生效

和 a 标签比，area 的 referrerpolicy 有什么特殊限制？

核心差异在于可控性更低、调试更难：

无法通过 JavaScript 动态设置或读取 area.referrerpolicy（多数浏览器不暴露该属性）
DevTools 的 Network 面板里，很难快速定位某次跳转来自哪个 area —— 它没有独立 DOM 可 hover，只能靠请求 URL 倒推
若热区重叠或坐标定义模糊，用户实际点击位置可能命中多个 area，而浏览器只按 HTML 顺序取第一个匹配项，策略也只应用第一个
不支持 rel="noreferrer"，所以想彻底清 Referer，只能选 referrerpolicy="no-referrer"，但要注意目标站是否校验 Referer

实际部署时，最容易被忽略的是「同源不生效」和「右键新开失效」这两条。别指望靠它防住所有 Referer 泄露，关键跳转仍需配合后端 Referrer-Policy 响应头兜底。