如何控制浏览器在发起 HTTP 请求时禁止发送Referer 头

机灵的娇娇
1,913 阅读4分钟

一、禁止网页所有请求发送 reffer

Html中添加<meta name="referrer" content="never"> ，用于控制浏览器在发起 HTTP 请求时如何处理 Referer 头。它影响网页向其他资源发送请求时，是否包含来源页面的 URL 信息。

referrer 属性的选项

  • "no-referrer" : 浏览器不发送 Referer 头。
  • "no-referrer-when-downgrade" (默认): 如果从 HTTPS 页面请求 HTTP 资源，则不发送 Referer 头。否则发送完整的 URL。
  • "origin" : 浏览器发送来源页面的根 URL（不包含路径和参数）。
  • "origin-when-cross-origin" : 对同源请求发送完整 URL，对跨域请求发送根 URL。
  • "same-origin" : 仅对同源请求发送 Referer 头。
  • "strict-origin" : 对跨协议（HTTPS 到 HTTP）请求不发送 Referer 头，对同协议跨域请求发送根 URL。
  • "strict-origin-when-cross-origin" : 同源请求发送完整 URL，跨协议请求不发送 Referer 头，跨域同协议请求发送根 URL。
  • "unsafe-url" : 无论请求是否跨域或跨协议，始终发送完整 URL。
  • "never" : 浏览器不发送 Referer 头（等同于 "no-referrer"）。

示例

使用 <meta name="referrer" content="never">，可以确保浏览器在请求资源时不发送 Referer 头。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Referrer Policy Example</title>
    <meta name="referrer" content="never">
  </head>
  <body>
    <h1>Referrer Policy Example</h1>
    <p>This page has a referrer policy that never sends the referrer header.</p>
    <a href="https://example.com">Link to Example.com</a>
    <script>
      // Example script to fetch data
      fetch('https://example.com/data')
        .then(response => response.json())
        .then(data => console.log(data))
        .catch(error => console.error('Error:', error));
    </script>
  </body>
</html>
​

在这个示例中，页面设置了 referrer 策略为 "never"，因此浏览器在点击链接或进行网络请求时都不会发送 Referer 头。

使用场景

  • 隐私保护: 防止向目标网站泄露来源页面的 URL。
  • 安全考虑: 避免敏感信息通过 Referer 头暴露。

通过 <meta name="referrer" content="never">，你可以控制页面的 Referer 头发送策略，提升隐私和安全性。

二、只禁止图片请求发送reffer

HTML 的 <img> 标签有一个 referrerPolicy 属性，可以用来设置在加载图片时发送的 Referer 头的策略。这个属性控制浏览器在请求图片资源时是否发送以及如何发送 Referer 头。

referrerPolicy 属性的值

referrerPolicy 属性可以设置为以下值：

  1. **no-referrer**: 浏览器不发送 Referer 头。
  2. **no-referrer-when-downgrade**: 如果从 HTTPS 页面请求 HTTP 资源，则不发送 Referer 头。否则发送完整的 URL。这是默认值。
  3. **origin**: 浏览器发送来源页面的根 URL（不包含路径和参数）。
  4. **origin-when-cross-origin**: 对同源请求发送完整 URL，对跨域请求发送根 URL。
  5. **same-origin**: 仅对同源请求发送 Referer 头。
  6. **strict-origin**: 对跨协议（HTTPS 到 HTTP）请求不发送 Referer 头，对同协议跨域请求发送根 URL。
  7. **strict-origin-when-cross-origin**: 同源请求发送完整 URL，跨协议请求不发送 Referer 头，跨域同协议请求发送根 URL。
  8. **unsafe-url**: 无论请求是否跨域或跨协议，始终发送完整 URL。

示例

以下是一些使用 referrerPolicy 属性的示例：

禁止发送 Referer 头

<img src="https://example.com/image.jpg" referrerPolicy="no-referrer" alt="Example Image">

仅发送来源页面的根 URL

<img src="https://example.com/image.jpg" referrerPolicy="origin" alt="Example Image">

默认行为（no-referrer-when-downgrade）

<img src="https://example.com/image.jpg" referrerPolicy="no-referrer-when-downgrade" alt="Example Image">

仅对同源请求发送 Referer 头

<img src="https://example.com/image.jpg" referrerPolicy="same-origin" alt="Example Image">

使用场景

  1. 隐私保护: 如果你不希望在请求第三方资源时泄露来源页面的 URL 信息，可以使用 no-referrer 或 origin 等策略。
  2. 安全性: 在 HTTPS 页面中请求 HTTP 资源时，可以使用 no-referrer-when-downgrade 或 strict-origin 来防止泄露敏感信息。
  3. 兼容性: 根据具体需求选择合适的 referrerPolicy 值，以确保兼容性和功能性。

注意事项

  • referrerPolicy 只能在支持它的浏览器中生效。大多数现代浏览器都支持这个属性，但在使用时仍需考虑兼容性。
  • 设置不当可能会影响某些分析或追踪功能，因为这些功能依赖于 Referer 头来识别来源页面。

三、除了img 还有哪些标签支持 referrerPolicy 属性

这些标签主要是那些会发起网络请求来加载资源的标签。以下是支持 referrerPolicy 属性的一些常用标签：

支持 referrerPolicy 属性的标签

  1. <a>

    • 用于定义超链接。
    • 示例：
<a href="https://example.com" referrerPolicy="no-referrer">Example Link</a>

  1. <area>

    • 用于在图像映射中定义可点击区域。
    • 示例：
<map name="example-map">
  <area shape="rect" coords="34,44,270,350" href="https://example.com" alt="Example Area" referrerPolicy="no-referrer">
</map>

  1. <iframe>

    • 用于嵌入另一个 HTML 页面。
    • 示例：
<iframe src="https://example.com" referrerPolicy="no-referrer"></iframe>

  1. <link>

    • 用于定义文档与外部资源的关系（如样式表）。
    • 示例：
<link rel="stylesheet" href="https://example.com/style.css" referrerPolicy="no-referrer">

  1. <script>

    • 用于嵌入或引用外部 JavaScript 代码。
    • 示例：
<script src="https://example.com/script.js" referrerPolicy="no-referrer"></script>

  1. <form>

    • 用于定义一个表单。
    • 示例：
<form action="https://example.com/submit" referrerPolicy="no-referrer">
  <input type="text" name="example" value="example">
  <button type="submit">Submit</button>
</form>

总结

通过为这些标签设置 referrerPolicy 属性，可以更好地控制在请求资源时发送的 Referer 头，保护用户的隐私并增强网页的安全性。这些标签包括但不限于 <a>, <area>, <iframe>, <link>, <script>, 和 <form>。根据具体需求选择合适的策略值，确保应用的安全性和隐私保护。

avatar
文章
阅读
粉丝