动画演示,JS代码是怎样被混淆加密的

本文分享的是一个动画效果源码,演示JS代码是如何被加密的。

先看效果:

 

一般我们在进行JS加密时,提交原始代码,紧接着就直接得到了加密代码,混淆加密过程是黑盒状态,是不被我们知道的。

这个动画,用慢放的效果,逐帧演示了JS代码在进行混淆加密时发生的变化。

比如:变量名变短、回车换行消失、空格删除、消除注释、函数调用变成自执行函数。

注:动画演示的是JShaman专业版使用部分功能对JS代码进行混淆加密的效果。

<h2>动画演示:JShaman是怎样对JS代码混淆加密的</h2>
<button onclick="mini_change();">开始</button><br>
<br>
<textarea id="js_code" style="width:800px; height:200px;font-size:19px;">
function get_copyright(){
    var domain = "JShaman专注于JS代码混淆加密";
    var from_year = 2017;
    var the_copyright = "(c)" + from_year + "-" + (new Date).getFullYear() + "," + domain;
    return the_copyright;
}
//输出信息
console.log(get_copyright());
</textarea>
<br>
注:演示的是JShaman专业版部分效果
<script>

    var index = 0;
    var js_code_textarea = document.getElementById("js_code");
    var change_matrix = [
        ["\n",""],
        ["    ",""],
        ["var domain","var _"],
        ["\n",""],
        ["    ",""],
        ["var from_year","var _2"],
        ["\n",""],
        ["    ",""],
        ["var the_copyright","var _3"],
        ["from_year","_2"],
        ["\n",""],
        ["    ",""],
        ["\n",""],
        ["the_copyright","_3"],
        ["domain","_"],
        ["\n",""],
        ["//输出信息",""],
        ["\n",""],
        ["function get_copyright(){",""],
        ["}",""],
        ["get_copyright()","function(){"+`var _ = "JShaman专注于JS代码混淆加密";var _2 = 2017;var _3 = "(c)" + _2 + "-" + (new Date).getFullYear() + "," + _;return _3;`+"}()"],
        [`var _ = "JShaman专注于JS代码混淆加密";var _2 = 2017;var _3 = "(c)" + _2 + "-" + (new Date).getFullYear() + "," + _;return _3;`,""],
    ]
    
    function mini_change(){
        js_code_textarea.value = js_code_textarea.value.replace(change_matrix[index][0], change_matrix[index][1]);
        index++;
        console.log(index[0]);

        if(index >change_matrix.length-1){
            console.log("执行");
            eval(js_code_textarea.value);
            alert("演示完成");
            return;
        }else{
            setTimeout(mini_change,1000);
        }
    }
</script> 

这段代码中,应用了一些不错的JS技巧,参考修改,也可以用来做其它文本演示动画。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值