Fetch request.referrerPolicy 属性-JavaScript中文网-JavaScript教程资源分享门户

在 Web 开发中，处理 HTTP 请求和响应是前端工程师经常需要面对的任务。Fetch API 是一种现代化、强大的工具，用于发起网络请求并处理响应。其中，request.referrerPolicy 属性是一个重要的配置选项，它允许开发者控制请求的 referrer 信息如何发送。

引入 request.referrerPolicy 属性

request.referrerPolicy 属性可以设置为不同的值，以控制浏览器在发送请求时携带的 referrer 信息。这不仅影响到服务器接收的信息量，还能帮助提高网站的安全性和隐私保护。

设置 referrerPolicy 的值

request.referrerPolicy 可以被设置为以下几种值之一：

'no-referrer': 不发送任何 referrer 信息。
'no-referrer-when-downgrade': 默认值。当 HTTPS 页面请求 HTTP 资源时，不发送 referrer 信息；否则发送完整的 URL。
'same-origin': 当跨域请求时，不发送 referrer 信息；同域请求时，发送完整的 URL。
'origin': 发送 referrer 信息，但只包含 URL 的源（即协议、主机名和端口号），不包含路径或查询字符串。
'strict-origin': 类似于 'same-origin'，但在 HTTPS 页面请求 HTTP 资源时，仅发送源信息。
'origin-when-cross-origin': 同域请求时发送完整的 URL，跨域请求时仅发送源信息。
'strict-origin-when-cross-origin': 类似于 'origin-when-cross-origin'，但在 HTTPS 页面请求 HTTP 资源时，仅发送源信息。
'unsafe-url': 总是发送完整的 URL 作为 referrer 信息，包括路径和查询字符串。这个选项可能会泄露敏感信息，因此应谨慎使用。

使用示例

示例 1: 不发送任何 referrer 信息

fetch('https://example.com/resource', {
    method: 'GET',
    headers: {
        'Content-Type': 'application/json'
    },
    referrerPolicy: 'no-referrer'
});

在这个例子中，无论请求来自哪个页面，都不会发送任何 referrer 信息。

示例 2: 控制跨域请求的 referrer 信息

fetch('https://another-example.com/data', {
    method: 'POST',
    headers: {
        'Content-Type': 'application/json'
    },
    referrerPolicy: 'same-origin'
});

如果当前页面和目标页面不在同一个源上，那么这次请求将不会发送任何 referrer 信息。

示例 3: 保持 referrer 信息安全

fetch('https://secure-site.com/private', {
    method: 'GET',
    headers: {
        'Content-Type': 'application/json'
    },
    referrerPolicy: 'strict-origin-when-cross-origin'
});

在这个例子中，如果请求是从一个 HTTPS 页面发起的，那么跨域请求时只会发送源信息。这样可以避免暴露不必要的详细信息。

结论

通过合理设置 request.referrerPolicy 属性，前端开发者可以在不影响用户体验的前提下，增强网站的安全性和隐私保护能力。选择合适的值取决于具体的业务需求和安全性考虑。正确使用此属性有助于防止潜在的安全漏洞，并确保用户数据的安全。