saber酱的抱枕

哀哉京阿尼

07/4
09:47
学习 软件

Chrome 扩展修改 referer 实现跨域

通过 chrome.webRequest.onBeforeSendHeaders 事件来设置 referer,来达到跨域的目的。

1. 在 manifest.json 中声明权限

"permissions": [
    "tabs", "downloads", "webRequest", "webRequestBlocking", "*://www.pixiv.net/*", "*://www.pixivision.net/*", "*://i.pximg.net/*"
]

webRequest、webRequestBlocking 是必须的;后面的网址列表表示这个扩展的生效范围。

在做跨域的时候,需要把你的目标网址也添加进去。比如你的扩展运行在 a.com,去请求 b.com 的内容,那么这两个网址都要写进去。

2. 在后台代码中设置 referer

chrome.webRequest.onBeforeSendHeaders.addListener(function (details) {
	for (var i = 0; i < details.requestHeaders.length; ++i) {
		if (details.requestHeaders[i].name === 'Referer') {
			details.requestHeaders[i].value = 'https://www.pixiv.net/';
			break;
		}
	}
	return {
		requestHeaders: details.requestHeaders
	};
}, {
	urls: ['https://www.pixiv.net/*']
}, ['blocking', 'requestHeaders']);

chrome.webRequest.onBeforeSendHeaders 事件的3个参数,分别为回调函数、过滤器、追加配置。后两者是可选的。

回调函数的 details 参数是 Chrome 根据追加配置里的参数传入的。我们在追加配置里声明了 requestHeaders,那么在 details 里就可以访问和操作 requestHeaders 信息。

参考 webRequest API 文档

3. 在前台发起请求即可

let my_xhr = new XMLHttpRequest;
my_xhr.open('GET', 'https://i.pximg.net/img-original/img/2018/07/03/00/00/08/69512461_p0.jpg', true);
my_xhr.responseType = 'blob';
my_xhr.timeout = 300000;
my_xhr.addEventListener('loadend', function () {
	let blob_url = window.URL.createObjectURL(my_xhr.response);
	console.log(blob_url);
	// 可以正常获取
	});
});
my_xhr.send();

和普通的 ajax 代码并没有什么不同。但是要注意的是,这里说的“前台”是 Chrome 扩展的“前台”,而非普通网页。在普通网页里执行还是会被跨域策略阻止的,在 Chrome 扩展的前台代码里请求则不会被阻止。

Chrome 扩展修改 referer 实现跨域

  1. 嗯~~
    Firefox 70Firefox 70WindowsWindows

    我看到https://segmentfault.com/q/1010000011300766 这个过来看了一下,我也在对pixiv搞事情,也是遇到 webRequest 对downloads.download 不生效 downloads API又不能设置Referer的问题,我看segmentfault 上面最后貌似说可以,但我看您写的那个扩展还是转成了Blob,不太确是到底是可不可以了。
    我倒是在火狐上写扩展,不过都差不多

    回复
      1. 嗯~~
        Firefox 70Firefox 70WindowsWindows

        呃。。。,主要是想问调downloads.download 时的Referer问题,貌似webRequest的onBeforeSendHeaders 还是对downloads API 不起作用呀~,我的permissions里针对网站设置的是,现在就对downloads API 不管用,这让我非常不爽。。。

        回复
        1. saber 文章作者
          Google Chrome 75Google Chrome 75WindowsWindows

          你设置了这个,只对页面里的网络请求有效,而不是对 downloads 生效。所以我要先用 xhr 下载文件到本地,再把本地链接发送到 downloads 下载。

          回复
          1. 嗯~~
            Firefox 70Firefox 70WindowsWindows

            我现在也是这么搞么,最终结论来说downloads API 还是无法直接下pixvi的原始链接的拉~,我就是想要这么个结论,多射~。
            现在我这玩意儿要是直接下pixivi的原始链接的话,有时候能下有时候不能,感觉像是如果浏览器cache了的话就能,没有就不行,也不太确定。算了,就fetch 转blob吧,fetch或都xhr能受webRequest设置影响

            回复