V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
V2EX 提问指南
dingyaguang117
V2EX  ›  问与答

在 Chrome console 如何引用页面中 webpack 打包出来的 module

  •  
  •   dingyaguang117 · 2021-04-04 19:43:34 +08:00 · 1844 次点击
    这是一个创建于 1089 天前的主题,其中的信息可能已经有所发展或是发生改变。
    我想用油猴脚本实现过期自动重新登录功能。但是这个网站是 vue 写的,webpack 打包的。现在需要,需要修改 axios 的设置。目前查到 webpack 会在 window 对象设置 webpackJsonp 属性,然后通过他加载和引用 module 。请问各位大神,如果需要在外部引用 webpack 打包的 module 的引入示例,需要怎么做呢?
    第 1 条附言  ·  2021-04-05 12:41:05 +08:00

    新思路,可以直接 劫持 js 修改源码

    // ==UserScript==
    // @name        Test
    // @namespace   Test
    // @description TEST
    // @include     http://the.website.com/*
    // @version     1
    // @grant       GM_xmlhttpRequest
    // @run-at      document-start
    // ==/UserScript==
    
    function addScript(text) {
        text = text.replace(/replaceThis();/g, "");
        var newScript = document.createElement('script');
        newScript.type = "text/javascript";
        newScript.textContent = text;
        var head = document.getElementsByTagName('head')[0];
        head.appendChild(newScript);
    }
    
    window.addEventListener('beforescriptexecute', function(e) {
        src = e.target.src;
        if (src.search(/script_to_modify\.js/) != -1) {
            e.preventDefault();
            e.stopPropagation();        
            GM_xmlhttpRequest({
                method: "GET",
                url: e.target.src,
                onload: function(response) {
                    addScript(response.responseText);
                }
            });
        }
    });
    
    第 2 条附言  ·  2021-04-05 17:15:40 +08:00

    根据 @RedBuck 的思路,直接劫持了 XHR

    下面的代码作用是,强制 ajax 请求使用 某个 Bearer token

    let originSetRequestHeader = XMLHttpRequest.prototype.setRequestHeader;
    
    XMLHttpRequest.prototype.setRequestHeader = function (key, value) {
        // console.log('setRequestHeader', key, value, this);
    
        if(key == 'Authorization') {
            if (value != sessionStorage.jwt) {
                value = sessionStorage.jwt;
            }
        }
    
        return originSetRequestHeader.apply(this, [key, value]);
    };
    
    
    18 条回复    2021-04-05 17:14:03 +08:00
    SoloCompany
        1
    SoloCompany  
       2021-04-04 21:12:41 +08:00
    必须通过 entry export 否则就像你所说的通过 webpackJsonp hack
    renmu123
        2
    renmu123  
       2021-04-04 21:20:11 +08:00 via Android
    在油猴上直接请求登录的地址获取 token 后写入 localhost,不知道会不会触发跨域
    renmu123
        3
    renmu123  
       2021-04-04 21:20:53 +08:00 via Android
    localstorge
    xiadd
        4
    xiadd  
       2021-04-04 21:23:22 +08:00
    改成 umd 打包,提供对应的 api
    dingyaguang117
        5
    dingyaguang117  
    OP
       2021-04-04 21:35:10 +08:00
    @xiadd 项目不是我维护的,所以不能改代码
    dingyaguang117
        6
    dingyaguang117  
    OP
       2021-04-04 21:36:05 +08:00
    @renmu123 主要是这个 页面 token, 是直接通过设置 axios 全局属性的,在内存,改 localstorage 刷新页面才有用
    dingyaguang117
        7
    dingyaguang117  
    OP
       2021-04-04 21:36:19 +08:00
    @SoloCompany 跪求大神 Hack 方法
    Mutoo
        8
    Mutoo  
       2021-04-04 22:41:00 +08:00 via iPhone
    早期版本的 webpack 有泄漏问题,后来修复了。不过你可以试着通过 vue 元素直接 hack 进去 $anyVueElement.__vue__.axios 或者 __vue__.$axios
    murmur
        9
    murmur  
       2021-04-04 23:57:58 +08:00
    没有源代码的产品二次魔改?建议直接放弃
    muzuiget
        10
    muzuiget  
       2021-04-05 00:49:23 +08:00
    很难,你这个问题相当于问怎么访问函数里的闭包变量,JavaScript 本身不提供这个功能,所以无解。除非该变量在别的地方被引用,可以从 window 一直找下去。
    ch2
        11
    ch2  
       2021-04-05 01:43:10 +08:00 via iPhone
    没有源代码的情况下,你这个问题需要花费非常久的时间去逆向,还不一定有解
    ysc3839
        12
    ysc3839  
       2021-04-05 05:44:28 +08:00 via Android
    建议考虑别的方案。过期自动登录的话,脚本输入用户名密码然后点击登录不行吗?
    ysc3839
        13
    ysc3839  
       2021-04-05 05:47:36 +08:00 via Android
    @renmu123 可以用 GM_xmlhttpRequest 绕过跨域限制。
    https://wiki.greasespot.net/GM.xmlHttpRequest
    redbuck
        14
    redbuck  
       2021-04-05 08:38:37 +08:00 via iPhone
    axios 的浏览器适配器是 xhr,劫持它就完了
    dingyaguang117
        15
    dingyaguang117  
    OP
       2021-04-05 10:25:47 +08:00
    @Mutoo 谢谢这个思路不错, 不过这个项目 好像没有使用 Vue.use 绑定 axios, 我试了下 是 undefined
    dingyaguang117
        16
    dingyaguang117  
    OP
       2021-04-05 10:26:32 +08:00
    @muzuiget 确实,我找到了在闭包里面的引用, 但是好像确实没办法获取到
    dingyaguang117
        17
    dingyaguang117  
    OP
       2021-04-05 10:28:03 +08:00
    @ysc3839 主要是我希望能不 重新加载页面, 因为 重新加载之后当前页面很多状态就丢失了,需要重新录入。
    dingyaguang117
        18
    dingyaguang117  
    OP
       2021-04-05 17:14:03 +08:00
    @redbuck 您这个思路很靠谱,通过劫持了 XHR,实现了需要的功能! 谢谢!
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   我们的愿景   ·   实用小工具   ·   2953 人在线   最高记录 6543   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 33ms · UTC 15:07 · PVG 23:07 · LAX 08:07 · JFK 11:07
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.