1

私は現在、ダグラス・クロックフォードのプレゼンテーション「セキュリティの原則」に示されている効果を再現しようとしています。「ワンタイムパッド」暗号化キーを2回使用するリスクのデモンストレーションとして、彼は2つの画像を表示し、同じキーで暗号化し、一方を他方から差し引くと、両方の画像が同時に表示されます。

私のアプローチでは、4つのキャンバス要素を使用します。1つはキーの表示用、2つは画像の読み込み用、4つ目は減算の宛先として使用します。（ある程度）ランダムなキーを生成し、画像をロードして暗号化することができます。画像を復号化しようとすると問題が発生します。そのために、最初のコンテナーに画像をロードして暗号化し、次に2番目のコンテナーを暗号化して（これによりキーのコピーが作成されます）、両方のコンテナーのピクセルを減算します。元の画像は引き続き認識できますが、ランダムなピクセルがキャンバスに表示されます。

画像を2番目のコンテナにロードする場合、空の最初のコンテナから画像を差し引くと、反転バージョンを取得できるはずです。予期せず、キャンバスは空白のままになります。

私の現在の状態はJSFiddleで見ることができます。ご覧ください。

4

1 に答える 1

1

更新されたデモ

最初にアルファを 255 に設定していましたが、引き続きデータを減算したため、既に 255 に設定しているにもかかわらず、アルファ チャネルを減算しました。条件付きにするだけで済みました。

次に、値を 256 にしましたが、範囲は 0 ～ 255 です。最後になりましたが、生成部分に別のアルファ条件が必要でした。

//generate a random image
(function() {
    var ct = getCTX("c0");
    var imgData = ct.createImageData(400, 400);
    var data = imgData.data;
    for (var i = 0, j = data.length; i < j; i++) {
        // Added conditional
        if (i % 4 === 3){
            data[i] = 255;
        }else{
            // random * 255 since color ranges are from 0-255
            data[i] = Math.floor(Math.random() * 255);
        }
    }
    ct.putImageData(imgData, 0, 0);
})();


function encodeWrap(id) {
    return (function() {
        var img = getCTX(id);
        var imgData = img.getImageData(0, 0, 400, 400);
        var data = imgData.data;
        for (var i = 0, j = data.length; i < j; i++) {
            if (i % 4 === 3){
                // added condition for alpha
                data[i] = 255;
            }else{
                // changed to 255
                data[i] = (data[i] + randomValues[i]) % 255;
            }
        }
        img.putImageData(imgData, 0, 0);
    });
}

document.getElementById("bt3").addEventListener("click", function() {
    var img1 = getImageData("c1"),
        img2 = getImageData("c2"),
        ct = getCTX("c3"),
        imgData = ct.createImageData(400, 400),
        data = imgData.data,
        tmp;

    for (var i = 0, j = data.length; i < j; i++) {
        if (i % 4 === 3){
            data[i] = 255;
        }else{
            tmp = img1[i] - img2[i];
            // changed to 255 since ranges go from 0 - 255
            if (tmp < 0){ tmp +=255;};
            data[i] = tmp;
        }
    }

    ct.putImageData(imgData, 0, 0);
});​
于 2012-04-19T14:58:56.790 に答える