[58] 暗号鍵を作ろう<keygen>

<keygen>要素は、セキュリティ技術の「公開鍵暗号方式 (Public key cryptosystem)」での
公開鍵と秘密鍵のペアを生成するコントロールを表示する要素。

「公開鍵暗号方式」って聞き慣れないコトバでしたが、調べてみると普段よく使ってるかも。
1つめの公開鍵で暗号化して、2つめの秘密鍵で復号化(元に戻す)をするんだって。
有料ソフトのシリアルナンバーとか、CDキーとか言われるアレですね。

送信時に公開キーはサーバに送信され、秘密キーはユーザのローカル環境に保存されるそうです。
これもHTML5 からの新要素です。
(もとは、Netscape の独自要素でした。規格外だったのが HTML5 で復活したようです)

こんな ↓ かんじで、見た目は<select>要素みたいですね。

<keygen>要素は空要素で、終了タグはありません

使用する要素 <keygen>
<keygen>
一覧はこちら
name:<keygen>に固有の名前をつける
keytype:生成される鍵の種類(初期値はrsa)
challenge:公開鍵と一緒に送るチャレンジ文字列
disabled:使用不可の状態にする
autofocus:ロード後、自動的にフォーカスする
form:親の<form>のID名を呼び出して関連づける
グローバル属性

「keygen」は「key」と「generator」を組み合わせで、
generator(ジェネレーター)はこの場合は「生成プログラム」の意味ですね。
キーゲンって読むのかと思ったら「キージェネ」らしいです。
プログラマーなら既知のモノ、だそうです。
EXEファイルや JAVAアプレットで作ってたものだそうで。それが HTML の要素でできるようになったってことで、
プログラマーのかたにとっては画期的なことなんでしょうね…。

<keygen>要素は正直、W3Cの仕様を読んでも、
暗号化に関しての知識が無ければ、具体的な使い方はわからず
この要素をHTML上に書いてみると、確かに「公開キー」は生成・送信されます。
「秘密キー」のほうは、何らかのプログラムで生成させるもようです。
生成した鍵のペアを、どのように使うかもプログラマーの領域。私にはさっぱり。

というわけで今回は <keygen>要素に どんな決まり事があるか だけまとめます。
あしからず。

<keygen>要素の設置時の決まり事

●サンプル
下記のサンプルは、動作確認のために、このページに送信されるようになっています。
サンプルフォームに入力して送信ボタンを押し、ブラウザのアドレスバーを見てください。

このように、サイトのURLの直後に「?」で連結されてname=名前、その後「&」で連結されて、security= の後にダラダラ〜っと文字列が。この長〜い文字列が公開鍵です。

お名前:

暗号化:

<form>
<p>お名前: <input type="text" name="name"></p>
<p>暗号化: <keygen name="security"></p>
<input type="submit">
</form>

keytype属性はデフォルトが「rsa」で、今のところコレしか無く、書いても書かなくても同じ。

challenge属性で指定した文字列は「鍵とパッケージ化され送信」されるそうですが、具体的にどう送信されるのか不明…。ま、とにかくchallenge属性を指定したサンプルです↓

お名前:

暗号化:

<form>
<p>お名前: <input type="text" name="name"></p>
<p>暗号化: <keygen name="security" challenge="IA5STRING"></p>
<input type="submit">
</form>

暗号化レベルの選択肢は、プラウザによっていろいろ…(統一感無し)

これはいずれもMac上でのプレビューです。Winもこのようなかんじですね。Safari以外は。

「2048(高)」と「1024(中)」が全部に共通したレベルのようですが、
今のところ、ブラウザによってこれだけ選択肢が違うんですね〜。
いずれ統一されるのでしょう。たぶん。

<keygen>の属性一覧

name="部品の名前(任意のテキスト)"
name属性の値と公開鍵がセットで送信されるので、必ず名前を付けておこう。
<keygen name="security">
keytype="rsa"
公開鍵暗号方式の種類。今のところRSA暗号方式しか指定できないようです。
RSAは開発者3名(R.L.Rivest、A.Shamir、L.Adleman)の頭文字だって。
属性を省略するとデフォルト値になるので、今のところこの属性を書いても書かなくても「rsa」です。(今のところ書く必要ない属性ですな)
<keygen name="security" keytype="rsa">
challenge="チャレンジ文字列(任意のテキスト)"
公開鍵と一緒に送る「チャレンジ文字列」を指定します。
<keygen name="security" challenge="example">
disabled(または「disabled=""」「disabled="disabled"」 ) 
「使用不可」になります。暗号化レベルをセレクトできない状態です。
<keygen name="security" disabled>
●これ以降は、HTML5からの新しい属性です。
autofocus(または「autofocus=""」「autofocus="autofocus"」 )  new
HTML文書のロード後すぐに、この属性のある要素が自動的にフォーカスされます。
● autofocus属性は、1つのHTML文書に1つだけ。(そりゃそうだ!)
<keygen name="security" autofocus>
form="<form>要素のID"  new
form属性で<form>要素につけたIDを呼び出して関連づけます。
これによって<button>要素が<form>要素の外に出ていても機能します。
<form method="post" action="sample.cgi" id="ex1">
<p>お名前:<input type="text" name="name"></p>
</form>
<keygen name="security" form="ex1">

「form属性」については、
「[47] form要素でデータ送信可能なフォームである事を示そう」の「HTML5からの変更点」もご覧ください。

このほかグローバル属性も使います
当然ながら、id, class, title, style などのグローバル属性も使えます。
グローバル属性については、「[39] 全要素に使える「HTML5グローバル属性」を見てみよう」をご覧ください。

次回予告

う〜ん。<keygen>要素も <progress>と同様、デザイナーには実際に駆使する事は無さそう。

さて、フォーム関連の要素は、今回でひととおり終わりです。長かったっすね。
最後の <progress> <keygen> は何だか未消化でしたが。(消化できたらまた更新します)

で、次回は、フォームに関する「属性」について、
どの属性がどの要素に使えるか を、一覧表にします。
HTML5からの新しいものも含めて、フォームに関しては、とにかく大量に属性があります。
これらはフォームを作る上でとても便利で重要。シッカリ把握しておきたいので、まとめます。

関連記事
この記事をはてなブックマークに追加

やる気を保つためにランキングに参加しています。
応援してくださると すっごいやる気を出します! (笑)

初心者にも使いやすい(と思う)レンタルサーバー

最近よく「レンタルサーバーはどこがいい?」とご質問が来ます。
自分でも使っていてオススメなのはミニバード。管理画面がわかりやすくていい感じす。
仕事で使ってるロリポップもわかりやすい管理画面で、初めてでもすんなり使えると思います。
両方とも、なんといっても料金が安いです。初めてだとなるべく安いほうがイイですからね。

それよりちょっと料金は高いけど、高スペックでコスパが良く、信頼性も高いサーバといえば、やはりさくらのレンタルサーバと、XSERVER(エックスサーバー)だと思う。この2つは老舗でユーザーも多いので、質問する場がたくさんあり、初心者の方でもイケるだろうと思います。

レンタルサーバーは、たくさんあり過ぎて迷いますよね。近いうちに、初心者にも良さげなサーバーについて記事にまとめます。*記事をアップしたらココにもリンクを貼ります。

スポンサーリンク

コメントの投稿

スポンサーリンク
最新記事
Category
オススメの本
Links
Calendar
07 | 2017/08 | 09
- - 1 2 3 4 5
6 7 8 9 10 11 12
13 14 15 16 17 18 19
20 21 22 23 24 25 26
27 28 29 30 31 - -
Archive
RSS Link
Profile

yuki★hata

Author : yuki★hata
せめて月1回の更新をめざします~。

メールフォームはこちら

スポンサーリンク
スポンサーリンク
Copyright © ほんっとにはじめてのHTML5とCSS3 All Rights Reserved.