saber 酱的抱枕

Fly me to the moon

05/23
2017
学习 软件

使用GM_xmlhttpRequest设置referer获取文件

说到ajax,不能不提到跨域限制这个问题。与跨域紧密相连的是referer,如果referer相同,就不会触发跨域限制;反之则视为跨域。

但发生跨域时,能否请求到跨域资源,也分两种情况:

第一种:服务器端不检查referer,这时候是否受跨域限制,由浏览器管理。

这时是否触发跨域限制,全由浏览器自己判断。比如在网页上用img标签插入一张跨域的图片,浏览器是不会触发跨域限制的,可以正常加载图片。但用ajax获取的话,浏览器就会触发跨域限制,获取不了。

这时候就算跨域了,服务器也是允许浏览器去下载文件的,只是看浏览器自己愿不愿意。

第二种:服务器端会检查referer,不符合规则的就拒绝。

这时候浏览器就吃瘪了,用img标签来插入图片也不行,这也是通常的防盗链手段。


如果我们在请求头里设置合法的referer,就可以破解跨域限制,但目前运行在浏览器宿主环境内的JavaScript实现不了这个功能,需要交给后台程序来做。如果只为了破解referer就单独做个后台文件,比较麻烦。但是我们使用油猴脚本的话,就不用写后台文件了,比较省事。

油猴脚本管理器(Greasemonkey或Tampermonkey等)由于是浏览器的扩展程序,可以设置请求头,包括伪造referer。它们都封装了一个GM_xmlhttpRequest方法,可以在用户脚本(UserScript)里调用。

今天我进行了测试,确定是可行的。示例代码如下:

// ==UserScript==
// @name        test GM_xmlhttpRequest
// @description test
// @namespace   https://greasyfork.org/ja/users/24052-granony
// @author      me
// @version     0.1
// @include     https://greasyfork.org/*
// @grant       GM_xmlhttpRequest
// @connect     i.pximg.net
// @connect     i1.pixiv.net
// @connect     i2.pixiv.net
// @connect     i3.pixiv.net
// @connect     i4.pixiv.net
// @connect     i5.pixiv.net
// ==/UserScript==

GM_xmlhttpRequest({
	method: "GET",
	url: "https://i.pximg.net/img-original/img/2017/05/16/00/20/10/62921231_p0.png",
	headers: {
		referer: "https://www.pixiv.net/"
	},
	overrideMimeType: "text/plain; charset=x-user-defined",
	onprogress: function(xhr) {
		console.log(xhr.lengthComputable + "," + xhr.loaded + "," + xhr.total);
		//xhr.lengthComputable:布尔值,是否可以获取到文件总长度
		// xhr.loaded:已加载的字节数
		// xhr.total:文件总字节数

	},
	onload: function(xhr) {
		var r = xhr.responseText,
			data = new Uint8Array(r.length),
			i = 0;
		while (i < r.length) {
			data[i] = r.charCodeAt(i);
			i++;
		}
		blob = new Blob([data], {
			type: "image/png"
		});
		var blobURL = window.URL.createObjectURL(blob);
		var downA = document.querySelector("h1 a");
		downA.href = blobURL;
		downA.setAttribute("download", "a.png");
		downA.click();
		window.URL.revokeObjectURL(blobURL);
	}
})

上面代码的功能是下载一个跨域并且服务器设置了referer防盗链的文件,下载后将其转换为blob对象保存到本地。

首先要授予这个脚本调用GM_xmlhttpRequest的权限:

// @grant       GM_xmlhttpRequest

但光这样还不够,还要在@connect里指定跨域获取文件时文件url里的域名。如果文件url的域名没有在@connect里指定,则GM_xmlhttpRequest会报错。

如果跨域文件没有设置referer防盗链,那么到这里就够了,跨域问题会被自动处理(。

但示例代码里的url有防盗链设置,而且比较奇葩,服务器要求的其实是个不同源的referer,同源的referer反而不行。这就需要我们在GM_xmlhttpRequest方法的headers参数里设置合法的referer了:

headers: {
	referer: "https://www.pixiv.net/"
}

其实上面的代码里还有个挺纠结的地方,就是把接收的数据转换为blob对象的过程。

JavaScript原生的XMLHttpRequest对象和jQuery的ajax方法都可以设置把接收的数据自动转换为blob类型,如:

xhr.responseType="blob";

这样拿到的response直接就是blob对象,但这个办法油猴的GM_xmlhttpRequest里测试不行。我见到有的油猴脚本在GM_xmlhttpRequest里设置了:

responseType: "blob",

我试了也不行,不知道人家是怎么用的,反正我这里测试是不行……

后来我在github上找到了一个办法可以把接收的数据转换为blob对象,就是上面代码里用的,看着挺费劲。主要是做了三个工作:

1:请求前设置overrideMimeType;
2:onload之后用Uint8Array和charCodeAt将数据正确的转换为blob对象。

Uint8Array和charCodeAt和这俩我之前完全不认识,看到的时候一脸懵逼:

后来我深入了解了上面步骤的作用:

overrideMimeType告诉服务器需要返回无格式纯文本的mime-type,而不是image/jpeg、image/png等图像格式。

Uint8Array是创建一个指定长度的无符号数组,charCodeAt则用来把response逐字节转换为Unicode编码(response都是string)。

怪不得我之前简单粗暴把response放进数组里转换成的blob对象有问题,还是姿势太低。

其他参考资料:Greasemonkey wiki

使用GM_xmlhttpRequest设置referer获取文件

05/2
2017
学习

使用toBlob()方法将canvas对象转换为Blob对象

前情提要:
《在JavaScript中创建Blob对象》
《使用canvas将图片转换为base64编码》

之前的这两篇文章都是为在网页上下载文件而服务的。Blob对象可以通过URL.createObjectURL(blob)方法来生成一个blob协议的url,而canvas可以通过canvas.toDataURL()来生成一个base64编码的url。这两种url都可以用a标签的download属性来下载。

注意:
将数据(包括canvas对象)转换为blob时,会受到跨域限制。
canvas酱图片转换为base64编码时也会受到跨域限制。
使用a标签下载文件时,在firefox里会受到跨域限制。

之前我没发现canvas对象是可以转换成Blob对象的,今天才知道有一个HTMLCanvasElement.toBlob()方法可以做到。

语法如下:

canvas.toBlob(callback, mimeType, qualityArgument);

说人话:

canvas.toBlob(function(blob) {
	// code...
},"image/jpeg", 0.8);

toBlob方法内有一个回调函数,其参数就是canvas对象转换后的生成的blob对象;
如果缺少mimeType参数,则默认为png格式。

相比使用base64编码的url,blob格式的url更加简洁,我喜欢后者。不过base64编码其实储存的是文件本身,它方便重复使用。而blob对象则在刷新页面后就没了,blob格式的url也就不能重用了。

如下代码,先加载一个图片,然后将其绘制在canvas里,之后将canvas元素转化为blob对象,再用一个a标签来做下载功能。

var Img = new Image();
Img.src = "58319482.jpg";
Img.onload = function() {
	var canvas = document.createElement("canvas");
	canvas.width = Img.width;
	canvas.height = Img.height;
	canvas.getContext("2d").drawImage(Img, 0, 0, Img.width, Img.height); //将图片绘制到canvas中
	canvas.toBlob(function(blob) {
		var downloadA = document.createElement("a");
		document.body.appendChild(downloadA);
		downloadA.style.display = "none";
		downloadA.setAttribute("download", "download.jpg");
		downloadA.setAttribute("href", URL.createObjectURL(blob));
		downloadA.click();
	}, "image/jpeg", 0.8);
};

使用toBlob()方法将canvas对象转换为Blob对象

12/29
2016
学习

使用URL.createObjectURL创建url对象

今天发现了window.URL.createObjectURL这个东西,非常的好用啊。

语法如下:

objectURL = URL.createObjectURL(blob || file);

URL.createObjectURL()方法会根据传入的参数创建一个指向该参数对象的URL. 这个URL的生命仅存在于它被创建的这个文档里. 新的对象URL指向执行的File对象或者是Blob对象。

我们可以使用URL.createObjectURL()方法给file对象或blob对象创建一个url来使用它。

blob对象产生的url格式如下:

blob:null/c694da24-ecd6-48ee-9a21-4c2979e6ef84

在处理本地数据时,它是很有用的,比如说上传前预览。

下面代码展示了一个表单,我们想用它上传图片和声音文件。

<form id="form1">
	<input type="file" name="img">
	<input type="file" name="audio">
</form>
<img src="" id="preview" width="300">
<audio autoplay="autoplay" controls="controls" src=""></audio>
<script>
	document.querySelector("#form1 input[name=img]").addEventListener("change",function(){
		var img=this.files[0];
		var imgUrl=window.URL.createObjectURL(img);
		document.querySelector("#preview").src=imgUrl;
	})

	document.querySelector("#form1 input[name=audio]").addEventListener("change",function(){
		var audio=this.files[0];
		var audioUrl=window.URL.createObjectURL(audio);
		document.querySelector("audio").src=audioUrl;
	})
</script>

在页面上有一个空的img元素和audio元素,在用户选择了图片或音乐后,该图片或音乐会直接显示/播放。是不是很方便呢?

你可以在下面直接操作:(第一个按钮传图片,第二个按钮传音乐)





虽然blob对象是个很方便的东西,但需要注意的是,当页面被关闭时,这个页面上生成的blob对象会被浏览器自动释放(清空)(但刷新页面不会清空blob对象),给它创建的url也就失效了。


此外有个URL.revokeObjectURL方法,用于释放blob对象的url。语法如下:

window.URL.revokeObjectURL(objectURL);

更加详细的信息可以参考此处

使用URL.createObjectURL创建url对象