パスワード欄のtype属性とは？type=passwordにすべき理由・診断基準・修正方法

パスワード欄のtype属性とは

パスワード欄のtype属性とは、ログイン画面や職員・事業者向けの申請システムでパスワードを入力する <input> 要素の type の値のことです。パスワード欄は必ず type="password" にします。

<input type="password" name="password" autocomplete="current-password">

type="text" のままだと、入力したパスワードが画面にそのまま表示され、窓口端末や庁舎ロビーの共用端末、オンライン会議の画面共有、背後からののぞき見（ショルダーハッキング）で漏れます。さらに、ブラウザがその欄をパスワード欄として認識しないため、パスワードマネージャーによる保存・自動入力・強いパスワードの生成が働かず、使い回しや短いパスワードを誘発します。この診断項目は、HTML上のパスワード欄が type="password" になっているかを確認します。

type=password の役割

MDN は <input type="password"> を「入力されたテキストを * や • などの記号で置き換えて読めなくする」入力欄と説明しています。重要なのは、これは表示上のマスクにすぎず、送信される値は平文だという点です。

MDN も、パスワードを扱うフォームは HTTPS で配信すべきであり、多くのブラウザは安全でないログインフォームに警告を出すと注意しています。つまり type=password は「画面からの漏えい」と「ブラウザに欄の意味を伝える」ための対策であり、通信の暗号化とは別に必要です。送信先の暗号化は「フォーム送信先がHTTPS」の項目で確認します。

なぜパスワード欄はtype=passwordでなければならないのか

OWASP ASVS 5.0.0 の要件（6.2.6）

ASVS 5.0.0 6.2.6（レベル1）は「パスワード入力欄は type=password を使って入力をマスクすること。ただし利用者が一時的にパスワード全体、または最後に入力した1文字を表示できるようにしてもよい」と定めています。

表示切替ボタン（目のアイコン）は許容されており、ボタン押下時に JavaScript で一時的に type="text" に切り替え、離したら戻す実装は要件に反しません。レベル1の要件なので、ログイン機能を持つすべてのシステムが満たすべき基本事項です。マスクされていないパスワード欄は CWE-549（Missing Password Field Masking）として分類されています。

パスワードマネージャーとの関係

ブラウザやパスワードマネージャーは、主に type="password" と autocomplete="current-password" / "new-password" を手がかりにログインフォームを認識します。ASVS 6.2.7 は貼り付けやパスワードマネージャーの利用を許可することを求めており、type=password はその前提になります。

autocomplete の値の適切さは「パスワードマネージャーに適したautocomplete」、貼り付けの可否は「パスワード欄への貼り付けを許可」の各項目で別に確認します。

パスワード欄のtype属性についてよくある誤解

• 「CSS や JavaScript で文字を伏せ字にしているから大丈夫」：-webkit-text-security などの独自CSSや、入力値を別変数に退避して ● を表示する自作実装は、ブラウザがパスワード欄と認識しないため、自動保存の対象外になったり、入力履歴（オートコンプリート候補）に平文で残ったりする場合があります。標準の type=password を使うのが確実です。
• 「暗証番号（数字4桁）は type=number でよい」：暗証番号も秘密情報です。数字キーボードを出したい場合は type="password" inputmode="numeric" を使えます。
• 「type=password なら暗号化される」：上述のとおり送信時は平文です。HTTPS が別途必要です。

パスワード欄のtype属性の診断基準（セキュリティAIチェッカー）

取得対象と方法

• 診断対象URLの最終到達ページ（トップページ）のHTML本文（最大2MB）を解析します。JavaScript 実行後に生成されるフォームは対象外です。
• すべての <input> タグを抽出し、次のいずれかに当てはまるものを「パスワード欄」とみなします。
  1. type="password"（引用符なし type=password を含む）
  2. type が hidden / submit / button / reset / image / checkbox / radio / file / email / url / search / date / color / range 以外で、name または id に password・passwd・pwd を含む
  3. 上記の除外タイプ以外で、autocomplete に current-password または new-password を含む
• 「パスワード欄」のうち type=password でないものを「不適切な可能性」として数えます。

passport（旅券）や passcode のような語、type="hidden" のパスワード再設定トークンなどは、パスワード欄として扱いません。

判定条件

• 重み5は本診断の最大重みで、1件の fail が総合スコアに大きく影響します。
• 根拠欄には「不適切な可能性: 不適切件数/パスワード欄件数」が表示されます。
• この項目に「△ 要確認（warn）」はありません。

自治体サイトでの判定例

多くの自治体公式サイトのトップページにはログイン欄がないため、対象外になるのが通常です。職員ログインや電子申請のログイン画面を診断したい場合は、そのURLを直接診断してください。

診断の限界

• 名前に password を含むが実際にはパスワードではない欄（例：name="password_hint" の type=text）は fail と判定されることがあります。根拠欄の件数と該当HTMLを目視で確認してください。
• 逆に、name="secret" のように手がかりのない名前の type=text 欄は検出できません。
• SPA などで JavaScript がフォームを描画する場合は、HTML に現れないため対象外になります。

パスワード欄がtype=textだとどんなリスクがあるか

• のぞき見・画面共有による漏えい：窓口の職員端末、図書館や公民館の共用PC、Web会議の画面共有、操作説明用の録画・スクリーンショットにパスワードが写ります。
• 入力履歴への平文保存：type=text の欄はブラウザのフォーム入力履歴（オートフィル候補）として保存されることがあり、共用端末で次の利用者に候補として表示されるおそれがあります。
• 弱いパスワードの誘発：パスワードマネージャーが働かないため、利用者は覚えやすい短いパスワードや使い回しを選びがちになり、パスワードリスト攻撃の成功率を高めます。
• 監査・診断での指摘：CWE-549 として脆弱性診断ツールで一般的に検出される項目であり、外部の診断報告書でも指摘されやすい事項です。

特に自治体では、公民館や図書館の利用者用端末、窓口での操作補助、研修での画面投影など、パスワード入力を他人に見られうる場面が多くあります。type=password は最も手軽で効果の大きい対策です。

パスワード欄のtype属性の修正方法（HTML・React・PHP・WordPress）

1. HTML を修正する

<label for="login-password">パスワード</label>
<input id="login-password" name="password" type="password"
       autocomplete="current-password" required>

新規登録・パスワード変更画面では autocomplete="new-password" を使います。

2. 表示切替を付ける場合（ASVS 6.2.6 で許容）

<input id="pw" type="password" autocomplete="current-password">
<button type="button" id="pw-toggle" aria-controls="pw" aria-pressed="false">表示</button>
<script>
  const pw = document.getElementById("pw");
  const btn = document.getElementById("pw-toggle");
  btn.addEventListener("click", () => {
    const show = pw.type === "password";
    pw.type = show ? "text" : "password";
    btn.setAttribute("aria-pressed", String(show));
    btn.textContent = show ? "隠す" : "表示";
  });
  // 送信直前に必ずマスク状態へ戻す
  pw.form?.addEventListener("submit", () => { pw.type = "password"; });
</script>

切替ボタンは type="button" にしてフォームを誤送信しないようにし、送信直前には必ずマスク状態へ戻します。

3. フレームワーク・CMS 別の確認箇所

• React / Next.js：<input type="password" autoComplete="current-password" /> と書きます。UI ライブラリの TextField コンポーネントでも type="password" を渡しているか確認します。
• PHP テンプレート：ログイン・パスワード変更・管理画面の各テンプレートを洗い出し、type 属性を確認します（コマンド例は下記）。
• WordPress：標準ログイン画面（wp-login.php）は type=password です。独自のログインフォームプラグインやテーマが出力するフォームを確認します。
• 電子申請・施設予約などの外部委託システム：自治体側で修正できないため、仕様書・保守契約の中で「ASVS 6.2.6 準拠」を要求事項として明記し、ベンダーに是正を依頼します。

grep -rn "name=\"[^\"]*pass" --include=*.php --include=*.htm*

4. 設定後の確認方法

curl -s https://www.city.example.lg.jp/login/ | grep -ioE '<input[^>]*(password|passwd|pwd)[^>]*>'

ブラウザの開発者ツールで該当要素を選択し、type="password" になっているか、パスワードマネージャーが保存を提案するかを確認します。ログイン画面のURLをセキュリティAIチェッカーで直接診断し、根拠欄の不適切件数が0になっていることも確かめてください。

サイトを壊さないための注意点

• type を変えると、input[type=text] を前提にしたCSSが当たらなくなり見た目が崩れることがあります。input[type=password] にも同じスタイルを適用してください。
• 入力値を JavaScript で読み取る処理（入力チェック等）は type に依存しないのが通常ですが、セレクターに [type=text] を使っていないか確認します。
• autocomplete="off" を付けてもモダンブラウザはパスワード欄の保存提案を行うことが多く、むしろパスワードマネージャーの利用を妨げる設定は ASVS 6.2.7 の趣旨に反します。
• maxlength を小さく設定しないでください（ASVS 6.2.9 は64文字以上の許容を求めています）。これは「64文字以上のパスワードをHTMLで妨げない」の項目で確認します。

よくある質問（FAQ）

参考資料

• OWASP ASVS 5.0.0 V6 Authentication
• MDN <input type="password">
• MDN <form> 要素
• CWE-549: Missing Password Field Masking

「パスワード欄のtype属性」と関連する診断項目

• フォーム送信先がHTTPScritical
• パスワードマネージャーに適したautocompletelow
• パスワード欄への貼り付けを許可medium
• 64文字以上のパスワードをHTMLで妨げないmedium
• POSTフォームのCSRF対策兆候high
• パスワードをPOSTで送信critical
• 認証情報の送信先をHTTPS・同一オリジンへ限定critical
• 機密情報をURL・GETフォームへ含めないcritical