V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
推荐关注
Meteor
JSLint - a JavaScript code quality tool
jsFiddle
D3.js
WebStorm
推荐书目
JavaScript 权威指南第 5 版
Closure: The Definitive Guide
thundernet8
V2EX  ›  JavaScript

升级了个 npm 包,基于 gulp 的 JavaScript 代码混淆,字符串转 16 进制\x00 或者\u0000 的工具

  •  
  •   thundernet8 · 2016-09-20 09:38:20 +08:00 · 4222 次点击
    这是一个创建于 2965 天前的主题,其中的信息可能已经有所发展或是发生改变。

    Github 地址:点我

    Ext-Gantt 库的代码就是这种做法 ExtGantt

    下面直接复制 README 了,有兴趣的可以用 npm 下载配合 gulp pipe 试一试

    Note

    This is a package modified from confusion

    About

    Sometimes, we want to obfuscate our source code to against theft or abuse.

    Confusion makes it harder to decipher your code by replacing string literals and property accesses with lookups into a string map.

    Gulp-str2hex inherit the basic functionality of Confusion, integrate with gulp, and also bring some enhancement.

    • Convert strings and object property names to Hex string like '\x00' (None ASCII char to '\u0000' unicode)
    • Compress the code, remove comments, new lines, spaces()

    Install

    use npm:

    npm install gulp-str2hex --save
    

    Example

    This code snippet:

    var cnStr = "中文测试";
    var enStr = 'This is a sentence in English';
     
    String.prototype.myLog = function () {
        console.log('>> ' + str + ' <<');
    };
    

    will be converted to

    var cnStr = '\u4e2d\u6587\u6d4b\u8bd5';
    var enStr = '\x54\x68\x69\x73\x20\x69\x73\x20\x61\x20\x73\x65\x6e\x74\x65\x6e\x63\x65\x20\x69\x6e\x20\x45\x6e\x67\x6c\x69\x73\x68';
    String[['\x70\x72\x6f\x74\x6f\x74\x79\x70\x65']][['\x6d\x79\x4c\x6f\x67']] = function () {
        console[['\x6c\x6f\x67']]('\x3e\x3e\x20' + str + '\x20\x3c\x3c');
    };
    

    or use string map

    var _x28494 = [
        '\u4e2d\u6587\u6d4b\u8bd5',
        '\x54\x68\x69\x73\x20\x69\x73\x20\x61\x20\x73\x65\x6e\x74\x65\x6e\x63\x65\x20\x69\x6e\x20\x45\x6e\x67\x6c\x69\x73\x68',
        '\x6d\x79\x4c\x6f\x67',
        '\x70\x72\x6f\x74\x6f\x74\x79\x70\x65',
        '\x6c\x6f\x67',
        '\x3e\x3e\x20',
        '\x20\x3c\x3c'
    ];
    var cnStr = _x28494[0];
    var enStr = _x28494[1];
    String[_x28494[3]][_x28494[2]] = function () {
        console[_x28494[4]](_x28494[5] + str + _x28494[6]);
    };
    

    or bring all the string through call parameter of <abbr title="immediately invoced function expression">IIFE</abbr>:

    (function (_x16425) {
        'use strict';
        var cnStr = _x16425[0];
        var enStr = _x16425[1];
        String[_x16425[3]][_x16425[2]] = function () {
            console[_x16425[4]](_x16425[5] + str + _x16425[6]);
        };
    }.call(this, [
        '\u4e2d\u6587\u6d4b\u8bd5',
        '\x54\x68\x69\x73\x20\x69\x73\x20\x61\x20\x73\x65\x6e\x74\x65\x6e\x63\x65\x20\x69\x6e\x20\x45\x6e\x67\x6c\x69\x73\x68',
        '\x6d\x79\x4c\x6f\x67',
        '\x70\x72\x6f\x74\x6f\x74\x79\x70\x65',
        '\x6c\x6f\x67',
        '\x3e\x3e\x20',
        '\x20\x3c\x3c'
    ]));
    
    

    you can also choose only hex some none ASCII chars like Chinese(like what some Chinese to unicode packages to do)

    (function (_x53816) {
        'use strict';
        var cnStr = _x53816[0];
        var enStr = _x53816[1];
        String[_x53816[3]][_x53816[2]] = function () {
            console[_x53816[4]](_x53816[5] + str + _x53816[6]);
        };
    }.call(this, [
        '\u4e2d\u6587\u6d4b\u8bd5',
        'This is a sentence in English',
        'myLog',
        'prototype',
        'log',
        '>> ',
        ' <<'
    ]));
    

    and compress the code(the uglify-js package will restore what we have converted, so we cannot use it after our working pipe):

    (function(_x37168){'use strict';var cnStr=_x37168[0];var enStr=_x37168[1];String[_x37168[3]][_x37168[2]]=function(){console[_x37168[4]](_x37168[5]+str+_x37168[6]);};}.call(this,['\u4e2d\u6587\u6d4b\u8bd5','This is a sentence in English','myLog','prototype','log','>> ',' <<']));
    

    Usage

    first, import the package

    var str2hex = require('gulp-str2hex');
    

    use with gulp

    gulp.src(['./src/js/*.js'])
        .pipe(webpack(require('./webpack.config.js')))
        .pipe(uglify())
        .pipe(str2hex())
        .pipe(gulp.dest('./assets/js')) 
    

    add some options

    gulp.src(['./src/js/*.js'])
        .pipe(webpack(require('./webpack.config.js')))
        .pipe(uglify())
        .pipe(str2hex({
            hexall: false,
            placeholdMode: 2,
            compress: true
        }))
        .pipe(gulp.dest('./assets/js')) 
    

    options

    • hexall

      whether hex all strings or not, default: false

    available values: true or false

    • placeholdMode

      how to map the strings, default: 0

    available values:

    0 - keep string in their positions,
    1(alias `prependMap`) - use a array includes all the strings, and expose the array as a variable prepend the code;
    2(alias `wrapWithIife`) - use a array includes all the strings, and use Iife to wrap the array as a parameter of the function;
    
    • compress

      compress the code, remove new lines, comments and spaces, instead of uglify-js, default true

      available values: true or false

      note: if you use uglify-js, must make the pipe before our package pipe, otherwise the hex string will be restored.

    3 条回复    2016-09-20 17:09:18 +08:00
    Septembers
        1
    Septembers  
       2016-09-20 09:59:57 +08:00
    整体不错不过
    1. 不要集成 uglify-js 因为 单一职能 我认为没有集成 uglify-js 的必要性
    2. 请求支持 SourceMaps 支持。(支持的话才能方便调试)
    3. options.hexall 可以考虑增加随机选项
    >> '\u4f60\x2D\u{597D}\45' // unicode escape && hex string && octal string 随机混合
    << "你-好%"
    see http://www.ecma-international.org/ecma-262/7.0/index.html#sec-literals-string-literals
    4. 可以考虑引入基于 RegExp 的描述方式
    >> /Test/.source
    << "Test"
    see http://www.ecma-international.org/ecma-262/7.0/index.html#sec-literals-regular-expression-literals
    yimity
        2
    yimity  
       2016-09-20 13:39:33 +08:00
    前端或者后端搞这个有什么意义?
    Septembers
        3
    Septembers  
       2016-09-20 17:09:18 +08:00
    @yimity 对付 bot
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   1394 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 22ms · UTC 17:25 · PVG 01:25 · LAX 10:25 · JFK 13:25
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.