js如何判断打印操作_JS逆向 | 骚操作教你如何伪造浏览器环境

所有文章首发在我的微信公众号“逆向新手”，更多逆向系列请关注公众号，谢谢！

写在前面

由于最近好多小伙伴问我怎么伪造canvas等浏览器环境，故写了这篇文章供参考。
说到浏览器环境与本地环境，不得不先解释下全局对象。在浏览器环境，全局对象即为 window 对象，而在本地node环境，全局对象为 global 。两者有一定差别，简单点说，window对象下有的方法或属性，global对象不一定有。反之，global对象下有的，window对象基本都有。
我们定义的全局变量或全局方法，都将会挂在全局对象下，因此在本地，可以使用 http://global.XXX 或 XXX 来调用。而浏览器环境中的代码，基本都是通过 http://window.XXX 来调用，所以我们可以在开头定义这么一句：

window = global;

这句的意思就是，定义一个全局变量名为window，给它赋值为global对象，后面即可在本地通过 http://window.XXX 来调用全局属性或方法，这样便契合了浏览器的环境。以下为global对象自带的全部属性与方法：

但在实际逆向过程中，并不一定非要这么定义，其实都得根据具体代码来写。只要遵循一个原理即可：缺啥补啥。

举例说明

了解了前面的概念后，下面直接开始举例说明吧！以下例子仅供参考，实际运用过程请自行修改。

一、Canvas

要想完美模拟一个环境，首先得先知道它的作用，下面带大家大致了解下Canvas的运行逻辑，具体属性与方法的作用还请自行百度。

1.创建canvas画布

2.修改画布属性：字体、颜色、填充文字等

3.随便再画点圆和路径，最后将画好的转为图片链接

打开这个链接看一下

逻辑知道了，现在可以开始伪造了。本地不需要这么复杂，只需要看它调用了什么方法，返回了什么值，然后对对象做了什么变化即可。根据上面的逻辑，本地可构造如下：

document = {
    createElement: function() {
        return canvas
    }
};
canvas = {
    getContext: function getContext() {
        return CanvasRenderingContext2D
    },
    toDataURL: function toDataURL() {
        return "data:image/png;base64,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"
    },
};
CanvasRenderingContext2D = {
    arc: function arc() {},
    stroke: function stroke() {},
    fillText: function fillText() {},
};

像font、shadowColor等，只是在为CanvasRenderingContext2D对象赋值，因此不用构造。而arc、stroke等函数的返回值均为undefined，因此直接置空即可。最后运行如下，成功获取链接。

二、LocalStorage

同样先看下它的运行逻辑。setItem为它设置一对键值对，getItem获取指定键的值，不存在为null，removeItem删除键值对

因此可构造如下：

localStorage = {
    removeItem: function (key) {
        delete this[key]
    },
    getItem: function (key) {
        return this[key] ? this[key]: null;
    },
    setItem: function (key, value) {
        this[key] = "" + value;  // 将数字转为字符串
    },
};

运行如下：

三、标签的href属性

首先查看location及创建标签后的href属性值

然后多次赋值查看其逻辑

可以看到大致分为4种情况，我直接用代码表达：

location = {
    "href": "https://www.w3school.com.cn/jsref/prop_anchor_href.asp",
    "origin": "https://www.w3school.com.cn",
    "protocol": "https:",
}
document = {
    createElement: function () {
        var loc = {
            href: ""
        };
        var temp_href = loc.href;
        Object.defineProperty(loc, 'href', {
            // Hook loc.href，当为其赋值时，按下面的规则强制改变
            get: function () {
                return temp_href
            },
            set: function (val) {
                if (val.indexOf('http://') === 0 || val.indexOf('https://') === 0) {
                    // 1.当值为http://或https://开头时，即为该值
                    temp_href = val;
                } else if (val.indexOf('//') === 0) {
                    // 2.当值为//开头时，即为location.protocol加上该值
                    temp_href = location.protocol + val;
                } else if (val.indexOf('/') === 0) {
                    // 3.当值为/开头时，即为location.origin加上该值
                    temp_href = location.origin + val;
                } else {
                    // 4.除以上3种情况，即为location.href中最后一个/之前的值加上该值
                    var s = location.href
                    temp_href = s.substring(0, s.lastIndexOf("/")+1) + val
                }
                return temp_href
            }
        });
        return loc;
    }
}

最终运行成果：

总结

经过上面几个例子说明，可对伪造浏览器环境步骤总结如下：

1.在浏览器中分析需要伪造的环境运行逻辑

2.本地魔改，想怎么写怎么写，最终运行结果一致就行

其实伪造浏览器环境，并没有固定的写法，思维有多发散，伪造得就可以有多骚，真的可以说是天马行空，任你造。本文仅提供思路，欢迎有更好想法的小伙伴一起交流~

欢迎关注我的公众号“逆向新手”，逆向系列将持续更新！