TLS1.2と1.3での鍵交換/認証/暗号化に関する用語をまとめる

TLS_ECDHE_RSA_WITH_AES_128_GCM_SHA256

TLS1.2での暗号スイートの一例ですが、なんでこんなにいくつもアルゴリズムを使う必要があるの？と思うわけです。しかも、ECDHEとECDSAとEdDSAなど用語が似ていたり、RSAは鍵交換と認証を両方やってしまったり、勉強している中でとても混乱してしまいそうです。

TLS1.2とTLS1.3の違いも含めて、自分なりにまとめて整理していきます。間違いがあればご指摘いただけると嬉しいです。

TLSで行われていること

以下の4つの視点でまとめていきます。仮にクライアントAがサーバBと安全ではない経路を使って安全に通信したいとします。

• 鍵交換
  • Aは暗号化用の鍵を誰にも知られずBに伝えたい
• 認証（デジタル署名）
  • AはBが本当にB本人であることを知りたい
• 暗号化
  • Aは長いメッセージを誰にも知られずBに伝えたい
• 完全性の検証
  • AはBから受け取った返信が改ざんされていないことを確認したい

TLS1.2の適当な暗号スイートを上記4つに当てはめると以下のようになります。

なお、TLS1.3で暗号スイートと言うと「TLS_AES_128_CCM_SHA256」のように少し短くなっており、暗号化以降の部分が抜き出された形になります。TLS1.2では暗号スイートとして一緒くたになっていましたが、TLS1.3からそれぞれ別々に合意が取られます。

暗号化・完全性の検証

一番とっかかりやすいところは暗号化だと思います。共通鍵暗号で秘匿したいメッセージを暗号化するためのアルゴリズムです。

	種類	TLS1.2	TLS1.3*1
AES	ブロック暗号	o	o
3DES	ブロック暗号	o	x
RC4	ストリーム暗号	o	x
ChaCha20	ストリーム暗号	x	o

最も主流なのはAESで、TLS1.3でも引き続き採用されています。長いメッセージをブロックという単位で区切って暗号化するブロック暗号には、暗号利用モードというバリエーションがあります。ブロックを順々に暗号化する際、前のブロックをどう活用するかを決めます。

	完全制の検証	TLS1.2	TLS1.3*2
AES_XXX_CBC	x	o	x
AES_XXX_GCM (AEAD)	o	o	o
AES_XXX_CCM (AEAD)	o	o	o

CBCは秘匿用の暗号利用モードであり、完全制の保証には別途MAC (Message Authentication Code) の検証が必要でした。このMACの存在はBEAST攻撃など数多くの問題を引き起こすため、MACを使わないAEAD (Authenticated Encryption with Associated Data) のみがTLS1.3で許可されています。

鍵交換

次は、先のアルゴリズムでメッセージを暗号化/復号するための鍵を、安全に相手と共有する必要があります。もし、安全ではない経路中にそのまま鍵を流したりなんてしたら、攻撃者が鍵を盗み見る可能性があります。これを防止するのが鍵交換アルゴリズムです。

鍵交換アルゴリズムは小さいメッセージ（鍵）を暗号化して相手に送るので、要は暗号化アルゴリズムです。ただ、共通鍵暗号よりも安全だが計算コストが高い公開鍵暗号を利用します。

	TLS1.2	TLS1.3
RSA	o	x
DHE	o	o
ECDHE	o	o

RSAはこれまで長らく鍵交換アルゴリズムとして使われてきました。しかし、セキュリティを担保するために必要な鍵長が1024bit→2048bit (→3072bit) と増えており、計算コストも増加してしまいます。また、RSAは鍵を盗難されると過去のメッセージもすべて復号されてしまう欠点があります（PFSがない）。なので、TLS1.3ではDHEとECDHEだけをサポートします。

楕円曲線暗号

ECDHEはDiffie–Hellman鍵交換アルゴリズムを楕円曲線暗号で実現する鍵交換アルゴリズムです。RSAと比べて鍵長が短く、PFSがあります。

利用できる楕円はいくつか定義されており、その中から選びます

ECDHE	楕円曲線	TLS1.2	TLS1.3*3
secp256r1	P256	o	o
x25519	Curve25519	x	o
x448	Curve448	x	o

楕円曲円暗号の仕組みは以下の記事がシンプルでわかりやすかったです。

qiita.com

認証（デジタル署名）

鍵が安全に交換できて、暗号通信できるけど、本当に通信相手は正しいの？PKIをベースに署名アルゴリズムによって通信相手の認証を行います。

PKI (Public Key Infrastructure) は日本語で公開鍵基盤といい、一般に信頼された認証機関（CA）がサーバが本物であることを保証するという仕組みそのもの、暗号通信のインフラのことを指します。

大雑把な認証の流れは以下です。公開鍵を取得する手順にもなります。

1. サーバがCAから本物であることを証明する証明書を貰う（CAによる署名）
2. クライアントに証明書を送る
3. クライアントは証明書が本物か検証すると同時に、証明書からサーバの公開鍵を取得する

その署名アルゴリズムが以下です。

	TLS1.2	TLS1.3
DSA	oだが実質x	x
RSA	o	o
ECDSA	o	o
EdDSA	x	o

なぜ鍵交換に出てきたRSAがなぜ署名にもでてくるの！？という気持ちになりますが、 RSAが復号鍵でも暗号化できるという特殊な性質だからです。TLS1.3の署名でRSAが廃止されていない理由はわからないです。ハッシュをかませるからでしょうか。しかし、鍵長が長くなるにつれパフォーマンスが落ちる問題は依然としてあります*4。

ECDSAとEdDSAはどちらも楕円曲線を用いた署名アルゴリズムです。

ECDSA/EdDSA	楕円曲線	TLS1.2	TLS1.3*5
ecdsa_secp256r1_sha256	P256	o※	o
ed25519	Curve25519	x	o
ed448	Curve448	x	o

※TLS1.2では正確にはecdsa_secp256r1_sha256というアルゴリズム名ではないです。

まとめ

冒頭の疑問に自分で答えます。

なんでこんなにいくつもアルゴリズムを使う必要があるの？

役割分担とマシンのスペックに応じた暗号を用意するため。

ECDHEとECDSAとEdDSAなど用語が似ていたり

ECDHEは楕円曲線を使った鍵交換アルゴリズムで、ECDSAとEdDSAは楕円曲線を使った署名アルゴリズム。EdDSAのほうが後発。

RSAは鍵交換と認証を両方やってしまったり

RSAが復号鍵でも暗号化できるという特殊な性質なため。

参考

RFC

• RFC 5246 - The Transport Layer Security (TLS) Protocol Version 1.2

• RFC 8446 - The Transport Layer Security (TLS) Protocol Version 1.3

楕円曲線

• エドワーズ曲線デジタル署名アルゴリズム - Wikipedia

• 認証付き暗号 - Wikipedia

• https://mailarchive.ietf.org/arch/msg/cfrg/-9LEdnzVrE5RORux3Oo_oDDRksU/

• ssh - ECDSA vs ECDH vs Ed25519 vs Curve25519 - Information Security Stack Exchange

• 楕円曲線暗号の概要 - Qiita

• SSHの公開鍵暗号には「RSA」「DSA」「ECDSA」「EdDSA」のどれを使えばよいのか？ - GIGAZINE

• ECDSAによる署名生成と検証の仕組みを分かりやすく解説

TLS1.3との違い

• TLS1.3で使える・使えない暗号アルゴリズム - Qiita

• 安全性が高いTLSへの移行で解決 - 狙われるセキュリティプロトコル：日経クロステック Active

• TLS 1.3 開発日記 その22 公開鍵暗号の動向 - あどけない話

• 【図解】TLS v1.3の仕組み ~Handshakeシーケンス,暗号スイートをパケットキャプチャで覗いてみる~ | SEの道標

• SSL/TLS暗号設定ガイドライン ～ 安全なウェブサイトのために（暗号設定対策編）

• TLS 1.3とは？ TLS 1.2との違いと企業が取るべき戦略

TLS全般

• プロフェッショナルSSL/TLS

• 楕円曲線ディフィー・ヘルマン鍵共有 - Wikipedia

• Digital Signature Algorithm - Wikipedia

• 理解してるつもりの SSL/TLS でも、もっと理解したら面白かった話 · けんごのお屋敷

• デジタル証明書の仕組み

*1:https://tools.ietf.org/html/rfc8446#section-5.5

*2:https://tools.ietf.org/html/rfc8446#appendix-B.4

*3:https://tools.ietf.org/html/rfc8446#section-4.2.7

*4:プロフェッショナルSSL/TLS p251-p252

*5:https://tools.ietf.org/html/rfc8446#section-4.2.3

スプライトアニメーションをしながら座標移動をする

スプライト画像をアニメーションさせながら、座標移動も適応する方法に単純ながら四苦八苦したので記録に残します。

前準備

  <div class='img-container'>
  </div>

.img-container {
  width: 700px;
  height: 100px;
  margin: 100px auto 0;
  border: 1px solid #000000;
  font-size: 0;
}

上のボーダーで囲まれた領域を横断するように歩くスプライドアニメーションを配置したいです。png画像は実際は透過処理しています。

実現方法

多段のdivにして、親に座標移動のanimationを、子にスプライト画像のanimationを適応させることで実現できます。

  <div class='img-container'>
    <div class='animation-move'>
      <div class='animation-walk'></div>
    </div>
  </div>

/* 座標移動 */
.animation-move {
  animation: move 3s linear infinite;
}

@keyframes move {
  to {
    transform: translateX(600px);
  }
}

/* スプライトアニメーション */
.animation-walk {
  background: url(img/walk.png) no-repeat;
  width: 100px;
  height: 100px;
  animation: walk 0.3s steps(2) infinite;
}

@keyframes walk {
  to {
    background-position: -200px 0;
  }
}

実際のコードはgithubに上げています

dorapon2000-blog/sprite_animation at main · dorapon2000/dorapon2000-blog · GitHub

座標移動させない場合

別の画像で

異なるサイズの画像を均等に配置して上下左右中央寄せで並べるCSS

flexboxで解決できる話ですが、自分のGoogle力が低くてなかなか解決方法にたどり着けませんでした。flexboxの使い方ではなくこのシチュエーションの解決方法としてまとめておきます。

前準備

  <div class='img-container'>
    <img src='img/large.png' alt=''>
    <img src='img/small.png' alt=''>
  </div>

.img-container {
    width:700px;
    margin: 100px auto 0;
    border: 1px solid #000000;
    font-size: 0;
}

font-size: 0;がないと少し空白ができます。

300x300と200x200の画像がありそれらを700pxの領域にタイトルのように並べたいです。

解決方法

flexboxを使います。

.img-container {
    display: flex;
    justify-content: space-evenly;
    align-items: center;
}

• justify-content: space-evenly;で左右と中央の余白の幅が同じになるように均等に配置する
• align-items: center;で上下中央寄せする

コードをGitHubにあげています。

dorapon2000-blog/css_rayout at main · dorapon2000/dorapon2000-blog · GitHub

おまけ

私がやりたかったのは上記の方法ですが、以下のような方法もあります。ただし、中央の隙間が目立ちます。

space-around

.img-container {
    display: flex;
    justify-content: space-around;
    align-items: center;
}

• space-aroundでアイテムの周りに均等に余白ができる

flex + margin: auto

.img-container {
    display: flex;
}

img {
    margin: auto;
}

• space-aroundの代わりにmarginで代用

table

  <div class='img-container'>
    <table class='tbl'>
      <tr>
        <td>
          <img src='img/large.png' alt=''>
        </td>
        <td>
          <img src='img/small.png' alt=''>
        </td>
      </tr>
    </table>
  </div>

.img-container {
    width: 700px;
    margin: 100px auto 0;
    border: 1px solid #000000;
    font-size: 0;
}

.tbl {
    width: 700px;
    text-align: center;
}

• テーブルの境界に少し隙間ができてしまうが原因はわからない

参考

• 要素を横並びにするならflex boxしかない！ - Qiita
• 代表的なjustify-contentと、特徴。 - Qiita
• CSSのプロパティ値「auto」を使ったテクニックのまとめ、マージンやサイズや配置やFlexboxなど | コリス

vimの最低限な基本操作まとめ（自分用メモ）

普段はVSCodeかemacsを使うため、vimは全然使い慣れていません。しかし、サーバには基本的にemacsが入っていないため、エラーが発生した特定の行を見たり、設定ファイルの一部分だけ編集する際はvim(vi)を利用します。慣れたほうががいいとは思いつつ、モチベーションが湧かないため、最低限の操作だけできるような意識が低いメモです。（まとめながら覚える）

これだけはできるようになりたいこと

• ファイルの保存
• 単語検索・置換
• 特定行に移動
• 1行削除
• コピペ
• undo

移動は十字キー。

モード

vimには文字を書き込める「挿入モード」とvimのコマンドを打つ「コマンドモード」があり、使い分ける必要がある。モードごとにできる操作が違う。

キー	使用できるモード	説明
Esc	挿入	コマンドモードにする
i	コマンド	挿入モードにする

vimを終了する

変にファイルを編集してしまったのに、vimの操作を完全に忘れて、にっちもさっちもいかなくなったときはEsc :q!。vimで一番最初に覚えた。

キー	使用できるモード	説明
ZZ	コマンド	保存して終了
:q!	コマンド	保存せずに終了

検索

キー	使用できるモード	説明
/検索単語 Enter	コマンド	検索
n	コマンド	次の検索単語へ
N	コマンド	前の検索単語へ

移動

キー	使用できるモード	説明
gg	コマンド	ファイル先頭へ
G	コマンド	ファイル末尾へ
50G	コマンド	50行目へ

それぞれ:0 :$ :50でもいける。

コピペ

yはヤンクのy。

キー	使用できるモード	説明
/検索単語 Enter	コマンド	検索
dd	コマンド	カーソル行切り取り
yy	コマンド	カーソル行コピー
3yy	コマンド	カーソル行から3行コピー
p	コマンド	カーソルの右側にペースト
v	コマンド	ビジュアルモードへ（選択コピーできるモード）
y	ビジュアル	選択範囲をコピーしてコマンドモードへ

その他

キー	使用できるモード	説明
:%s/検索単語/置換単語/g Enter	コマンド	ファイル全体で一括置換
u	コマンド	undo
Ctrl-o コマンド	挿入	一時的にコマンドモードのコマンドを入力できる

参考

• よく使う Vim のコマンドまとめ - Qiita
• vim置換 - Qiita
• [vim] insert mode 中に貼り付けるのまとめ - Qiita