[油猴脚本开发指南]脚本ajax的跨域请求

转载自油猴中文网：bbs.tampermonkey.net.cn
李恒道QQ4548212
油猴中文网bbs.tampermonkey.net.cn
TamperMonkey GreaseMonkey 油猴脚本脚本交流脚本分享
油猴脚本开发油猴基础开发油猴油猴中文
公众号:叛逆青年旅舍
https://bbs.tampermonkey.net.cn/

本节主要内容

介绍ajax和跨域问题,油猴中的ajax请求.将使用GM_xmlhttpRequest来绕过 同源策略做一个访问我们油猴中文网就会自动关注我们的up主(夹杂私货手动狗头)

本篇文章默认你已经懂了 XMLHttpRequest和 F12开发者工具(Network),如果不懂请先补习一下.

AJAX

这一大段内容更多是科普和说明我们在脚本里面为什么不能直接使用 XMLHttpRequest去访问我们自己的api

AJAX即Asynchronous Javascript And XML,主要用于不刷新页面与网站后端通信.例如你在b站网页上的点赞/投币/收藏,在评论区翻页,就是使用了ajax技术.

AJAX通常使用XMLHttpRequest(XHR),但是由于此api的设计不太友好,于是又有了Fetch API来解决这些问题,不过也有其它的封装让XHR的使用体验更友好,例如:axios和jQuery的ajax等.此处就不再展开.

跨域

跨域即两个不同域名之间的访问.例如我在开头说的访问我们油猴中文网就会自动关注我们的up主,那么肯定就需要从我们的域名[url=https://bbs.tampermonkey.net.cn/]https://bbs.tampermonkey.net.cn/[/url]访问到[url=https://space.bilibili.com/1037793830]https://space.bilibili.com/1037793830[/url]哔哩哔哩的域名,这就产生了跨域访问.

同源策略

如果上述可以正常访问那肯定是不合理且不安全的.假如正常访问了,只是看页面还好,万一直接投币甚至转账那是无法接受的.就比如我可以随便从我家跑到你家看东西(GET),放东西(POST),丢东西(DELETE)一样.

然后就引出了同源策略对此来加以限制.

如果两个 URL 的 protocol、port (如果有指定的话)和 host 都相同的话，则这两个 URL 是同源。这个方案也被称为“协议/主机/端口元组”，或者直接是 “元组”。

实际如下图所示,提示了错误.且不可以访问.

如果希望可以解决这个问题,能够让我们跨域访问,主要有 JSONP,CORS,反向代理这三种方式.(限于篇幅和主题,本文不再详细描述)

像b站点击关注哪里就是使用的 CORS,因为用户页面的域名是:space.bilibili.com,而关注api的域名是:api.bilibili.com,两个域名并不符合同源策略

脚本的跨域访问

前面啰嗦了一大把,终于可以进入正题了.至于油猴为什么可以绕过同源策略进行跨域访问,就牵扯到浏览器扩展开发了,以后再说.所以扩展和脚本还是不能乱装啊,多么不安全.

如果我们需要让我们的脚本能够完全的访问其它的api,那么大概只有两种方法,一种是CORS,另外一种是通过油猴扩展去获得更高级的权限,让我们的脚本不受同源策略所限制.

CORS方法如果你调用的api不是自己写的,不能自己去增加CORS策略,那么就几乎无解,好处是对你的api安全.(不过都脚本了,哪里还管安全…)

所以脚本一般使用 GM_xmlhttpRequestAPI,我们需要通过 // @grant GM_xmlhttpRequest去申请此权限.

这个方法更详细的文档:GM_xmlhttpRequest,看起来像XHR+jQuery的结合体.

bilibili自动关注up主

如果想实现访问我们的论坛然后自动关注我们的up主,那么我们得先知道,bilibili关注up主的api是什么.

我们先通过f12的开发者工具,然后使用Network去查看bilibili关注up主的网络请求包是怎么样的.

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-eSwif9W3-1611416860757)([img]https://bbs.tampermonkey.net.cn/data/attachment/forum/202101/12/164832t8jo64zk569ib6ik.png[/img])]

主要关注Request URL:[url=https://api.bilibili.com/x/relation/modify]https://api.bilibili.com/x/relation/modify[/url],Request Method:POST`,Form Data.先来完成我们的脚本第一版.如果有问题再继续调整.

就像写ajax请求一样

// ==UserScript==
// @name         油猴中文网-自动关注up主
// @namespace    [url=https://bbs.tampermonkey.net.cn/]https://bbs.tampermonkey.net.cn/[/url]
// @version      0.1
// @description  油猴中文网-自动关注up主
// @author       Wyz
// @match        [url=https://bbs.tampermonkey.net.cn/]https://bbs.tampermonkey.net.cn/[/url]
// @grant        GM_xmlhttpRequest
// @connect      api.bilibili.com
// ==/UserScript==(function() {'use strict';GM_xmlhttpRequest({url:"https://api.bilibili.com/x/relation/modify",method :"POST",data:"fid=1037793830&act=1&re_src=11&jsonp=jsonp&csrf=e37f1881fd98f16756d16ab71109d37a",headers: {"Content-type": "application/x-www-form-urlencoded"},onload:function(xhr){console.log(xhr.responseText);}});
})();

执行一下,弹出了下面内容,当然点击允许啦!不过如果你不希望弹出这个内容,那么你可以在脚本中加入 // @connect api.bilibili.com这一行来设置允许通过的域名,以进行屏蔽.@connect

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-rBvZdaKc-1611416860759)([img]https://bbs.tampermonkey.net.cn/data/attachment/forum/202101/12/165004asao8lcmm0a9qdu0.png[/img])]

不知道是延迟还是什么的原因,我刷新了几次之后才关注成功.

不过到此,虽然可以关注了,但是还不能算完,因为这个请求里有一个参数:csrf是与账号相关的,需要从cookie里面去获取,如果你直接将上面的脚本代码发给别人运行,因为对方的csrf和你的不同,那么就会输出这个内容

{"code":-111,"message":"csrf 校验失败","ttl":1}

_{获取cookie取出csrf这些内容就留到下一节吧} 记错了,gm_cookie是beta版本的功能,并未加入stable,暂时搁浅