QiitaQiitaの最新情報を7時、12時、19時にTwitterでお届けします。JavaScriptPythonJavaScriptRailsRubyAWSPHPdockerJavavue.jsSwiftAndroidiOSC#UnityLinuxNode.jslaravelGoGitCSSHTMLReactMacMySQLC++TensorFlowDeepLearningKotlinSQL新人プログラマ応援202002142020/02/232020/02/222020/02/212020/02/202020/02/192020/02/182020/02/172020/02/162020/02/152020/02/1420200214のJavaScriptに関する記事は14件です。anywhere"的な美味しいこともある。各環境にbuiltinされているAPIを使ったときはそうはいかない時がある。今回は暗号化のCryptoで不覚にも1日ハマったのでその記録を残しておく。readerNode.jsで暗号化したデータをブラウザで復号化したいと思っている方。PrerequisiteAESの概要は理解していること。今回はAES256-CBCを使用する。記憶が正しければAES192はブラウザのAPIでサポートされていない旨のエラーが出たため。Bodyどうして片方のAPIで統一しないの?これはいい質問だ。実際のところ、Node.jsのcryptoをブラウザで実行したことがある。して採用されなかったのか?なぜなら100KBほどバンドルサイズが増えたから。詳しく知りたい場合は、この方の記事を読んでみるといいかもしれない。https://engineering.mixmax.com/blog/requiring-node-builtins-with-webpack一言でいうと、以下のブラウザ用cryptoがバンドルされてしまったため。https://github.com/crypto-browserify/crypto-browserifyブラウザのAPIを使えば100KBのバンドルを回避できるのだから、別々のAPIを使用するのは当然といってもいい。したら差分を吸収するI/Fのパッケージがあるかもしれないが調べてないNode.jsのCrypto基本的には公式ドキュメントのコードがそのまま使用できる。https://nodejs.org/api/crypto.html#crypto_class_cipher大して見どころはないが、私のソースも載せておく。ライブラリの方のソース。decryptByNodeApi}実行部分のソースの抜粋。}};注意点として以下のことがあげられる。公式ドキュメントとは異なりAESの256bit(32Byte)なのでキーは32Byteになる。IVは16Byte固定。ソースでは0固定にしているが本来は値を与えること。cryptByNodeApi()ではhexにしているため、ブラウザAPIへの入力に合わせるためArrayBufferを取り出している。ブラウザAPIの方はArrayBufferを与えないとエラーになるが、実際何がArrayBufferでなくてはいけないのかわからなくてハマったSubtleCrypto.decrypt()のドキュメントを見るとBufferSourceとなっており、リンク先に行かないと気が付かない罠。ciphertext).BrowserのCrypto基本的には公式ドキュメント先のコードがそのまま使用できる。https://github.com/mdn/dom-examples/blob/master/web-crypto/encrypt-decrypt/aes-cbc.js大して見どころはないが、私のソースも載せておく。ライブラリの方のソース。importKeyByBrowserApi}注目ポイントは、importKey()とdecrypt()の二つを使用しないといけないところ。importKey()であっているのだろうか?rawKeyは正しく指定しているのか?ArrayBufferじゃないといけないのエラーって何?複数の誤りでエラーポイントが特定できず完成までに1日も消耗してしまった。rawの中身については公式ドキュメントのソースの1行目に具体的にある。{ともなっており、rawKeyは引数しかないと思ってしまった。Uint8Array(16)ってちゃんとあるのにブラウザで暗号化する場合、key指定不要のgenerateKey()を利用するため、Node.jsのkeyを使えるのかもその時はわかっていなかった。加えて生成されるCryptoKeyの中身が見れないのが、問題解決を遅らせた。CryptoKeyがおかしいのか、decrypt()がおかしいのか見当がつかなかった。これを間違わなければ1時間もあれば終わるようなもの。ConclusionJavaScriptは型を宣言しないとはいえ、builtinAPIはTypeScriptの型が見みれる。(複数の入力があるためどれがどれに対応するかはわからないが)それにもかかわらず何とかなるだろうと、詳しく見ずにリトライを繰り返したのがよくなかった。丁寧に見ていけば大丈夫...なはず。day!Appendices今回のコードをブラウザで動かせるようにしたソースコード。自分用なので少し不親切なのに注意。それ以外は通常のイベントバスのやり方と同じ。}};</script>子コンポーネント(2つ)目標とする動作は下記。スローされ、child1は非表示。