Javascript 난독화 및 역난독화(코드 포함)에 대한 자세한 소개

이 기사는 Javascript 난독화 및 역난독화(코드 포함)에 대한 자세한 소개를 제공합니다. 도움이 필요한 친구들이 참고할 수 있기를 바랍니다.

소프트웨어 암호화 및 복호화와 마찬가지로 JavaScript 난독화 및 난독화 해제는 동일한 범주에 속합니다. 도의 높이는 한 자이고, 마귀의 높이는 한 자입니다. 영원한 검정색도 없고 영원한 흰색도 없습니다. 모든 것은 자본 시장에 의해 주도되며, 사람들을 위해 어떤 문제를 해결할 수 있는지에 대한 개념이 이제 대중화되었습니다. 그렇다면 이 문제를 해결할 수 있도록 시장은 얼마나 많은 이해관계자를 수용할 수 있을까요? JS에는 비밀이 없습니다.

사실 저는 자바스크립트의 해시 난독화에 동의하지 않습니다. 첫째, 런타임 속도가 느려집니다. 둘째, 부피가 커집니다. JS 코드 프런트 엔드는 사용 가능하며 본질적으로 "오픈 소스"이며 Chrome devTools에서 볼 수 있습니다. JS 비압축 난독화는 프런트엔드 최적화 원칙을 완전히 위반합니다.

현재 인터넷에서 검색 가능한 JS 난독화 도구는 다음과 같습니다.

평가 난독화는 JS에 등장한 최초의 난독화 암호화이기도 하며, 첫날에 크랙이 가능하다고 합니다. 그리고 그것을 깨도록 경고합니다. 이 방법은 태어난 날부터 그 의미를 잃습니다. 실제로 JS 암호화(난독화)는 가독성과 관련이 있습니다. 실제로 의미 있는 것은 무게와 가독성을 줄일 수 있는 압축 난독화 유형입니다.

그러나 miniui에서 사용하는 JSA 암호화, fundebug에서 사용하는 javascript-obfuscator 등 일부 상용 소스 코드는 소스 코드를 난독화하기 위해 해시 유형을 사용하는 경우도 배제할 수 없습니다.

다음은 JSA 암호화와 javascript-obfuscator의 차이점을 설명하는 코드입니다.

난독화할 코드:

function logG(message) {
  console.log('\x1b[32m%s\x1b[0m', message); 
}
function logR(message) {
  console.log('\x1b[41m%s\x1b[0m', message); 
}
logG('logR');
logR('logG');

JSA 암호화 및 난독화 후에 생성된 코드

function o00($){console.log("\x1b[32m%s\x1b[0m",$)}function o01($){console.log("\x1b[41m%s\x1b[0m",$)}o00("logR");o01("logG")

그런 다음 미화기:

function o00($) {
  console.log("\x1b[32m%s\x1b[0m", $)
}

function o01($) {
  console.log("\x1b[41m%s\x1b[0m", $)
}
o00("logR");
o01("logG")

에서 찾을 수 있습니다. 아니오 어떤 수정이 이루어졌는지, 몇 가지 변수를 대체했을 뿐입니다. 비교적 복원이 쉽습니다. 여기서는 대표로 사용하지 않을 것이며 아무도 사용하지 않습니다.

javascript-obfuscator

var _0xd6ac=['[41m%s[0m','logG','log'];(function(_0x203a66,_0x6dd4f4){var _0x3c5c81=function(_0x4f427c){while(--_0x4f427c){_0x203a66['push'](_0x203a66['shift']());}};_0x3c5c81(++_0x6dd4f4);}(_0xd6ac,0x6e));var _0x5b26=function(_0x2d8f05,_0x4b81bb){_0x2d8f05=_0x2d8f05-0x0;var _0x4d74cb=_0xd6ac[_0x2d8f05];return _0x4d74cb;};function logG(_0x4f1daa){console[_0x5b26('0x0')]('[32m%s[0m',_0x4f1daa);}function logR(_0x38b325){console[_0x5b26('0x0')](_0x5b26('0x1'),_0x38b325);}logG('logR');logR(_0x5b26('0x2'));

Beautifier로 다시 난독화한 후 생성된 코드:

var _0xd6ac = ['[41m%s[0m', 'logG', 'log'];
(function(_0x203a66, _0x6dd4f4) {
  var _0x3c5c81 = function(_0x4f427c) {
    while (--_0x4f427c) {
      _0x203a66['push'](_0x203a66['shift']());
    }
  };
  _0x3c5c81(++_0x6dd4f4);
}(_0xd6ac, 0x6e));
var _0x5b26 = function(_0x2d8f05, _0x4b81bb) {
  _0x2d8f05 = _0x2d8f05 - 0x0;
  var _0x4d74cb = _0xd6ac[_0x2d8f05];
  return _0x4d74cb;
};

function logG(_0x4f1daa) {
  console[_0x5b26('0x0')]('[32m%s[0m', _0x4f1daa);
}

function logR(_0x38b325) {
  console[_0x5b26('0x0')](_0x5b26('0x1'), _0x38b325);
}
logG('logR');
logR(_0x5b26('0x2'));

이것은 훨씬 더 복잡하지만 분석해 보면 실제로는 추가 사전이 있고 모든 메소드 변수가 그 안에 존재할 수 있음을 알 수 있습니다. 호출 시 먼저 사전을 호출하여 메소드명 변수를 복원한 후 실행합니다.
사실 입구는 모두 변수의 법칙이에요.

사전 기능:

var _0xd6ac = ['[41m%s[0m', 'logG', 'log'];
(function(_0x203a66, _0x6dd4f4) {
  var _0x3c5c81 = function(_0x4f427c) {
    while (--_0x4f427c) {
      _0x203a66['push'](_0x203a66['shift']());
    }
  };
  _0x3c5c81(++_0x6dd4f4);
}(_0xd6ac, 0x6e));
var _0x5b26 = function(_0x2d8f05, _0x4b81bb) {
  _0x2d8f05 = _0x2d8f05 - 0x0;
  var _0x4d74cb = _0xd6ac[_0x2d8f05];
  return _0x4d74cb;
};

위의 조사 결과를 통해 JS 혼동을 eval 유형, 해시 유형 및 압축 유형의 세 가지 범주로 분류할 수 있습니다. 압축 유형은 현재 uglify로 대표되는 프런트엔드 성능 최적화를 위해 일반적으로 사용되는 도구입니다.

일반적으로 사용되는 프런트 엔드 압축 최적화 도구:

JavaScript:

• babel-minify
• terser
• uglify-js
• uglify-es
• Google Closure Compiler
• YUI Compressor

CSS :

• PostCSS
• clean-css
• CSSO
• YUI Compressor

HTML:

• html-minifier

도구 흐름(workflow) 관점에서 보면 webpack이든 gulp이든 가장 인기 있는 도구입니다. 현재 자바스크립트는 uglify입니다. Corresponding deobfuscation 도구 : aval 대응하는 deobfuscation 도구, Jspacker

jsa와 같은 Baidu에서이를 검색 할 수 있습니다. 압축 유형 uglify, jsnice의 온라인 버전

• 역난독화 전략은 실제로 생성된 코드의 규칙을 기반으로 작성되는데, 이는 특징 분석을 관찰하고, 특징 분석을 관찰하고, 지속적으로 조정하는 것에 지나지 않습니다. 모두 쉽게 볼 수 있는 수치들이다.
• 어려움은 전혀 없습니다. 필요한 것은 인내심뿐입니다. 예를 들어, javascript-obfuscator에 해당하는 난독화 도구는 N 요소 문제로 분해될 수 있습니다.
• 함수의 범위를 쿼리하는 방법은 무엇입니까?
사전 실행 변수 대체에 가능한 유형은 무엇입니까?
• ...

예:

var _0xd6ac = ['[41m%s[0m', 'logG', 'log'];
(function(_0x203a66, _0x6dd4f4) {
  var _0x3c5c81 = function(_0x4f427c) {
    while (--_0x4f427c) {
      _0x203a66['push'](_0x203a66['shift']());
    }
  };
  _0x3c5c81(++_0x6dd4f4);
}(_0xd6ac, 0x6e));
var _0x5b26 = function(_0x2d8f05, _0x4b81bb) {
  _0x2d8f05 = _0x2d8f05 - 0x0;
  var _0x4d74cb = _0xd6ac[_0x2d8f05];
  return _0x4d74cb;
};

function logG(_0x4f1daa) {
  console[_0x5b26('0x0')]('[32m%s[0m', _0x4f1daa);
}

function logR(_0x38b325) {
  console[_0x5b26('0x0')](_0x5b26('0x1'), _0x38b325);
}
logG('logR');
logR(_0x5b26('0x2'));

function logG(message) {
  console.log('\x1b[32m%s\x1b[0m', message); 
}
function logR(message) {
  console.log('\x1b[41m%s\x1b[0m', message); 
}
logG('logR');
logR('logG');

로 복원하려면 첫 번째 단계는 사전 기능을 알고 나서 사전 기능을 실행하는 것입니다.

그러면 코드 작성이 쉬워집니다.
예를 들어 https://github.com/jscck/crac...

복원 후 코드를 재구성하는 방법은 코드를 생성하기 전에 코드를 패키징하는 데 어떤 도구 webpack이 사용되었는지 알아야 합니까?

webpack의 다양한 캡슐화 헤더와 테일

https://webpack.js.org/config...

(function webpackUniversalModuleDefinition(root, factory) {
  if(typeof exports === 'object' && typeof module === 'object')
    module.exports = factory();
  else if(typeof define === 'function' && define.amd)
    define([], factory);
  else if(typeof exports === 'object')
    exports['MyLibrary'] = factory();
  else
    root['MyLibrary'] = factory();
})(typeof self !== 'undefined' ? self : this, function() {
  return _entry_return_;
});

_0x5b26('0x0') 还原成 log더 깊게 들어가면 JS 구문 해석기, AST 추상 구문 트리가 포함될 수 있습니다

현재 언제 JS 구문 해석기의 경우 AST 추상 구문 트리의 기능은 다음과 같습니다:

prepack, esprima, babel

또는 antlr4와 관련된 "프로그래밍 언어 구현 패턴"을 읽을 수도 있습니다.

물론 esprima와 같은 도구를 사용하여 난독화할 수도 있지만 작업이 조금 더 필요하고 그만한 가치가 있는지 여부입니다.

향후 JS 상용 소스 코드 암호화의 방향은 웹어셈블리가 될 수도 있습니다. 먼저 서버 측에서 wasm으로 컴파일하면 소스 코드가 진정한 비공개 소스가 될 수 있습니다.

사람이 있는 곳에 길이 있고, 혼란스러운 곳에 난독화가 있습니다. 현재

프로그래밍 제품을 위한 기계 학습

nice2predict, jsnice...

https://www.sri.inf.ethz.ch/r...를 확인하세요

확장 참조

AST 추상 구문 트리

무엇이든 입력-> 출력할 수 있기 때문에 AST 추상 구문 트리에 대해 추가로 이야기하는 이유는 무엇입니까?

예를 들어 jsx를 미니 프로그램 템플릿 구문으로 변환하면 React 구문을 사용하여 Taro와 같은 미니 프로그램을 작성할 수 있습니다.
mpvue, wepy, postcss... 이들은 모두 AST를 통해 빌드하고 변환하는 도구이며, babel은 모두 AST를 사용합니다.

AST 추상 구문 트리의 일반적인 프로세스:

입력은 AST 트리를 생성

한 다음 AST 유형 어설션을 통해 해당 변환을 수행합니다

[관련 권장 사항: JavaScript 비디오 튜토리얼]

위 내용은 Javascript 난독화 및 역난독화(코드 포함)에 대한 자세한 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!