fkm blog

software開発に関することを書いていきます

ブラウザでファイルの暗号化(2)

AESの共通鍵をそのままメールとかで送ったりしたら、「パスワードzip」問題と同じなので、もうちょっといい感じで鍵を共有したい。

そこで登場するのが公開鍵暗号の仕組み。これ、Web標準APIに入ってたりする。MdNのドキュメント

鍵ペアを作る

鍵ペアもJavaScriptを叩くだけで作れてしまう。

const keyPair = await window.crypto.subtle.generateKey(
    {
        name: "RSA-OAEP",
        modulusLength: 4096,
        publicExponent: new Uint8Array([1, 0, 1]),
        hash: "SHA-256",
    },
    true,
    ["encrypt", "decrypt"]
);

第1引数はアルゴリズム。今回は鍵長4096bitのRSAにしてみた。第2引数の true はエクスポート可能かどうか。ファイルに保存して後で使いたいので true にしておく。第3引数は鍵の用途。暗号化と復号に使うペアだと encryptdecrypt を指定する。署名として使う場合は signverify にするのかな(まだ試してない)。

結果の keyPair はこんなインターフェース。エクスポートは次回。

interface CryptoKeyPair {
    privateKey: CryptoKey;
    publicKey: CryptoKey;
}

ブラウザでファイルの暗号化(1)

まずは暗号化/復号の部分。 Crypto-JS を使った。

$ npm install --save crypto-js
$ npm install --save-dev @types/crypto-js

公式ドキュメント

アルゴリズムとしてAESを使ってみる。

暗号化

input が暗号化したい文字列。key が鍵。鍵は短い場合、いい感じに扱ってくれるみたい。

const encrypted = CryptoJS.AES.encrypt(input, key).toString()

復号

AESは共通鍵を使うので、暗号化で使った key を渡す。

const bytes = CryptoJS.AES.decrypt(encrypted, key);
const input =  bytes.toString(CryptoJS.enc.Utf8);

Ractive.jsで、コンポーネントを使う側でイベント設定したい

公式ドキュメント読んでも見つからなかったのでGithubのIssue探したら一応あった。

やりたいこと

こんな感じでコンポーネントにイベントを設定したい。1つの画面に同じコンポーネントは複数配置したい。

<MyButton
    on-click="login"/>
<MyButton
    on-click="signup"/>

コンポーネント側をどうするか

fire() を呼ぶようにすればいいみたい。

const MyButton = Ractive.extend({
    template: '<button on-click="@this._click()">Button!!</button>',
    _click: function() {
        this.fire('click'); // 属性のon-clickで設定されたイベントが実行される
    }
});

fkm basic

こんなアプリを出してたりする。

play.google.com

分析はできていないけど、なぜか1月〜2月に「インストールされてるな」という兆候がある。

新年になってプログラミングやろうという方が世界的にいたりするのかなぁ

自分だけgitignoreしたい

ぐぐったらこのサイトが出てきたので、メモ

.git/info/exclude に自分の環境だけ gitignore したいファイルを書くと、差分として出てこなくなる。中身は .gitignore と書き方同じなので詳しく説明はしません。