如何为内联样式（如background-image）设置referrerpolicy？

首先检查你的<meta>标签是否正确放置——必须放在<head>标签内，且没有被其他后续的referrer策略设置覆盖（比如其他<meta>标签或HTTP头的Referrer-Policy）。Chrome 124确实遵循文档级referrer策略处理内联样式加载的资源，但有几个容易踩的坑：

• HTTP头优先级高于meta标签：如果服务器返回了Referrer-Policy HTTP头（比如strict-origin-when-cross-origin），会覆盖<meta>标签的设置，此时内联背景图请求会带Referer头。可以在Chrome开发者工具的「Network」面板里查看响应头确认这一点。
• 内联样式的特殊场景例外：Chrome对data:协议或同源资源的referrer策略处理有特殊逻辑，但你的情况是跨域资源，这条不适用。

如果确认meta标签和HTTP头都正确设置为no-referrer但问题依旧，这可能是Chrome 124的兼容性问题。可以尝试以下替代方案：

• 使用CSS类而非内联样式：把背景图定义在外部CSS文件或<style>标签的类中，此时文档级referrer策略会正常生效：

  .bg-image {
    background-image: url('https://myseconddomain.com/image.png');
  }
  

  给div添加类：<div class="bg-image"></div>

• 用JavaScript动态设置背景图并指定referrer策略：通过fetch获取资源时指定策略，转为data URL后再设置给div：

  fetch('https://myseconddomain.com/image.png', { referrerPolicy: 'no-referrer' })
    .then(res => res.blob())
    .then(blob => {
      const url = URL.createObjectURL(blob);
      document.querySelector('.target-div').style.backgroundImage = `url(${url})`;
    });
  

• 使用<link rel="preload">预加载资源并指定referrer策略：预加载时设置的策略会被后续内联样式复用：

  <link rel="preload" as="image" href="https://myseconddomain.com/image.png" referrerpolicy="no-referrer">
  

内容的提问来源于stack exchange，提问作者Jacket