如何绕过CSP在Safari扩展中加载远程图片

一、Safari下CSP限制的远程图片加载问题 #

1. 后台脚本代理中转资源 #

利用扩展后台不受页面CSP约束的特性，通过后台脚本代为请求图片资源，再传递给内容脚本使用：

• 内容脚本端：发送包含目标图片URL的消息给后台

// content-script.js
chrome.runtime.sendMessage({ action: 'fetchImage', url: 'https://example.com/image.jpg' }, (response) => {
  if (response.blob) {
    const img = document.createElement('img');
    img.src = URL.createObjectURL(response.blob);
    document.body.appendChild(img);
  }
});

• 后台脚本端：监听消息并处理请求

// background.js
chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
  if (request.action === 'fetchImage') {
    fetch(request.url)
      .then(res => res.blob())
      .then(blob => sendResponse({ blob }))
      .catch(err => console.error(err));
    return true; // 保持消息通道开放，用于异步响应
  }
});

这种方式完全绕开页面CSP的限制，且无需本地托管大量资源。

2. 动态修改页面CSP响应头（仅适用于HTTP头设置的CSP） #

通过Safari扩展的declarativeNetRequest能力修改页面的CSP响应头，添加允许加载目标图片源的规则：

1. 在manifest.json中声明权限：

{
  "permissions": ["declarativeNetRequest", "declarativeNetRequestWithHostAccess"],
  "host_permissions": ["https://twitter.com/*", "https://你的图片源域名/*"]
}

2. 添加规则文件（比如rules.json）：

[
  {
    "id": 1,
    "priority": 1,
    "action": {
      "type": "modifyHeaders",
      "responseHeaders": [
        {
          "header": "Content-Security-Policy",
          "operation": "append",
          "value": " img-src https://你的图片源域名/;"
        }
      ]
    },
    "condition": {
      "urlFilter": "https://twitter.com/*",
      "resourceTypes": ["main_frame", "sub_frame"]
    }
  }
]

3. 在manifest.json中引用规则：

{
  "declarative_net_request": {
    "rule_resources": [
      {
        "id": "ruleset_1",
        "enabled": true,
        "path": "rules.json"
      }
    ]
  }
}

注意：如果页面是通过<meta>标签设置的CSP，这种方法无法生效，只能使用代理中转方案。

二、POST请求返回缓存结果的问题 #

• 发起POST请求时，显式设置缓存策略，强制绕过缓存：

fetch('https://example.com/api', {
  method: 'POST',
  body: JSON.stringify(data),
  headers: {
    'Content-Type': 'application/json'
  },
  cache: 'no-store' // 禁止缓存任何请求结果
});

• 如果是页面原有POST请求被缓存，也可以通过后台代理中转POST请求，在后台的fetch中同样设置cache: 'no-store'，确保请求不会被Safari缓存。

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