Category: Programming与えられたURLにアクセスすると、下図のような格子状の画像が表示されます。このマス目のうち1箇所だけ
Points: 100
Click on the different color.
http://ctfquest.trendmicro.co.jp:43210/click_on_the_different_color
Please type in the flag in the 'TMCTF{<flag>}' format.
Please replace <flag> with the actual flag you would like to submit.
Example: If your flag is abc, then please type in TMCTF{abc}.
が微妙に色が異なっているので、そのマス目をクリックすると次の画像が表示されるようになっています。
最初は2×2から始まって、3×3、4×4、という風にどんどん細かくなっていきます。
下図は13×13ですが、目で判断するのは至難の業です。
そこで、HTML5+javascriptで画像の特定座標の色を読み取って、異なる色の座標を取得するプログラムを書きます。
<canvas id='panel' width="390" height="390"></canvas>表示された画像をスクリプトと同じフォルダに保存し、画像のファイル名をvar src変数に指定して実行すると、下図のとおり、色の異なる座標を取得することができます。これを繰り返すことでフラグを得ることができます。
<div id='answer'></div>
<script>
(function() {
var src = 'ff3d5e6f48bee72d18d9ff04d3e5955199d2f8aa7684.png';
var canvas = document.getElementById('panel');
var pal = document.getElementById('answer');
context = canvas.getContext('2d');
var image = new Image();
// 画像要素を生成します
image.src = src;
// 画像読み込み完了
image.onload = function() {
var RATIO = 51; // 画像の分割比
canvas.width = image.width;
canvas.height = image.height;
// 画像をキャンバス上に表示します
context.drawImage(image, 0, 0, image.width, image.height);
var colorArray = context.getImageData(0, 0, canvas.width, canvas.height).data;
var save_r = 0;
var save_g = 0;
var save_b = 0;
var flag = 0;
for ( var x = 0 ; x<canvas.width; x++) {
for (var y = 0 ; y<canvas.height; y++) {
if (colorArray[(((y * canvas.width) + x) * 4) + 0] == 255 && colorArray[(((y * canvas.width) + x) * 4) + 1] == 255 && colorArray[(((y * canvas.width) + x) * 4) + 0] == 255) {
} else {
if (save_r == 0 && save_g == 0 && save_b == 0) {
save_r = colorArray[(((y * canvas.width) + x) * 4) + 0];
save_g = colorArray[(((y * canvas.width) + x) * 4) + 1];
save_b = colorArray[(((y * canvas.width) + x) * 4) + 2];
}
if (save_r == colorArray[(((y * canvas.width) + x) * 4) + 0] &&
save_g == colorArray[(((y * canvas.width) + x) * 4) + 1] &&
save_b == colorArray[(((y * canvas.width) + x) * 4) + 2]) {
} else {
pal.innerHTML = 'http://ctfquest.trendmicro.co.jp:43210/' + src.split('.')[0] + '?x=' + x + '&y=' + y;
flag = 1;
break;
}
}
}
if (flag == 1) break;
}
};
})();
</script>
下図は最後の画像です。この次にフラグが表示されました。
表示されたフラグは、
Congraturations!! The flag is TMCTF{U must have R0807 3Y3s!}です。
