HTMLの新要素、permission要素がトライアル開始 — タグ一つでユーザー許可フローが完結、CSSでのカスタマイズも可能

6月16日、Chrome for Developers Blogで「An origin trial for a new HTML <permission> element」と題した記事が公開された。この記事では、ウェブアプリが強力な機能を利用する際の許可リクエストを宣言的に行う新しいHTML要素「<permission>」について詳しく紹介されている。以下に、その内容を紹介する。

背景──許可リクエストはなぜ面倒なのか

現在主流の 命令的（imperative）アプローチ には、以下の二つがある。

**暗黙的要求（implicit on first use）** 　例：navigator.geolocation.getCurrentPosition() や navigator.mediaDevices.getUserMedia() を初めて呼び出した瞬間にプロンプトが表示される。
**明示的要求（explicit request up front）** 　例：Notification.requestPermission() や DeviceMotionEvent.requestPermission() でユーザーに事前承認を求める。

これらの方法は柔軟だが、許可プロンプトのスパム化、ユーザー操作とプロンプト表示の関連性判定が難しい、そして 一度拒否したあとの復帰が煩雑 など、多くの課題を抱える。
ブラウザ各社はユーザー操作（クリックなど）の必須化やプロンプトの非モーダル化などで緩和を試みているが、根本的な解決には至っていない。

ロード直後に表示されるマイク許可プロンプト

宣言的アプローチ──新要素 <permission>

Chrome 126 から Origin Trial として導入された <permission> 要素 は、許可を「宣言的（declarative）」に取得する仕組みだ。最小構成は以下のとおりで、HTML要素を配置するだけで、許可フローをブラウザが管理してくれる。

<!-- カメラとマイクの同時許可を宣言 -->
<permission type="camera microphone"></permission>

permission要素の主な属性:

type 　要求する権限を半角スペース区切りで列挙する。現時点で 'camera'、'microphone'、'camera microphone' をサポートしている。
type-ext 　追加パラメータ付き権限（例：precise:true 付きの位置情報）を指定できる。
lang 　ボタンラベルのロケールを明示する。Origin Trial 期間中はブラウザ言語が優先され、lang 属性は無効。

permission要素によるユーザーフロー

<permission> 要素は、状態に応じて次のいずれかのプロンプトをユーザーに対して表示する。

まだ許可していない場合：　「毎回許可」または「今回のみ許可」を選択できる。
すでに許可している場合：　「許可を継続」または「許可を停止」を選択できる。
過去に拒否した場合：　「これからも許可しない」または「今回のみ許可」を選択できる。

プロンプト結果に応じて要素のテキストも自動更新されるため、開発者が状態管理を行う必要はない。

制限付きカスタマイズ──CSS design ガイドライン

<permission> 要素によって表示されるダイアログは、CSSを使ってカスタマイズすることも可能だが、誤認防止のためにスタイルが厳格に制限される。主要プロパティのルールは以下のとおり。

プロパティ	ルール
color / background-color	コントラスト比 3 以上。透過不可。
font-size / zoom	small〜xxxlarge 相当のみ許容。
margin / outline-offset	負値は 0 に補正。
font-weight	200 未満は 200 に補正。
display	`inline-block` か `none` のみ。
transform	2D 平行移動と等倍スケールのみ許容。

そのほか多くの CSS プロパティ（border、flex-* など）は通常どおり使用できる。

また、以下の擬似クラスが利用可能で、UIの状態に応じた柔軟なスタイルを適用可能だ。

:granted — 許可が付与された状態。
:invalid — 要素が無効（クロスオリジン iframe 内など）になった状態。*Origin Trial 中は未実装*

JavaScript イベント

<permission> は Permissions API と組み合わせて使う。監視可能なイベントは次の三つだ。

onpromptdismiss（試験中は ondismiss）— プロンプトが閉じられた。
onpromptaction（試験中は onresolve）— ユーザーが何らかのアクションを取った。
onvalidationstatuschange — 要素が valid から invalid に遷移。*Origin Trial 中は発火しない*

const p = document.querySelector('permission[type="camera"]');
p.addEventListener('onpromptaction', e => {
  console.log('ユーザー操作:', e.detail);
});

フォールバックと導入手順

未対応ブラウザでは <permission> は描画されず無害にスキップされる。
その場合は従来のボタン + Permissions API で代替可能。
サイト全体で実験するには Origin Trial への登録が必要。Chrome 126〜131（2025年2月19日まで）に有効だ。

デモページ（permission.site）や GitHub リポジトリで実際に挙動を確認できる。

まとめ

<permission> 要素は、従来の命令的APIに代わる 宣言的・文脈的・元に戻しやすい 許可フローを提供することで、ユーザー体験とセキュリティの双方を改善する試みである。Origin Trial 期間中に寄せられるフィードバック次第で、標準化に向けた議論が進む見込みだ。

詳細は[An origin trial for a new HTML element」を参照していただきたい。