歴史的には、見えないインク・マイクロドット（極小の点に縮小した文書）などのアナログな手法がありましたが、デジタル時代では画像ファイルのピクセルデータが最も一般的な隠し場所です。次のセクションで、その代表的な手法「LSB法」を見ていきましょう。

画像の1ピクセルは、赤(R)・緑(G)・青(B)それぞれ0〜255（8ビット）の値で色を表現します。例えばR=200とR=201の違いは、人間の目では区別できません。この「最後の1ビット（最下位ビット／LSB）」を変えても見た目がほぼ変わらないという性質を利用し、多数のピクセルのLSBに1ビットずつメッセージを埋め込んでいくのがLSB法です。

実は、ブラウザに標準搭載されているCanvas APIを使えば、画像の生のピクセルデータを直接読み書きできます。getImageData()を呼ぶと、各ピクセルのR・G・B・Aの値が並んだ配列が手に入ります。CTFのステガノグラフィー問題は、まさにこの仕組みを使って作られています。

var ctx = canvas.getContext('2d');
var data = ctx.getImageData(0,0,canvas.width,canvas.height).data;
// data[0]=1番目のピクセルのR値, data[4]=2番目のピクセルのR値 ...
var lsb = data[0] & 1;  // R値の最下位ビットだけを取り出す

取り出したビットを8個ずつまとめて1バイト（文字コード）に変換し、String.fromCharCode()で文字に戻せば、隠されたメッセージが復元できます。次のセクションのチャレンジで、実際にこの処理を実行してみましょう。

下に表示されている紫のグラデーション画像は、このページに実在するCanvas要素です。見た目はただのグラデーションですが、各ピクセルのR値のLSBにフラグが1ビットずつ埋め込まれています。Consoleで実際に抽出してみましょう。

(function(){
  var canvas = document.getElementById('ep16-canvas');
  var ctx = canvas.getContext('2d');
  var data = ctx.getImageData(0,0,canvas.width,canvas.height).data;
  var result = '';
  for (var i = 0; i < 30; i++) {
    var byte = 0;
    for (var b = 0; b < 8; b++) {
      var pixelIndex = (i*8+b) * 4;
      byte = (byte << 1) | (data[pixelIndex] & 1);
    }
    if (byte === 0) break;
    result += String.fromCharCode(byte);
  }
  console.log('DECODED:', result);
})();

第16話では、暗号とは異なる「存在自体を隠す」ステガノグラフィーの考え方と、その代表的な手法であるLSB法の仕組みを学びました。そして、ブラウザのCanvas APIを使って実際にピクセルデータからフラグを抽出するという、本物のフォレンジック技術を体験しました。