找回密码
 立即注册
快捷导航

[Html/Css/JS] 油猴脚本 - ajax的跨域请求(GM_xmlhttpRequest(Axios/jQuery封装)、Fetch API)

[复制链接]
庶民 2023-6-13 13:27:48 | 显示全部楼层
本帖最后由 庶民 于 2023-6-13 14:00 编辑

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

跨域

即两个不同域名之间的访问.例如 访问我们 A网 就会自动获取 B网 的信息(自动关注我们的up主)),那么肯定就需要从我们的域名 https://A.cn/ 访问到 https://B.cn/ 的域名,这就产生了跨域访问.

同源策略

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

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

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

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

油猴脚本 - ajax的跨域请求(GM_xmlhttpRequest(Axios/jQuery封装)、Fetch API)4187 作者:庶民 帖子ID:67

如果希望可以解决这个问题,能够让我们跨域访问,主要有 JSONP,CORS,反向代理这三种方式.(自行查阅这三种方法的原理和使用)

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

脚本的跨域访问

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

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

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

所以脚本一般使用 GM_xmlhttpRequest API,我们需要通过 //@grant GM_xmlhttpRequest 去申请此权限,这个方法更详细的文档:GM_xmlhttpRequest,看起来像XHR+jQuery的结合体;

例子

如果想实现访问我们的 A.cn论坛 然后自动关注 bilibili.com上的某个up主,那么我们得先知道,bilibili关注up主的api接口是什么;

// ==UserScript==
// @name         自动关注up主
// @namespace    https://A.cn/
// @version      0.1
// @description  自动关注up主
// @author       W
// @match        https://A.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}

回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

温馨提示

关于 注册码 问题

      由于近期经常大量注册机器人注册发送大量广告,本站开启免费入群领取注册码注册网站账号,注册码在群公告上贴着...

关于 注册码 问题

      由于近期经常大量注册机器人注册发送大量广告,本站开启免费入群领取注册码注册网站账号,注册码在群公告上贴着...

Archiver|手机版|小黑屋|DLSite

GMT+8, 2024-11-23 00:54

Powered by Discuz! X3.5 and PHP8

快速回复 返回顶部 返回列表