새 HTML <permission> 요소에 대한 오리진 트라이얼

Thomas Steiner

사용 권한을 요청하는 명령적 방법은 여러 가지가 있습니다. 웹 앱에서의 위치 정보 액세스와 같은 강력한 기능을 제공합니다. 이러한 메서드에는 문제 수가 많기 때문에 Chrome 권한팀은 새로운 선언적 메서드인 전용 HTML <permission> 요소를 사용합니다. 이 요소는 Chrome 126부터 오리진 트라이얼이며 궁극적으로는 표준화해야 합니다

권한 요청을 위한 명령형 메서드

웹 앱이 다음에 액세스해야 하는 경우 강력한 기능을 권한을 요청해야 합니다 예를 들어 Google 지도는 Geolocation API 브라우저는 사용자에게 메시지를 표시하고, 종종 해당 결정을 저장할 수 있는 옵션을 제공합니다. 이것은 잘 정의된 개념 참조하세요.

최초 사용 시 암시적으로 요청하기보다는 명시적으로 먼저 요청하는 경우

Geolocation API는 강력한 API로, 접근 방식을 사용하는 것입니다. 예를 들어 앱이 navigator.geolocation.getCurrentPosition() 드림 메서드를 사용하면 첫 번째 호출 시 권한 메시지가 자동으로 표시됩니다. 또 다른 예는 navigator.mediaDevices.getUserMedia()

기타 API(예: Notification API 또는 기기 방향 및 Motion API 일반적으로 다음과 같은 정적 메서드를 통해 권한을 요청하는 명시적인 방법이 있습니다. Notification.requestPermission() 또는 DeviceMotionEvent.requestPermission()

필수 권한 요청 방법의 문제점

권한 스팸

과거에는 웹사이트에서 다음과 같은 메서드를 호출할 수 있었습니다. navigator.mediaDevices.getUserMedia() 또는 Notification.requestPermission(), navigator.geolocation.getCurrentPosition() 웹사이트에 알 수 있습니다. 사용자가 상호작용하기 전에 권한 메시지가 표시됨 있습니다. 이는 권한 스팸으로 설명되며 둘 다에 영향을 미칩니다. 암시적으로 첫 번째 사용 시에 요청 및 명시적으로 요청 하세요.

브라우저 완화 기능 및 사용자 동작 요구사항

권한 스팸으로 인해 브라우저 공급업체에서 버튼과 같은 사용자 동작을 요구했습니다. 키를 누릅니다. 이 접근 방식은 브라우저에서 불가능하지는 않지만 주어진 사용자 동작이 권한 메시지를 표시해야 하는지 파악 결정됩니다. 사용자가 짜증이 나서 페이지를 클릭했을 수도 있습니다. 페이지가 로드되는 데 너무 오래 걸리거나 찾기 버튼을 클릭합니다. 일부 웹사이트는 또한 사용자가 콘텐츠를 클릭하도록 속여 메시지를 트리거하게 됩니다.

또 다른 완화 방법으로는 완전히 차단과 같은 프롬프트 악용 완화 조치를 권한 메시지를 비모달로 표시하는 등 방해가 되기 때문입니다.

권한 컨텍스트화

또 다른 문제, 특히 대형 화면에서는 권한 메시지가 가 일반적으로 표시됩니다. 사망의 줄입니다. 앱이 그릴 수 있는 브라우저 창 영역 밖에 있는 경우입니다. 그것은 사용자가 브라우저 상단의 메시지를 놓칠 수 있다는 사실은 전례가 없습니다. 창 하단의 버튼을 클릭했을 때 실행되는 것으로 확인되었습니다. 이 문제 브라우저 스팸 완화 조치가 마련되면 종종 악화됩니다.

쉽게 실행취소할 수 없음

마지막으로, 사용자가 막다른 길에 빠지기가 너무 쉽습니다. 대상 예를 들어 사용자가 기능에 대한 액세스를 차단하면 재설정 또는 재설정을 할 수 있는 사이트 정보 드롭다운 메뉴를 권한을 클릭하거나 차단된 권한을 다시 사용 설정합니다. 최악의 경우 두 옵션 모두 업데이트된 설정이 적용될 때까지 페이지를 완전히 새로고침해야 합니다. 사용자가 사이트의 URL을 쉽게 변경할 수 있도록 어떻게 해야 하는지를 사용자에게 Google 지도 하단에 표시된 대로 설정을 변경합니다. 있습니다.

예를 들어 마이크에 액세스하는 등 사용 환경에 중요한 권한인 경우 Google Meet과 같은 앱에서 방해가 되는 대화상자를 표시함 사용자에게 권한 차단을 해제하는 방법을 안내합니다.

선언적 <permission> 요소

이 게시물에 설명된 문제를 해결하기 위해 Chrome 권한팀은 새로운 HTML 요소 <permission>의 오리진 트라이얼을 실행했습니다. 이 요소를 사용하면 개발자가 웹사이트에서 사용할 수 있는 강력한 기능의 하위 집합입니다. 가장 간단한 형태로는 다음 예와 같이 사용합니다.

<permission type="camera" />

여전히 적극적으로 논쟁 <permission>가 무효여야 하는지 여부 지정할 수 있습니다. void 요소는 HTML에서 자동으로 닫히는 요소로 하위 노드가 있는 경우(HTML에서는 종료 태그가 없을 수 있음)

type 속성

이 type 드림 속성에는 요청하는 권한의 공백으로 구분된 목록이 포함되어 있습니다. 위치 이 문서의 작성 시점을 기준으로 허용되는 값은 'camera', 'microphone', camera microphone (공백으로 구분) 이 요소는 기본적으로 이는 베어본 사용자 에이전트 스타일이 지정된 버튼과 유사합니다.

type-ext 속성

추가 매개변수를 허용하는 일부 권한의 경우 type-ext 드림 속성은 위치정보 권한의 경우 precise:true

lang 속성

버튼 텍스트는 브라우저에 의해 제공되고 일관성을 유지해야 하므로 직접 맞춤설정할 수 없습니다. 브라우저에서 텍스트 언어를 변경합니다. 또는 상위 요소 체인의 상속된 언어를 기반으로 선택적 lang 드림 속성의 값을 제공합니다. 즉, 개발자는 <permission> 요소 자체를 포함하게 됩니다. <permission> 요소가 원점을 넘어 진행되는 경우 평가판 단계, 각 권한 유형에 대해 여러 문자열 또는 아이콘이 지원될 수 있음 유연성을 높일 수 있습니다 <permission> 사용에 관심이 있는 경우 요소가 있고 특정 문자열이나 아이콘이 필요한 경우 문의해 주세요.

동작

사용자는 <permission> 요소와 상호작용할 때 다음 요소를 탐색할 수 있습니다. 다양한 단계로 이루어져 있습니다.

• 이전에 특정 기능을 허용하지 않은 경우 방문할 때마다 허용할 수 있습니다. 허용하는 것입니다.

  

• 이전에 이 기능을 허용했다면 계속 허용할 수도 있고 중지할 수도 있습니다. 허용합니다.

  

• 이전에 특정 기능을 허용하지 않았더라도 계속해서 허용하지 않을 수 있습니다. 이번에는 허용합니다.

  

<permission> 요소의 텍스트는 있습니다. 예를 들어 지형지물을 사용할 수 있는 권한이 부여된 경우 텍스트 이 기능이 허용된다고 알려줍니다. 먼저 권한을 부여해야 한다면 이 기능을 사용하도록 사용자가 초대하도록 텍스트가 변경됩니다. 이전 기간과 두 가지 상태를 확인할 수 있습니다.

CSS 디자인

사용자가 버튼을 쉽게 인지할 수 있는 표면으로 강력한 기능에 액세스할 수 있도록 하기 위해 기능을 사용하는 경우 <permission> 요소의 스타일 지정이 제한됩니다. 스타일이 사용 사례에 적합하지 않을 수 있으니 알려주세요 어떻게, 왜! 모든 스타일 지정 요구사항을 충족할 수 있는 것은 아니지만, 다음의 안전한 <permission> 요소 스타일 지정을 허용하는 방법을 알아보세요. 오리진 트라이얼입니다. 다음 표에는 제한사항이 있는 일부 속성이 자세히 설명되어 있습니다. 특별한 규칙이 적용될 수 있습니다 규칙을 위반하는 경우 요소 <permission>개가 사용 중지되며 상호작용할 수 없습니다. 모든 문자 상호작용을 시도하면 있습니다. 오류 메시지에는 감지된 정책 위반입니다.

다음 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>의 스타일을 지정할 수 있는 두 가지 특수한 의사 클래스가 있습니다. 요소의 상태를 업데이트합니다.

• :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;
}

자바스크립트 이벤트

<permission> 요소는 다음과 함께 사용하도록 되어 있습니다. 권한 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 요소를 표시하지 않습니다. 즉, HTML 코드에 <permission> 요소가 있고 코드가 알지 못합니다. 여전히 JavaScript를 사용하여 지원을 감지하고 예를 들어 일반 <button>.

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

오리진 트라이얼

사이트에서 실제 사용자에게 <permission> 요소를 사용해 보려면 다음 단계를 따르세요. 오리진 트라이얼에 가입하세요. 오리진 트라이얼 시작하기에서 다음을 확인해 보세요. 오리진 트라이얼을 사용하기 위한 사이트 준비 방법을 안내합니다. 오리진 트라이얼 Chrome 126~131 (2025년 2월 19일)부터 실행됩니다.

데모

데모를 살펴보고 GitHub의 소스 코드를 확인하세요. 다음은 지원되는 브라우저를 사용한 환경의 스크린샷입니다.

의견

<permission>가 귀사의 사용 사례에 어떻게 도움이 되는지 의견을 듣고 싶습니다. 느낌 무료로 응답하거나 저장소의 문제 또는 새로 신고 있습니다 다음에 대한 저장소의 공개 신호 <permission> 요소를 통해 Google과 다른 브라우저에서 사용자가 관심을 가질 것임을 알 수 있습니다. 있습니다.

FAQ

• 권한과 페어링된 일반 <button>보다 더 나은 점은 무엇인가요? API인가요? <button> 클릭은 사용자 동작이지만 브라우저는 권한 요청 요청에 연결되어 있는지 확인합니다. 만약 사용자가 <permission>를 클릭했다면 브라우저는 클릭이 표시됩니다. 이렇게 하면 브라우저에서 그렇지 않으면 훨씬 더 위험할 것입니다. 예를 들어 사용자가 쉽게 권한 차단을 실행취소할 수 있습니다.
• 다른 브라우저에서 <permission> 요소를 지원하지 않으면 어떻게 되나요? 이 <permission> 요소는 점진적 개선으로 사용할 수 있습니다. 사용 설정됨 기본 권한 흐름을 사용할 수 있습니다. 예를 들어 일반 <button>의 클릭에 기반합니다. 또한 권한팀은 폴리필 작업을 하고 있습니다. GitHub 저장소에 별표표시합니다. 준비가 되면 알림을 받도록 설정할 수 있습니다
• 다른 브라우저 공급업체에서도 논의한 바 있나요? <permission> 요소 는 2023년 W3C TPAC에서 소그룹 세션. 나 을(를) 읽을 수 있습니다. 공개 세션 메모를 참조하세요. 또한 Chrome팀은 관련 링크 섹션을 참고하세요. <permission> 요소는 다른 브라우저와 논의되고 있으며 Google은 표준화하고자 할 것입니다.
• 이는 실제로 무효 요소여야 하나요? 아직도 적극적으로 논쟁이 벌어진 <permission>가 무효여야 하는지 여부 지정할 수 있습니다. 의견이 있으면 문제에 참여하세요.

관련 링크

• 설명 자료
• WebKit 표준 위치
• Mozilla 표준 입지

감사의 말씀

이 문서를 검토자: 발라스 엔게디, 토마스 응우옌, 페넬로페 맥라클란, 마리언 하버크, 데이비드 워렌, 레이첼 앤드류.