新しい HTML 要素のオリジン トライアル

Thomas Steiner

使用許可を求めるための命令的な方法は多数ある ウェブアプリでの位置情報へのアクセスなどの 強力な機能が必要ですこれらのメソッドには、 そこで Chrome の権限チームは、さまざまな課題の解決を 新しい宣言型の方法である、専用の HTML <permission> 要素に置き換えます。この 要素は Chrome 126 のオリジン トライアル段階にあり、最終的には 標準化します。

権限をリクエストするための命令型メソッド

ウェブアプリが 強力な機能がある一方で、 許可を求める必要があります。たとえば Google マップでは、 Geolocation API、 ブラウザはユーザーにプロンプトを表示し、多くの場合、その判断内容を保存するオプションが用意されています。 これは をご覧ください。

事前リクエストではなく、初回使用時に暗示的に求める

Geolocation API は強力な API であり、 説明します。たとえば、アプリが navigator.geolocation.getCurrentPosition() メソッドでは、最初の呼び出し時に権限プロンプトが自動的にポップアップ表示されます。 もう一つの例は、 navigator.mediaDevices.getUserMedia()。

たとえば、 Notification API または Device Orientation and Motion API、 一般に、次のような静的なメソッドを使用して明示的に権限をリクエストします。 Notification.requestPermission() または DeviceMotionEvent.requestPermission()。

権限を求めるための命令型の方法に関する課題

権限スパム

これまでウェブサイトでは navigator.mediaDevices.getUserMedia() または Notification.requestPermission()、 同時にnavigator.geolocation.getCurrentPosition()でも、ウェブサイトが が読み込まれました。ユーザーが操作を行う前に権限プロンプトがポップアップ表示される 表示されます。これは権限スパムと呼ばれることがあり、どちらにも影響します。 明示的に要求するだけでなく、最初の使用時に暗黙的に要求する できます。

ブラウザでのリスク軽減策とユーザー操作の要件

権限スパムにより、ブラウザ ベンダーはボタンなどのユーザー操作を要求 クリックや keydown イベントを認識してから権限プロンプトを表示します。この この方法により、ブラウザでユーザーが認識しきれないほどの 特定のユーザー操作によって権限プロンプトが 表示されます。ユーザーは不満でページをクリックしただけである可能性がある ページの読み込みに時間がかかったか [Find me] ボタンをクリックします。また、一部のウェブサイトは、 ユーザーをだましてコンテンツをクリックさせながらプロンプトを表示する。

もう一つの軽減策として、Google Chat のメッセージを完全にブロックする プロンプトを非モーダル プロンプトで表示したり、 おすすめします。

権限のコンテキスト化

もう一つの課題は、特に大画面では、権限プロンプトに スペースの上部には、 アプリが描画できるブラウザ ウィンドウの領域の外側にあります。です。 ブラウザ上部のプロンプトを見逃すことが ウィンドウの下の方にあるボタンをクリックしたときに ウィンドウが自動的に閉じますこの問題 ブラウザのスパム対策を講じていると、しばしば悪化します。

簡単に元に戻せない

最後に、ユーザーが行き止まりになりがちです。対象 たとえば、ユーザーが機能へのアクセスをブロックした場合、 [サイト情報] プルダウンを使用して、 ブロックされた権限をオンに戻すことができます。最悪の場合はどちらのオプションも 更新した設定が有効になるまで、ページを完全に再読み込みする必要があります。 サイトの構成を変更するための簡単なショートカットをサイトに用意していない ユーザーに説明し、 次の Google マップの下部に表示される設定を変更してください。 スクリーンショット。

権限がエクスペリエンスにとって重要な場合（たとえば、マイクへのアクセスが Google Meet などのアプリでは煩わしいダイアログが表示される ブロックを解除する方法を指示します。

宣言型の <permission> 要素

この投稿でご紹介した課題に対処するため、Chrome 権限チームは は、新しい HTML 要素 <permission> のオリジン トライアルを開始しました。この 要素を使用すると、デベロッパーは、現時点では、 ウェブサイトで利用できる優れた機能の一部にすぎません。最もシンプルな形式では、 それを次の例のように使用します。

<permission type="camera" />

現在も議論が進んでいる <permission> を void にするか あります。void 要素は HTML 内の自己終了要素であり、 子ノードがあるためです。HTML では、終了タグはありません。

type 属性

「 type 属性に、リクエストする権限をスペース区切りのリストで指定します。ちなみに このドキュメントの作成時点では、指定できる値は 'camera'、'microphone'、 camera microphone（スペースで区切ります）。この要素はデフォルトでレンダリングされます。 基本的なユーザー エージェント スタイル設定のボタンに類似しています。

type-ext 属性

追加のパラメータを許可する一部の権限では、 type-ext 属性は、スペースで区切られた Key-Value ペアを受け入れます。たとえば、 precise:true: 位置情報の利用許可。

lang 属性

ボタンのテキストはブラウザによって提供されるもので、一貫性を持たせるため、 直接カスタマイズできません。ブラウザでテキストの言語が変更されます ドキュメントの継承された言語または親要素チェーンに基づく オプション lang 属性です。つまり、デベロッパーは <permission> をローカライズする必要がありません。 渡されます。<permission> 要素がオリジンを超えて続く場合 トライアルのステージでは、権限のタイプごとに複数の文字列やアイコンがサポートされている場合があります。 柔軟性を高めるためです<permission> の使用に関心がある場合 特定の文字列またはアイコンが必要な場合は、お問い合わせください。

動作

ユーザーが <permission> 要素を操作すると、 多岐にわたります。

• これまで許可していなかった機能については、アクセスのたびに許可するか、 現在の訪問では引き続き許可します。

  

• 以前にこの機能を許可していた場合は、引き続き許可するか、許可を取り消すことができます。 できます。

  

• 以前無効にしていた機能については、引き続き許可しない場合があります。 今度は許可します。

  

<permission> 要素のテキストは、指定した値に基づいて自動的に更新されます。 ステータスです。たとえば、機能の使用が許可されている場合、 機能が許可されていることを示します。最初に権限を付与する必要がある場合は、 テキストが変更され、ユーザーがこの機能を使用するように招待されます。前のバージョンと 次のスクリーンショットのスクリーンショットでは、2 つの状態を確認できます。

CSS デザイン

ユーザーがボタンをサーフェスとして簡単に認識できるようにして、 <permission> 要素のスタイル設定は制限されています。スタイル設定が ユースケースに合わない場合は、ぜひお聞かせください なぜ、どのように！すべてのスタイル ニーズに対応できるわけではありませんが、Google は より後に、<permission> 要素のスタイル設定を安全に行えるようにする オリジン トライアル次の表に、制限があるプロパティの一部を示します。 特別なルールが適用されます。いずれかのルールに違反した場合、 <permission> 要素は無効になり、操作できなくなります。制限なし 使用しようとすると例外が発生します。この例外は、API 呼び出しで 使用できます。エラー メッセージには、検出されたエラーの詳細が なります。

以下の CSS プロパティは通常どおり使用できます。

• font-kerning
• font-optical-sizing
• font-stretch
• font-synthesis-weight
• font-synthesis-style
• font-synthesis-small-caps
• font-feature-settings
• forced-color-adjust
• text-rendering
• align-self
• anchor-name aspect-ratio
• border（およびすべての border-* プロパティ）
• clear
• color-scheme
• contain
• contain-intrinsic-width
• contain-intrinsic-height
• container-name
• container-type
• counter-*
• flex-*
• float
• height
• isolation
• justify-self
• left
• order
• orphans
• outline-*（前述の outline-offset の例外を除く）
• overflow-anchor
• overscroll-behavior-*
• page
• position
• position-anchor
• content-visibility
• right
• scroll-margin-*
• scroll-padding-*
• text-spacing-trim
• top
• visibility
• x
• y
• ruby-position
• user-select
• width
• will-change
• z-index

さらに、論理的に同等のすべてのプロパティを使用できます（例: inline-size は width と同等です）、 相当します。

疑似クラス

<permission> のスタイルを設定できる 2 つの特別な疑似クラスがあります。 要素を定義します。

• :granted: :granted 疑似クラスは、 権限が付与されました。
• :invalid: :invalid 疑似クラスを使用すると、 すべての要素が無効な状態になっています。たとえば、 クロスオリジン iframe

permission {
  background-color: green;
}

permission:granted {
  background-color: light-green;
}

/* Not supported during the origin trial. */
permission:invalid {
  background-color: gray;
}

JavaScript イベント

<permission> 要素は、 Permissions API。 リッスンできるイベントはいくつかあります。

• onpromptdismiss: このイベントは、権限プロンプトがトリガーされたときに発生します。 ユーザーが閉じた要素（閉じるボタンのクリックなど） プロンプトの外側をクリックするなど）。

• onpromptaction: このイベントは、権限プロンプトがトリガーされたときに発生します。 ユーザーがプロンプトでなんらかの操作を行うことで、要素が解決されました できます。これは必ずしも権限の状態が変化したことを 意味するわけではなく そのユーザーは、現状維持のアクション（ 許可し続けます）。

• onvalidationstatuschange: このイベントは、要素が "valid" から "invalid" に変更します。次の場合、要素は "valid" とみなされます。 ユーザーがクリックした場合、ブラウザはシグナルの完全性を信頼します。 それ以外の場合は "invalid"。たとえば、要素が 読み込みます。

これらのイベントのイベント リスナーを HTML にインラインで直接登録できます。 コード (<permission type="…" onpromptdismiss="alert('The prompt was dismissed');" />), または、<permission> 要素で addEventListener() を使用します。 見てみましょう。

<permission type="camera" />
<script>
  const permission = document.querySelector('permission');
  permission.addEventListener('promptdismiss', showCameraWarning);

  function showCameraWarning() {
    // Show warning that the app isn't fully usable
    // unless the camera permission is granted.
  }

  const permissionStatus = await navigator.permissions.query({name: "camera"});
  
  permissionStatus.addEventListener('change', () => {
    // Run the check when the status changes.
    if (permissionStatus.state === "granted") {
      useCamera();
    }
  });

  // Run the initial check.
  if (permissionStatus.state === "granted") {
    useCamera();
  }
</script>

機能検出

ブラウザが HTML 要素をサポートしていない場合、要素は表示されません。つまり HTML コードに <permission> 要素がある場合、 ブラウザは認識できません。JavaScript を使用してサポートを検出することが必要になる場合もあります。 たとえば、ユーザーがクリックすることでトリガーされる権限プロンプトを 通常の <button>。

if ('HTMLPermissionElement' in window) {
  // The `<permission>` element is supported.
}

オリジン トライアル

サイトの <permission> 要素を実際のユーザーで試すには: オリジン トライアルに登録します。 オリジン トライアルのスタートガイド オリジン トライアルを使用するためのサイトを準備する方法をご覧ください。オリジン トライアル が Chrome 126 ～ 131（2025 年 2 月 19 日）に実施されます。

デモ

デモと GitHub のソースコードをご確認ください。以下は、対応ブラウザでのエクスペリエンスのスクリーンショットです。

フィードバック

ご自身のユースケースで <permission> がどのように役立つか、ぜひお聞かせください。共感 自由回答形式の質問に リポジトリの問題、または新しい 1 です。リポジトリ内のパブリック シグナル <permission> 要素を使用すると、あなたが関心を持っていることを Google や他のブラウザに知らせることができます できます。

よくある質問

• 権限を組み合わせた通常の <button> と比べると、どのような点で優れていますか？ API はどうですか？<button> のクリックはユーザー操作ですが、ブラウザでは 権限を要求するリクエストに接続されているかどうかを確認します。もし ユーザーが <permission> をクリックした場合、ブラウザはクリックが発生したことを 関連するイベントが表示されます。これによりブラウザは リスクが高まりますたとえば、ユーザーが 権限のブロックを簡単に元に戻すことができます。
• 他のブラウザが <permission> 要素をサポートしていない場合はどうなりますか？「 <permission> 要素はプログレッシブ エンハンスメントとして使用できます。オン 従来の権限フローを使用できます。たとえば 通常の <button> のクリックに基づきます。権限チームはさらに ポリフィルを扱いますGitHub リポジトリにスターを付ける 完了すると通知されます。
• この問題は他のブラウザ ベンダーと議論されましたか？<permission> 要素 2023 年の W3C TPAC で活発に議論されました。 ブレイクアウト セッションをご覧ください。マイページ 読み取り可能な 公開セッションに関する注記をご覧ください。 また Chrome チームは、 関連リンクセクションをご覧ください。<permission> 要素は他のブラウザとも継続的に議論されているトピックです。 標準化したいと考えています
• これは実際に void 要素にすべきでしょうか？まだ続いています 議論が進んでいる <permission> を void にするか あります。フィードバックがある場合は、問題に関与します。

関連リンク

• 説明
• WebKit 標準の位置付け
• Mozilla 標準の位置付け

謝辞

このドキュメントをレビューしたユーザー Balázs Engedy Thomas Nguyen 氏、 Penelope McLachlan Marian Harbach、 David Warren Rachel Andrew。