JS逆向的常见hook技术(实战案例)

所谓Hook 是一种钩子技术,在系统没有调用函数之前,钩子程序就先得到控制权,这时钩子函数既可以加工处理(改变)该函数的执行行为,也可以强制结束消息的传递。简单来说,修改原有的 JS代码就是 Hook。不影响原程序进行。

一.常见debugger

所谓debugger就是断点,阻止你调试网站。

1.最low的debugger,直接右键设置

2.设置条件

当定义器运行到这个debugger这个代码的时候,那么这个时候它为true,它肯定执行我们的debugger代码,那我们可以用浏览器的功能给他改成false鼠标右击行号,添加条件断点,添加一个不成立的条件写个1===0的先验条件,永远为假,就永远不会进入这个断点了。

3.方法置空

注:一定要在debugger进入之前,一般开油猴,或者节流模式不断注入

setInterval = function(){}

4.替换文件过debugger

JS文件保存到本地修改,修改范围主要是将debugger相关的代码删除或者改写,可以使用文件替换方式

5.注入代码过debugger

调用constructor方法我们判断他传递的参数是不是debugger,会导致无限debugger要是debugger的话就把这个方法改写,要不是的话就是用源方法返回

var _constructor = constructor;
Function.prototype.constructor = function(s) {
    
    if ( s== "debugger") {
        console.log(s);
        return null;
    }
    return _constructor(s);
}

二.hook JSON.parse(常用于响应解密)

因为响应密文解密后是字符串的json,字符串要传数据得是json格式,所以用 JSON.parse进行转换成json格式

(function() {
    var _parse = JSON.parse;
    JSON.parse = function(ps) {
        console.log("Hook JSON.parse ——> ", ps);
        debugger;
        return _parse(ps);  // 不改变原有的执行逻辑 
    }
})();

案例:https://www.ccprec.com/projectSecPage/#/cqzr

断住

跟两次出来了

跟栈

出来了

控制台输出

三.hook JSON.stringify(一般位于载荷)

可能某些效验的参数是json格式的参数转字符串进行加密

案例同上

(function() {
    var _stringify = JSON.stringify;
    JSON.stringify = function(ps) {
        console.log("Hook JSON.stringify ——> ", ps);
        debugger;
        return _stringify(ps);  // 不改变原有的执行逻辑 
    }
})();

断住,传对象,即json格式

跟三次,明显为载荷的格式

跟栈

打断点,明显为return返回

控制台输出得出结果

四.hook 定时器

hook 定时器清空主要是有些打开控制台会立刻关闭,只要通过定时器实现,讲定时器清空后就能正常打开了。

(function() {
'use strict';
    // document.addEventListener = function (){}

   window.setInterval = function (){}
 //window.setTimeout = function(){};
// window.location.href =

//_log = console.log



})();

案例:种子音乐|抖音歌曲|免费在线Mp3听歌音乐播放器|热门歌曲排行榜|最新歌曲大全 

进去前打开脚本断点

检测控制台的机制

原理:当控制台被触发时,debugger;语句会让代码暂停执行。如果调试器已启用,程序会在此处停下,直到用户继续执行。这意味着从stet的时间差会显著增加。

目的:如果时间差超过了1秒(这里设置的阈值),就可以认为调试器被触发了。这通常用于防止用户调试代码,或者在检测到调试时执行某些操作。

用hook 定时器,直接清空定时器,不让触发

顺利打开

五.hook cookies

(function () {
    cookieTemp = document.cookie;
    Object.defineProperty(document, 'cookie', {
        set: function (val) {
            { //v为监测cookie的键
                debugger;
            }
            console.log('Hook捕获到cookie设置->', val);
            cookieTemp = val;
        },
        get: function () {
            return cookieTemp;
        },
    });
})();

案例:A股市场_同花顺行情中心_同花顺财经网

六.hook url字符串参数

定位url参数xxx的生成位置

(function () {
    var open = window.XMLHttpRequest.prototype.open;
    window.XMLHttpRequest.prototype.open = function (method, url, async) {
        if (url.indexOf("xxx") != -1) {
            debugger;
        }
        return open.apply(this, arguments);
    };
})();

案例:乌鲁木齐市网上中介服务超市 

定位s的生成位置,运行脚本

 

 

<think>我们正在处理的是在Vue组件中使用`window.parent.location`时出现的权限错误("Error: 没有权限")。根据引用[4]的解释,这是由于浏览器的同源策略限制:当子页面(iframe)与父页面不同源时,子页面无法操作父页面的location对象(除了少数例外,如postMessage方法)[^4]。 解决方案的核心是使用安全的跨域通信方法,即`postMessage` API。同时,我们还需要考虑Vue组件的生命周期和代码结构。 具体步骤: 1. **在Vue组件的mounted钩子中发送消息**:使用`window.parent.postMessage`向父页面发送一个包含跳转指令的消息。 2. **父页面监听message事件**:在父页面中,通过监听`message`事件来接收子页面发送的消息,然后由父页面自己执行跳转(这样就不会有跨域问题)。 3. **严格验证来源**:在父页面中,必须检查`event.origin`是否是我们预期的子页面源,以避免安全风险。 下面是具体代码示例: 在Vue组件(子页面)中: ```javascript mounted() { // 确保在iframe中 if (window.self !== window.top) { // 向父页面发送消息,要求跳转到指定URL window.parent.postMessage({ type: 'REDIRECT_REQUEST', // 自定义消息类型 url: 'https://target.com' // 要跳转的目标URL }, 'https://parent-domain.com'); // 指定父页面的源,不要用"*" } } ``` 在父页面中: ```javascript window.addEventListener('message', function(event) { // 检查消息来源是否是我们信任的子页面 if (event.origin !== 'https://child-domain.com') { return; } // 检查消息类型 if (event.data && event.data.type === 'REDIRECT_REQUEST') { // 父页面自己进行跳转 window.location.href = event.data.url; } }); ``` 注意: - 将`https://parent-domain.com`替换为父页面实际的源(协议+域名+端口)。 - 将`https://child-domain.com`替换为子页面(即Vue应用)的源。 - 不要使用通配符`*`作为`postMessage`的第二个参数,明确指定父页面源更安全。 如果父子页面同源,则可以直接操作`window.parent.location`,但为了安全起见,仍然建议使用`postMessage`方式,因为这样更符合安全规范。 另外,引用[1]提到跨域请求的解决方法,但这里不是请求数据,而是操作父页面的URL,所以不适用CORS。引用[2]中关于`contentWindow`的操作同样受同源策略限制,无法跨域使用。引用[3]和[5]是关于Vue路由和基础的内容,与本问题关系不大。 如果父页面可以被我们控制,还可以通过设置CSP(Content Security Policy)来授权子页面,但这种方法不如`postMessage`通用,且需要浏览器支持。 在Vue组件中,我们还可以添加错误处理,以防止权限错误导致整个组件崩溃: ```javascript mounted() { try { // 尝试同源下的操作(如果确定同源) if (window.self !== window.top) { window.parent.location.href = 'https://target.com'; } } catch (err) { // 如果出现权限错误,则改用postMessage if (err.name === 'SecurityError') { window.parent.postMessage({ type: 'REDIRECT_REQUEST', url: 'https://target.com' }, 'https://parent-domain.com'); } else { console.error(err); } } } ``` 但这种方法会先尝试直接操作,如果失败再使用postMessage,可能会增加复杂性。因此,如果明确知道是跨域环境,直接使用postMessage是最佳选择。 最后,关于引用[1]中提到的代码结构问题(script标签嵌套在挂载元素内),在Vue单文件组件中通常不会遇到,因为Vue的模板和脚本是分离的。但如果你在模板中写了script标签,那确实会导致问题。所以请确保不要在模板中插入script标签。 总结:使用postMessage进行跨域通信是解决此问题的标准方法。</think>### 解决 Vue 组件中 `window.parent.location` 跨域权限错误 #### 🔍 核心问题分析 根据引用[4],浏览器同源策略禁止跨域 iframe 直接操作父页面的 `location` 对象[^4]。错误原因: 1. **跨域限制**:子页面与父页面不同源(协议/域名/端口不同) 2. **安全策略**:浏览器阻止子页面直接修改父页面 URL 3. **错误使用场景**:在 Vue 生命周期钩子中直接操作 DOM #### ✅ 推荐解决方案:使用 `postMessage` API 这是最安全且标准的跨域通信方式,符合引用[4]的建议[^4]。 ##### 子页面 (Vue 组件) 代码 ```javascript // 在 mounted 钩子中发送消息 mounted() { // 检查是否在 iframe 中 if (window.self !== window.top) { window.parent.postMessage( { type: "CHANGE_PARENT_URL", // 自定义消息类型 url: "https://目标页面.com" // 需要跳转的 URL }, "https://父页面域名.com" // 指定父页面源(不要用"*") ); } } ``` ##### 父页面代码 ```javascript // 监听子页面消息 window.addEventListener("message", (event) => { // 验证消息来源 if (event.origin !== "https://子页面域名.com") return; // 处理跳转请求 if (event.data.type === "CHANGE_PARENT_URL") { window.location.href = event.data.url; } }); ``` #### ⚠️ 关键注意事项 1. **源验证** 父页面必须严格检查 `event.origin`,防止恶意网站伪造消息: ```javascript // 允许多个子域名的安全验证 const allowedOrigins = [ "https://合法子域名1.com", "https://合法子域名2.com" ]; if (!allowedOrigins.includes(event.origin)) return; ``` 2. **Vue 生命周期优化** 使用引用[3]的路由守卫处理跳转逻辑更安全[^3]: ```javascript beforeRouteLeave(to, from, next) { if (需要跳转父页面) { this.sendToParent({ type: "REDIRECT", url: to.path }); next(false); // 取消当前导航 } else { next(); } } ``` 3. **错误处理** 在 Vue 组件中添加跨域操作异常捕获: ```javascript try { window.parent.postMessage(...); } catch (err) { console.error("跨域通信失败", err); // 备选方案:在当前窗口打开页面 window.open("https://目标页面.com", "_blank"); } ``` #### 🌐 备选方案:配置 CORS 策略 若控制父页面服务器,配置响应头(需引用[1][5]的跨域知识)[^1][^5]: ```http # 父页面服务器配置 Access-Control-Allow-Origin: https://子页面域名.com Content-Security-Policy: frame-ancestors 'self' https://子页面域名.com; ``` #### 💡 最佳实践建议 1. **优先使用 `postMessage`**:安全且符合现代 Web 标准 2. **避免直接 DOM 操作**:特别在 `mounted` 等生命周期钩子中 3. **同源检查**:操作前验证 `window.self !== window.top` 4. **降级方案**:跨域失败时提供用户手动操作选项 > **同源策略例外**:若父子页面同源(相同协议+域名+端口),可直接使用: > ```javascript > if (window.location.origin === window.parent.location.origin) { > window.parent.location.href = "https://同源页面.com"; > } > ``` #### 📚 相关问题 1. 如何在 Vue 中安全地检测当前页面是否在 iframe 中? 2. `postMessage` 通信中如何防止 XSS 攻击? 3. Vue 组件间通信与跨窗口通信有何本质区别? 4. 如何为不同环境的开发/生产配置动态源地址? 5. 浏览器同源策略具体限制哪些 DOM 操作?[^4] [^1]: 跨域请求的 CORS 解决方案 [^3]: Vue 路由守卫的使用场景 [^4]: 浏览器同源策略对 iframe 的限制 [^5]: Vue 项目跨域配置实践
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值