ページの作成
親となるページを選択してください。
親ページに紐づくページを子ページといいます。
例: 親=スポーツ, 子1=サッカー, 子2=野球
子ページを親ページとして更に子ページを作成することも可能です。
例: 親=サッカー, 子=サッカーのルール
親ページはいつでも変更することが可能なのでとりあえず作ってみましょう!
| この記事の要点 |
|
要素とは
HTML4.01 〜 HTML5 初期に存在した、クライアントブラウザで公開鍵 / 秘密鍵ペアを生成し、公開鍵をサーバへ送信するためのフォーム要素です。SSL/TLS クライアント証明書の発行や PKI 環境の構築に使われていました。
送信時の挙動:
- ブラウザがクライアント側で鍵ペアを生成 (RSA 2048bit など)
- 秘密鍵をローカルの鍵ストアに保存
- 公開鍵 + チャレンジを SPKAC (Signed Public Key And Challenge) 形式でエンコード
- SPKAC を Base64 化してサーバへ送信
- サーバが PKCS#10 として処理して証明書 (X.509) を発行
廃止の経緯
| 時期 | 出来事 |
|---|---|
| 1995 〜 | Netscape Navigator が独自仕様として実装 |
| 2014 | HTML5 (W3C) に標準として収録 |
| 2016 | Chrome 49 で削除 (Blink チームによる廃止判断) |
| 2017 | HTML 5.2 でdeprecated マーキング |
| 2017 | Firefox 51〜69 で段階的削除 |
| 2019 | HTML 5.3 で完全削除 |
| 2020 以降 | Safari / Edge も非対応 |
廃止理由 (Chrome の開発者コメント)
- UI が古くブラウザごとに挙動が異なる (鍵長選択 UI が無い等)
- 仕様が過去 30 年ほぼ更新されていない (古い MD5/SHA-1 ベース)
- セキュリティ的にSPKAC は安全性が低い — 現代の TLS スタックには不適
- 実利用が極めて少ない — 統計で 0.001% 未満
- 同じ機能がWeb Crypto API でより柔軟に実現可能
代替手段 1: WebAuthn (FIDO2)
パスワードレス認証の標準。ブラウザがハードウェア (Yubikey / Touch ID / Windows Hello) や Passkey と連携し、公開鍵ベースで認証します。
// 登録 (公開鍵生成 + サーバへ送信)
const credential = await navigator.credentials.create({
publicKey: {
challenge: new Uint8Array(32), // サーバから受け取ったランダム値
rp: { name: "Example", id: "example.com" },
user: {
id: new TextEncoder().encode("user-123"),
name: "alice@example.com",
displayName: "Alice"
},
pubKeyCredParams: [
{ type: "public-key", alg: -7 }, // ES256
{ type: "public-key", alg: -257 }, // RS256
],
authenticatorSelection: {
authenticatorAttachment: "platform", // platform | cross-platform
userVerification: "required"
},
timeout: 60000,
attestation: "direct"
}
});
// credential.response.attestationObject をサーバへ送信
// サーバ側で検証してユーザーに公開鍵を紐付ける
// ログイン
const assertion = await navigator.credentials.get({
publicKey: {
challenge: new Uint8Array(32),
allowCredentials: [{
type: "public-key",
id: storedCredentialId
}],
userVerification: "required"
}
});
主要ブラウザはすべて対応済 (Chrome / Firefox / Safari / Edge)。2024 年以降は Passkey として OS 標準機能に統合されています。
代替手段 2: Web Crypto API (SubtleCrypto)
JavaScript から直接鍵を生成 / 署名 / 暗号化できる W3C 標準 API。 相当の処理は SubtleCrypto で自前実装できます。
// RSA 鍵ペア生成
const keyPair = await crypto.subtle.generateKey(
{
name: "RSASSA-PKCS1-v1_5",
modulusLength: 2048,
publicExponent: new Uint8Array([1, 0, 1]),
hash: "SHA-256",
},
true, // extractable (export 可)
["sign", "verify"]
);
// 公開鍵を SPKI 形式でエクスポート
const publicKeyDer = await crypto.subtle.exportKey("spki", keyPair.publicKey);
const publicKeyBase64 = btoa(String.fromCharCode(...new Uint8Array(publicKeyDer)));
// サーバへ送信
await fetch("/api/register-key", {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({ public_key: publicKeyBase64 })
});
// 秘密鍵で署名
const signature = await crypto.subtle.sign(
"RSASSA-PKCS1-v1_5",
keyPair.privateKey,
new TextEncoder().encode("メッセージ")
);
// 秘密鍵は IndexedDB に extractable=false で保存するのが安全
代替手段 3: サーバ側 CSR 生成 + クライアント証明書配布
多くのエンタープライズ環境では、もう ではなく以下の方式が一般的:
- サーバ側で CSR と鍵を生成 → PKCS#12 (.p12) ファイルで配布 → ユーザーがブラウザ / OS にインポート
- SCEP / EST / ACME などプロトコルベースの自動配布 (社内 PKI)
- MDM (Mobile Device Management) からプッシュ配布 (iOS / Android の社用端末)
# OpenSSL でクライアント鍵 + CSR 生成 (端末側)
openssl genrsa -out client.key 2048
openssl req -new -key client.key -out client.csr \
-subj "/C=JP/CN=alice@example.com"
# サーバ管理者が CA で署名 → client.crt が返ってくる
openssl x509 -req -in client.csr -CA ca.crt -CAkey ca.key \
-CAcreateserial -out client.crt -days 365 -sha256
# PKCS#12 にまとめる (ブラウザにインポート可能な形式)
openssl pkcs12 -export -inkey client.key -in client.crt \
-out client.p12 -name "Alice"
# ブラウザに p12 をインポート (Chrome の場合)
# 設定 → プライバシーとセキュリティ → 証明書の管理 → インポート
歴史的経緯: PKI と SSL クライアント証明書
は 1995 年に Netscape が独自実装し、その後 W3C / WHATWG に標準化されました。ブラウザでクライアント証明書を発行する PKI ワークフローを目的としたものですが、UI 統一困難・低利用率・セキュリティ要件のミスマッチから廃止されました。現代では:
- 個人認証 → WebAuthn / Passkey
- API 認証 → OAuth2 / JWT / mTLS
- ファイル暗号 / 署名 → Web Crypto API
- クライアント証明書配布 → MDM / SCEP / EST
FAQ
Q: 既存システムが に依存している
A: 既存ブラウザでは動かないため、Web Crypto API + 自前 SPKAC エミュレーション、または WebAuthn への移行が必要です。古い IE11 や Firefox ESR の極一部にのみ残っている場合があります。
Q: Safari は最後まで動いていた?
A: macOS Safari は比較的長く残しましたが、macOS Big Sur / iOS 14 以降で削除されています。
Q: WebAuthn と Passkey の関係は?
A: WebAuthn が下位プロトコル仕様、Passkey は WebAuthn を OS / iCloud / Google アカウント間で同期する具体的なユーザー体験です。
ページの作成
親となるページを選択してください。
親ページに紐づくページを子ページといいます。
例: 親=スポーツ, 子1=サッカー, 子2=野球
子ページを親ページとして更に子ページを作成することも可能です。
例: 親=サッカー, 子=サッカーのルール
親ページはいつでも変更することが可能なのでとりあえず作ってみましょう!
子ページはありません
人気ページ
- 1 Eclipseで「サーバーに追加または除去できるリソースがありません。」の原因と対処法
- 2 tomcat の起動 / 停止ログと catalina.log・catalina.out の違い
- 3 JavaScript base URL 取得方法|window.location.origin と SSR/Node.js 対応
- 4 YouTube Data API v3 エラー一覧|403/400/404 の主要原因と切り分け
- 5 Spring Frameworkのアノテーション一覧
- 6 Laravel エラー一覧|500/Blade/DB 接続/ルーティングの代表エラー
- 7 3Dグラフィックスとは|モデリング/レンダリング/主要ソフトウェア (Blender / Maya)
- 8 【Spring】@Valueアノテーションとは
- 9 CATALINA_HOME の確認方法 (Linux / Mac)
- 10 【Spring】@Autowiredアノテーションとは
最近更新/作成されたページ
- HTML q要素(インライン引用 / blockquote との違い / cite属性の使い方) 2026-06-11 05:44:46
- SQL 制約(NOT NULL / UNIQUE / PRIMARY KEY / FOREIGN KEY / CHECK / DEFAULT 完全ガイド) 2026-06-11 05:44:46
- Mac Safari でユーザーエージェントを切り替える方法(開発メニュー / Chrome や IE のフリ) 2026-06-11 05:44:46
- Laravel ルート一覧確認|php artisan route:list の使い方・フィルタオプション・JSON 出力・キャッシュ 2026-06-11 05:44:46
- Java static変数(クラス変数 / インスタンス変数との違い / 使い所と落とし穴) 2026-06-11 05:44:46
- HTML bdo要素(双方向テキストの方向を強制 / dir 属性の使い方 / bdi との違い) 2026-06-11 05:44:46
- Webスクレイピングとは|Python で始めるサンプルコード・robots.txt・利用規約・法的注意点まとめ 2026-06-11 05:44:46
- Canvas API 図形描画|四角形 fillRect / 円 arc / 線 lineTo / 多角形 と塗りつぶし・輪郭の使い分け 2026-06-11 05:44:46
- jQuery 値の取得|.text() / .html() / .val() / .attr() / .data() の違いと使い分け 2026-06-11 05:44:46
- UE5 ThirdPersonテンプレート キャラクターを歩かせる方法(Max Walk Speed / Shift で走る切替) 2026-06-11 05:44:46
- HTML figure要素(figcaption と一緒に図表・画像・コードを意味付け) 2026-06-11 05:44:46
- SQL DELETE 文 完全ガイド|WHERE 句必須、ROLLBACK、TRUNCATE との違い、Oracle/MySQL/PostgreSQL の違い 2026-06-11 05:44:46
- jQuery クリックイベント完全ガイド|.click() と .on("click") の違い・イベント委譲・ダブルクリック対策 2026-06-11 05:44:46
- jQuery .ready()(DOM 構築完了で実行 / 4 つの書き方 / 現代の代替) 2026-06-11 05:44:46
- Java Calendar.getInstance() 使い方|タイムゾーン/ロケール指定・年月日曜日の取得・LocalDate との比較 2026-06-11 05:44:46
コメントを削除してもよろしいでしょうか?