사용 권한을 요청하는 명령적 방법은 여러 가지가 있습니다.
웹 앱에서의 위치 정보 액세스와 같은 강력한 기능을 제공합니다. 이러한 메서드에는
문제 수가 많기 때문에 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>
개가 사용 중지되며 상호작용할 수 없습니다. 모든 문자
상호작용을 시도하면
있습니다. 오류 메시지에는 감지된
정책 위반입니다.
속성 | 규칙 |
---|---|
|
텍스트와 배경 색상을 각각 설정하는 데 사용할 수 있습니다. 이 두 색상의 대비는 각 색상을 명확하게 구분하기에 충분해야 합니다. 읽을 수 있는 텍스트 (3 이상의 대비율) 알파 채널은 1이 되어야 합니다. |
|
small 및
xxxlarge 그렇지 않으면 요소가 사용 중지됩니다. 확대/축소
font-size 을 계산할 때 고려됩니다. |
|
음수 값이 0 (으)로 수정됩니다. |
margin (전체) |
음수 값이 0 (으)로 수정됩니다. |
|
200 미만의 값은 200 (으)로 수정됩니다. |
|
normal 및 italic 이외의 값은 다음과 같습니다.
normal (으)로 수정되었습니다. |
|
0.5em 보다 큰 값은 다음으로 수정됩니다.
0.5em 0 미만의 값은 다음과 같이 수정됩니다.
0 |
|
inline-block 및 none 이외의 값
inline-block (으)로 수정됩니다. |
|
0.2em 보다 큰 값은 다음으로 수정됩니다.
0.2em -0.05em 미만의 값은
-0.05em (으)로 수정되었습니다. |
|
기본값은 1em 입니다. 제공되는 경우
기본값과 제공된 값 사이의 최대 계산 값
고려됩니다. |
|
기본값은 3em 입니다. 제공되는 경우
기본값과 제공된 값 사이의 최소 계산값
고려됩니다. |
|
기본값은 fit-content 입니다. 제공되는 경우
기본값과 제공된
값이 고려됩니다. |
|
기본값은 세 배 fit-content 입니다. 만약
기본값과
제공된 값이 고려됩니다. |
|
height 설정이 다음과 같은 경우에만 적용됩니다.
auto 이 경우 1em 를 초과하는 값은
1em (으)로 수정되며 padding-bottom 은(는)
padding-top 의 값으로 설정합니다. |
|
width 설정이 다음과 같은 경우에만 적용됩니다.
auto 이 경우 5em 를 초과하는 값은
5em (으)로 수정되며 padding-right 은(는)
padding-left. 의 값으로 설정 |
|
시각 효과를 왜곡하는 것은 허용되지 않습니다. 지금은 2D 변환 및 비례 상향 조정을 허용합니다. |
다음 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>
가 무효여야 하는지 여부 지정할 수 있습니다. 의견이 있으면 문제에 참여하세요.
관련 링크
감사의 말씀
이 문서를 검토자: 발라스 엔게디, 토마스 응우옌, 페넬로페 맥라클란, 마리언 하버크, 데이비드 워렌, 레이첼 앤드류.