Chrome 扩展在后台发出的请求如何携带前台 cookie?

saber酱
  • 362

我用 Chrome 扩展程序从 https://www.pixiv.net/artworks/84085174 下载一张图片,图片是跨域的。https://i.pximg.net/img-original/img/2020/09/01/16/22/11/84085174_p0.png

前台直接请求会被跨域策略阻止,我在后台脚本 background.js 里可以请求,但是 403,因为需要携带 cookie。不知道怎么解决。

后台网址是 chrome 扩展的网址:
chrome-extension://penkncbihcdfkhngfonjppnnkhodlali/_generated_background_page.html
fetch 或 xhr,虽然它们可以发送 cookie,但因为是在后台页面执行的,无法携带前台页面的 cookie。而且它们都不支持在请求头里设置自定义 cookie,我就算获取了前台的 cookie 也发送不出去,一筹莫展,不知道该怎么办。

回复
阅读 721
3 个回答

后台可以修改网络请求,使用 chrome.webRequest.onHeadersReceived API,给每个请求的 response headers 都添加 Access-Control-Allow-Origin : *,那么前台发出的所有请求都可以跨域。(如果此请求本来就有这个标头,就先删掉然后添加)

先在 manifest.json 里申请权限:

"permissions": ["webRequest", "webRequestBlocking", "*://*/*" ]

然后在后台代码(background.js)里修改网络请求:

function removeMatchingHeaders(headers: any, regex: any) {
  for (var i = 0, header; (header = headers[i]); i++) {
    if (header.name.match(regex)) {
      headers.splice(i, 1);
      console.log('Removing header "' + header.name + '":"' + header.value + '"');
      return;
    }
  }
}

function responseListener(details: any) {

  removeMatchingHeaders(details.responseHeaders, /access-control-allow-origin/i);
  details.responseHeaders.push({ name: 'Access-Control-Allow-Origin', value: '*' });

  return { responseHeaders: details.responseHeaders };
}

chrome.webRequest.onHeadersReceived.addListener(responseListener, {
  urls: ['*://*/*']
}, [
  'blocking',
  'responseHeaders',
  'extraHeaders'
]);

可以根据自己需要把网址范围 *://*/* 修改一下,避免影响所有网络请求。

可以把代码注入到前台,由前台获取图片,然后传回后台。

这个与chrome关系不大,相信在其它浏览器比如firefox中也会发生相同的错误。根源在于浏览器的保护策咯上了。在发生CORS请求时,为了保证该请求是被跨域的地址所允许的(www.pixiv.net),所以浏览器会发起options请求(这个请求被最新版本的chrome隐藏了,firefox中可以查看到),只有接收值中的Access-Control-Allow-Origin与前台用户访问的地址相匹配时,浏览器才可能允许发起后续的跨域请求。

这也是为什么你的控制台报:has been blocked by cors policy: No Access-Control-Allow-Origin header is .... 的原因。

所以如果www.pixiv.net这个站点也是你负责的,那么添加允许跨域信息,当浏览器发起特定的options请求时,在header中返回Access-Control-Allow-Origin属性,并在其值中包含用户访问的当前站点(也可以使用通配符 * )。

当然了,即使是有了Access-Control-Allow-Origin,默认情况下cookie属于敏感信息,这个值也是默认被禁止发送给跨域地址的。这个小孩没娘说起来话长,具体怎么做怕是你还得辛苦自己查一下。

祝好运。

参考资源:详解CORS

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
你知道吗?

宣传栏