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

王一之 发表于 2021-1-12 16:50:35

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

### 本节主要内容

> 介绍ajax和跨域问题,油猴中的ajax请求.将使用(https://www.tampermonkey.net/documentation.php#GM_xmlhttpRequest)来绕过 `同源策略`做一个访问我们[油猴中文网](https://bbs.tampermonkey.net.cn/)就会自动关注我们的(https://space.bilibili.com/1037793830)(夹杂私货手动狗头)

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

### AJAX

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

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

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

#### 跨域

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

#### 同源策略

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

然后就引出了[同源策略](https://developer.mozilla.org/zh-CN/docs/Web/Security/Same-origin_policy)对此来加以限制.

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

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

!(data/attachment/forum/202101/12/164746vnnhhhv02hhb3zmi.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/300)

如果希望可以解决这个问题,能够让我们跨域访问,主要有 `JSONP`,[`CORS`](https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Access_control_CORS),`反向代理`这三种方式.(限于篇幅和主题,本文不再详细描述)

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

!(data/attachment/forum/202101/12/164813emjfo7239091cofp.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/300)

### 脚本的跨域访问

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

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

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

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

这个方法更详细的文档:(https://www.tampermonkey.net/documentation.php#GM_xmlhttpRequest),看起来像XHR+jQuery的结合体.

### bilibili自动关注up主

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

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


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

就像写ajax请求一样

```
// ==UserScript==
// @name         油猴中文网-自动关注up主
// @namespace    https://bbs.tampermonkey.net.cn/
// @version      0.1
// @description油猴中文网-自动关注up主
// @author       Wyz
// @match      https://bbs.tampermonkey.net.cn/
// @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](https://www.tampermonkey.net/documentation.php#_connect)


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

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

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

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

601tyl 发表于 2021-8-24 22:49:41

为什么写完脚本后，在油猴里面抓包，提交的包是403

李恒道 发表于 2021-8-25 09:06:22

601tyl 发表于 2021-8-24 22:49
为什么写完脚本后，在油猴里面抓包，提交的包是403

可能协议头没搞上
或者链接有sign之类的加密

王一之 发表于 2021-8-26 14:29:02

601tyl 发表于 2021-8-24 22:49
为什么写完脚本后，在油猴里面抓包，提交的包是403

后面已经说了

因为这个请求里有一个参数:csrf是与账号相关的,需要从cookie里面去获取

601tyl 发表于 2021-8-29 17:54:00

王一之 发表于 2021-8-26 14:29
后面已经说了

因为这个请求里有一个参数:csrf是与账号相关的,需要从cookie里面去获取 ...

现在调整了一下我获取了自己的请求头，已经可以返回200状态码的包了。我也将csrf设置造成了自己的，但是返回的包显示csrf校验失败。

PzZZang 发表于 2021-9-1 08:55:28

执行一下,弹出了下面内容,
弹出了什么？

小胖子的梦想 发表于 2021-11-25 20:32:56

我将fid修改了可是抓包抓出来还是403

王一之 发表于 2021-11-25 22:55:20

小胖子的梦想 发表于 2021-11-25 20:32
我将fid修改了可是抓包抓出来还是403

b站登录了么？看看header请求详情

小胖子的梦想 发表于 2021-11-26 08:28:04

王一之 发表于 2021-11-25 22:55
b站登录了么？看看header请求详情

这个样子

小胖子的梦想 发表于 2021-11-26 08:29:23

小胖子的梦想 发表于 2021-11-26 08:28
这个样子

这个，b站登陆了

查看完整版本: [油猴脚本开发指南]脚本ajax的跨域请求