JavaScriptソースを隠す！驚くべき5つの方法と実践サンプルコード

はじめに
●JavaScriptソースコードを隠す理由
●JavaScriptソースコードを隠す方法
●JavaScriptソースコードを隠す注意点
まとめ

※本記事のコンテンツは、利用目的を問わずご活用いただけます。実務経験10000時間以上のエンジニアが監修しており、基礎知識があれば初心者にも理解していただけるように、常に解説内容のわかりやすさや記事の品質に注力しております。不具合・分かりにくい説明や不適切な表現、動かないコードなど気になることがございましたら、記事の品質向上の為にお問い合わせフォームにてご共有いただけますと幸いです。(理解できない部分などの個別相談も無償で承っております)
(送信された情報は、プライバシーポリシーのもと、厳正に取扱い、処分させていただきます。)

はじめに

この記事を読めば、JavaScriptソースコードを隠すことができるようになります。

JavaScriptソースコードを隠すことで、セキュリティを向上させることができます。

また、盗用や不正アクセスのリスクを軽減することが可能です。

●JavaScriptソースコードを隠す理由

JavaScriptソースコードを隠す理由は主に次の通りです。

セキュリティの向上
コードの盗用防止
不正アクセスの防止

これらの理由から、JavaScriptソースコードを隠す方法が求められています。

●JavaScriptソースコードを隠す方法

下記に5つのJavaScriptソースコードを隠す方法を解説します。

○方法1：外部ファイル化

JavaScriptコードをHTMLファイルから分離し、外部ファイルとして読み込むことで、直接コードが見えなくなります。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>外部ファイル化サンプル</title>
  <script src="external.js"></script>
</head>
<body>
</body>
</html>

○方法2：難読化

JavaScriptコードを難読化（オブファスケーション）することで、第三者による解析を困難にします。

// 通常のコード
function helloWorld() {
  console.log("Hello, World!");
}

// 難読化されたコード
var _0x4b5c=["\x48\x65\x6C\x6C\x6F\x2C\x20\x57\x6F\x72\x6C\x64\x21"];function helloWorld(){console[_0x4b5c[0]]();}

このように難読化されたコードは、人間が理解するのが困難であり、盗用や不正アクセスのリスクを軽減できます。

○方法3：リンク先の変更

JavaScriptファイルへの直接リンクを変更し、アクセスを困難にします。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>リンク先変更サンプル</title>
  <script src="scripts/hidden/external.js"></script>
</head>
<body>
</body>
</html>

○方法4：iframe利用

iframeを利用して、JavaScriptコードを別ページに分離し、ソースを見ることが困難になります。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>iframe利用サンプル</title>
</head>
<body>
  <iframe src="hidden_javascript.html" style="display:none;"></iframe>
</body>
</html>

○方法5：WebWorker利用

WebWorkerを利用して、JavaScriptコードをバックグラウンドで実行し、ソースコードの表示を避けます。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>WebWorker利用サンプル</title>
  <script>
    if (typeof(Worker) !== "undefined") {
      var worker = new Worker("hidden_worker.js");
    } else {
      console.log("WebWorkerがサポートされていません。");
    }
  </script>
</head>
<body>
</body>
</html>