JavaScript 難読化の考察とおすすめのツール JavaScript Obfuscator Tool

難読化とはコードを分かりにくい形に変換し、読み手に理解し辛くする事です。難読化しても変換前のコードと同じように動作します。そのためプログラム自体の機能は変かわりません。

Contents

1 難読化の必要性
2 JavaScript Obfuscator Toolを使ってみる

難読化の必要性

かつて、こんな記事を書きました。

ウェブブラウザーで F12キーを押すと、ウェブページの検証画面が表示されます。そしてコンソールから値の書き換えをすることができます。

ためしにこんなページを作りました。変数 score の値を表示するだけです。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>テスト</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>

<body>

<div id = "score"></div>

<script>
    let score = 0;
    let $score = document.getElementById('score');
    setInterval(()=>{
        showScore();
    }, 100);

    function showScore() {
        $score.innerText = score;
    }
</script>

</body>
</html>

<!DOCTYPE html>

<head>

</head>

<body>

let score = 0;

let $score = document.getElementById('score');

setInterval(()=>{

showScore();

}, 100);

function showScore() {

$score.innerText = score;

}

</script>

</body>

</html>

F12キーを押してコンソールに以下を入力してみます。

score = 100

1	score = 100

これでスコアを変更することができます。

またF12キーを押してコンソールに以下を入力すると関数の定義を変更することもできてしまいます。

function showScore(){
    $score.innerText = 100;
}

function showScore(){

$score.innerText = 100;

}

function ～という書き方は改ざんされる危険性があります。アロー関数にすると関数の書き換えを防ぐことはできます。

// function showScore(){
//    $score.innerText = score;
// }

const showScore = () => {
    $score.innerText = score;
}

// function showScore(){

// $score.innerText = score;

// }

const showScore = () => {

$score.innerText = score;

}

これだと上記の方法でshowScore関数を書き換えようとしてもエラーが出てうまくいきません。ただ変数 score が改ざん可能であるという事実はかわりません。

そこで不正な改ざんをさせないために難読化で対抗します。難読化は読んで字のごとし、改ざんをしようとする者にとってコードを読みづらくする事です。だから100％防ぐことはできません。

JavaScript Obfuscator Toolを使ってみる

JavaScript Obfuscator Toolは難読化をするのに役立ちます。

JavaScript Obfuscator Tool

設定を変更しないで以下を難読化してみます。

// Paste your JavaScript code here
function hi() {
  console.log("Hello World!");
}
hi();

// Paste your JavaScript code here

function hi() {

console.log("Hello World!");

}

hi();

するといい感じに難読化してくれます。

ただよく見ると関数hi()を呼び出していることがわかります。

どのように難読化されるかを検証するためには「String Array」とCompactは外しておいたほうがいいかもしれません。

以下を難読化してみましょう。

let score = 0;
let $score = document.getElementById('score');
setInterval(()=>{
    showScore();
}, 100);

const showScore = () => {
    $score.innerText = score;
}

let score = 0;

let $score = document.getElementById('score');

setInterval(()=>{

showScore();

}, 100);

const showScore = () => {

$score.innerText = score;

}

すると以下のようになります。文字列に関する操作をややこしくしていただけでほとんどなにも変わっていません。

let score = 0x0, $score = document['getElementById']('score');
setInterval(() => {
    showScore();
}, 0x64);
const showScore = () => {
    $score['innerText'] = score;
};

let score = 0x0, $score = document['getElementById']('score');

setInterval(() => {

showScore();

}, 0x64);

const showScore = () => {

$score['innerText'] = score;

};

そこでRename Globalsのオプションを有効にします。

let _0x4c73e4 = 0x0, _0x46b881 = document['getElementById']('score');
setInterval(() => {
    _0x233e92();
}, 0x64);
const _0x233e92 = () => {
    _0x46b881['innerText'] = _0x4c73e4;
};

let _0x4c73e4 = 0x0, _0x46b881 = document['getElementById']('score');

setInterval(() => {

_0x233e92();

}, 0x64);

const _0x233e92 = () => {

_0x46b881['innerText'] = _0x4c73e4;

};

関数名が置き換わったので解読が難しくなったように思えます。

Rename Propertiesのオプションを有効にするとライブラリを使用している場合、うまく動かなくなるので選択しないほうがよいでしょう。

// ThreeJSでシーンを生成
let scene = new THREE.Scene();

1 2	// ThreeJSでシーンを生成 let scene = new THREE.Scene();

// THREE._0x4b85edはコンストラクタではないとエラーが出る
let _0x48fdf7 = new THREE['_0x4b85ed']();

1 2	// THREE._0x4b85edはコンストラクタではないとエラーが出る let _0x48fdf7 = new THREE['_0x4b85ed']();

document[‘getElementById’](‘score’)となっていると、ここにスコアが表示されることがわかるので、

let $score = document.createElement('div');  // 要素をJavaScript内でつくる
document.body.appendChild($score);

let score = 0;

setInterval(()=>{
    showScore();
}, 100);

const showScore = () => {
    $score.innerText = score;
}

let $score = document.createElement('div'); // 要素をJavaScript内でつくる

document.body.appendChild($score);

let score = 0;

setInterval(()=>{

showScore();

}, 100);

const showScore = () => {

$score.innerText = score;

}

これだと難読化したときバレにくいと思います。

let _0x59ede1 = document['createElement']('div');
document['body']['appendChild'](_0x59ede1);
let _0x177412 = 0x9;
setInterval(() => {
    _0x521bd8();
}, 0x64);
const _0x521bd8 = () => {
    _0x59ede1['innerText'] = _0x177412;
};

let _0x59ede1 = document['createElement']('div');

document['body']['appendChild'](_0x59ede1);

let _0x177412 = 0x9;

setInterval(() => {

_0x521bd8();

}, 0x64);

const _0x521bd8 = () => {

_0x59ede1['innerText'] = _0x177412;

};

JavaScript 難読化の考察とおすすめのツール JavaScript Obfuscator Tool

難読化の必要性

JavaScript Obfuscator Toolを使ってみる

鳩でも分かるC#管理人からのお願い

コメントについて

管理人のモチベーションアップのために

コメントをどうぞ