이 페이지는 Cloud Translation API를 통해 번역되었습니다.

권한 정책으로 브라우저 기능 제어

페이지 및 페이지의 서드 파티 iframe이 브라우저 기능에 액세스하는 방법을 관리합니다.

Kevin K. Lee

권한 정책(이전의 기능 정책)을 사용하면 개발자가 페이지에서 사용할 수 있는 브라우저 기능, 페이지의 iframe 및 브라우저에서 적용할 정책 집합을 선언하여 이러한 하위 리소스에 적용됩니다. 이러한 정책은 응답 헤더 출처 목록에 제공된 출처에 적용됩니다. 출처 목록은 동일한 출처 또는 교차 출처를 포함할 수 있으며 개발자가 브라우저 기능에 대한 퍼스트 파티 및 서드 파티의 액세스를 제어합니다.

사용자는 더 강력한 기능에 액세스할 수 있는 최종 결정을 내리며 메시지를 통해 명시적인 권한을 제공해야 합니다.

권한 정책을 통해 최상위 사이트의 내용과 세 번째 사이트의 내용을 정의할 수 있습니다. 사용할 수 있으며, 사용자가 책임지고 제공하는 용도를 결정할 수 있는 권한 요청이 적법한지 여부를 확인할 수 있습니다 예를 들어 권한 정책을 통해 모든 서드 파티의 위치정보 기능을 차단함 개발자는 제3자가 사용자의 있습니다.

참고: 개인 정보 보호 샌드박스는 서드 파티 쿠키 또는 기타 추적 메커니즘 없이 서드 파티 사용 사례를 충족하기 위한 일련의 제안서 및 API입니다. 사용자 에이전트 클라이언트 힌트 및 Topics API와 같은 개인 정보 보호 샌드박스 API는 geolocation 및 camera와 같은 기능을 관리하는 것과 동일한 방식으로 권한 정책에 따라 관리됩니다. 권한 정책을 사용하는 웹 플랫폼 API 목록은 기능 목록을 참고하세요. 이 목록은 최신 목록이 아닐 수 있습니다.

권한 정책 변경사항

권한 정책의 이전 이름은 기능 정책입니다. 주요 개념은 동일하지만 이름과 함께 몇 가지 중요한 변경사항이 있습니다.

구조화된 필드 사용

구조화된 필드는 HTTP 헤더 필드 값의 파싱 및 직렬화를 표준화하기 위한 일반적인 데이터 구조 집합을 제공합니다. Fastly의 블로그 게시물 '구조화된 헤더 필드로 HTTP 개선'에서 구조화된 필드에 관해 자세히 알아보세요.

변경 전

  geolocation 'self' https://example.com; camera 'none'

기능 정책 적용 전

신규

  geolocation=(self "https://example.com"), camera=()

이제 권한 정책이 적용됩니다.

헤더를 iframe `allow` 속성과 결합

기능 정책을 사용하면 헤더 출처 목록에 출처를 추가하거나 iframe 태그에 allow 속성을 추가하여 교차 출처 프레임에 기능을 추가할 수 있습니다. 권한 정책을 사용하면 교차 출처 프레임을 출처 목록에 추가하는 경우 해당 출처의 iframe 태그에 allow 속성이 포함되어야 합니다. 응답에 권한 정책 헤더가 없으면 출처 목록의 기본값이 *인 것으로 간주됩니다. iframe에 allow 속성을 추가하면 기능에 액세스할 수 있습니다.

따라서 개발자는 응답에서 권한 정책 헤더를 명시적으로 설정하여 allow가 있더라도 출처 목록에 없는 교차 출처 iframe이 이 기능에 액세스하지 못하도록 차단하는 것이 좋습니다.

기능 정책은 Chrome 88 이후에도 계속 사용할 수 있지만 권한 정책의 별칭으로 기능합니다. 문법 외에는 로직에 차이가 없습니다. 권한 정책 헤더와 기능 정책 헤더를 함께 사용하면 Permissions-Policy 헤더의 우선순위가 높아지고 Feature-Policy 헤더에서 제공한 값을 덮어씁니다.

권한 정책은 어떻게 사용하나요?

간략한 개요

자세히 알아보기 전에 웹사이트 소유자가 사이트 및 서드 파티 코드가 브라우저 기능을 사용하는 방식을 관리하려는 일반적인 시나리오를 살펴보겠습니다.

사이트 주소는 https://your-site.example입니다.
사이트에 동일 출처 (https://your-site.example)의 iframe이 삽입되어 있습니다.
신뢰할 수 있는 https://trusted-site.example의 iframe이 사이트에 삽입되어 있습니다.
사이트에는 https://ad.example에서 게재하는 광고도 표시됩니다.
광고가 아닌 내 사이트와 신뢰할 수 있는 사이트에만 위치정보를 허용하려는 경우

이 경우 다음 헤더를 사용합니다.

Permissions-Policy: geolocation=(self "https://trusted-site.example")

그런 다음 명시적으로 allow 속성을 신뢰할 수 있는 사이트의 iframe 태그로 설정합니다.

<iframe src="https://trusted-site.example" allow="geolocation">

권한 정책 사용의 간단한 개요 다이어그램

이 예에서 헤더 출처 목록을 사용하면 내 사이트 (self) 및 trusted-site.example만 위치정보 기능을 사용할 수 있습니다. ad.example에서 위치정보를 사용할 수 없습니다.

your-site.example 사이트에서 사용자의 동의하에 위치정보 기능을 사용할 수 있습니다.
동일한 출처 iframe (your-site.example)은 allow 속성을 사용하지 않고도 이 기능을 사용할 수 있습니다.
원본 목록에 추가되지 않았으며 iframe 태그에 허용 속성이 설정되어 있는 다른 하위 도메인 (subdomain.your-site-example)에서 게재된 iframe은 이 기능을 사용할 수 없습니다. 여러 하위 도메인은 동일한 사이트로 간주되지만 교차 출처로 간주됩니다.
출처 목록에 추가되었고 iframe 태그에 allow 속성이 설정된 교차 출처 iframe (trusted-site.example)은 이 기능을 사용할 수 있습니다.
allow 속성 없이 출처 목록에 추가된 교차 출처 iframe (trusted-site.example)은 이 기능을 사용할 수 없습니다.
출처 목록에 추가되지 않은 교차 출처 iframe (ad.example)은 allow 속성이 iframe 태그에 포함되어 있더라도 이 기능을 사용할 수 없도록 차단됩니다.

`Permissions-Policy` HTTP 응답 헤더

사용자가 요청하면 서버가 권한 정책 헤더로 응답하면 브라우저가 이 헤더를 기반으로 액세스 권한을 부여합니다.

Permissions-Policy: &lt;feature&gt;=(&lt;token&gt;|&lt;origin(s)&gt;)

서버의 응답에 Permissions-Policy 헤더를 사용하여 지형지물에 허용되는 출처를 설정합니다. 헤더 값은 토큰과 출처 문자열의 조합을 사용할 수 있습니다. 사용 가능한 토큰은 모든 출처의 경우 *, 동일한 출처의 경우 self입니다.

헤더가 여러 지형지물에 대한 경우 지형지물을 쉼표로 구분하세요. 출처가 여러 개인 경우 출처 목록에서 각 출처를 공백으로 구분합니다. 교차 출처 요청인 출처가 나열된 헤더의 경우 iframe 태그에 allow 속성이 포함되어야 합니다.

다음은 키-값 쌍의 예입니다.

구문: [FEATURE]=* <ph type="x-smartling-placeholder">
- 모든 출처에 적용되는 정책
- 예: geolocation=*
구문: [FEATURE]=(self) <ph type="x-smartling-placeholder">
- 동일한 출처에 적용되는 정책
- 예: geolocation=(self)
구문: [FEATURE]=(self [ORIGIN(s)]) <ph type="x-smartling-placeholder">
- 동일한 출처 및 지정된 출처에 적용되는 정책
- 예: geolocation=(self "https://a.example" "https://b.example")
- self는 https://your-site.example의 약칭입니다.
구문: [FEATURE]=([ORIGIN(s)]) <ph type="x-smartling-placeholder">
- 동일한 출처 및 지정된 출처에 적용되는 정책
- 예: geolocation=("https://your-site.example" "https://a.example" "https://b.example")
- 이 구문을 사용하는 경우 출처 중 하나가 임베딩의 출처여야 합니다. 삽입 페이지 자체에 권한이 부여되지 않으면 권한 정책이 권한을 위임하므로 해당 페이지에 삽입된 iframe은 원본 목록에 추가되더라도 차단됩니다. self 토큰을 사용할 수도 있습니다.
구문: [FEATURE]=() <ph type="x-smartling-placeholder">
- 모든 출처에서 기능이 차단됨
- 예: geolocation=()

를 통해 개인정보처리방침을 정의할 수 있습니다.

경고: 응답에 권한 정책 헤더가 없으면 기본값인 * 토큰이 사용됩니다. 이렇게 하면 allow 속성이 있는 페이지의 모든 iframe에서 이 기능을 사용할 수 있습니다. 따라서 액세스를 제어하기 위해 권한-정책 헤더에 출처 목록을 명시적으로 설정하는 것이 좋습니다.

핵심 사항: 기능 정책의 권한 정책이 변경됨에 따라 헤더 출처 목록에 출처를 추가하는 것만으로는 더 이상 교차 출처 iframe에 해당 기능을 사용 설정할 수 없습니다. 교차 출처인 경우 헤더 출처 목록에 설정된 것과 관계없이 iframe에 allow 속성을 포함해야 합니다.

여러 하위 도메인 및 경로

https://your-site.example, https://subdomain.your-site.example 등 서로 다른 하위 도메인은 동일한 사이트이지만 교차 출처로 간주됩니다. 따라서 원본 목록에 하위 도메인을 추가해도 동일한 사이트의 다른 하위 도메인에 대한 액세스가 허용되지 않습니다. 이 기능을 사용하려는 삽입된 모든 하위 도메인은 출처 목록에 별도로 추가되어야 합니다. 예를 들어, 사용자의 탐색 주제에 대한 액세스가 헤더 Permissions-Policy: browsing-topics=(self)를 사용하는 동일한 출처에서만 허용되는 경우 동일한 사이트의 다른 하위 도메인(https://subdomain.your-site.example)에 있는 iframe은 주제에 액세스할 수 없습니다.

서로 다른 경로(예: https://your-site.example, https://your-site.example/embed)는 동일한 출처로 간주되며, 다른 경로를 출처 목록에 나열할 필요는 없습니다.

iframe `allow` 속성

iframe 설정

교차 출처 사용의 경우 iframe에서 기능에 액세스하려면 태그에 allow 속성이 있어야 합니다.

구문: <iframe src="[ORIGIN]" allow="[FEATURE] <'src' | [ORIGIN(s)]"></iframe>

예를 들면 다음과 같습니다.

<iframe src="https://trusted-site.example" allow="geolocation">

드림

참고: allow="geolocation" 구문은 allow="geo 'src'"의 약칭입니다. src는 iframe의 src 속성 출처로 확장되는 특수 토큰입니다.

iframe 탐색 처리

iframe 탐색 설정

기본적으로 iframe이 다른 출처로 이동하는 경우 정책이 iframe이 이동하는 출처에는 적용되지 않습니다. iframe이 이동하는 출처를 allow 속성에 나열하면 원래 iframe에 적용된 권한 정책이 iframe이 이동하는 출처에 적용됩니다.

<iframe src="https://trusted-site.example" allow="geolocation https://trusted-site.example https://trusted-navigated-site.example">

iframe 탐색 데모에서 실제로 작동하는 것을 확인할 수 있습니다.

권한 정책 설정 예시

다음 설정의 예는 데모에서 확인할 수 있습니다.

모든 출처에서 기능이 허용됨

기능에 액세스할 수 있도록 허용된 모든 출처의 아키텍처

Permissions-Policy: geolocation=*

<iframe src="https://trusted-site.example" allow="geolocation">
<iframe src="https://ad.example" allow="geolocation">

출처 목록이 * 토큰으로 설정되면 자체 및 모든 iframe을 포함하여 페이지에 있는 모든 출처에서 이 기능이 허용됩니다. 이 예에서 https://your-site.example에서 제공된 모든 코드와 https://trusted-site.example iframe 및 https://ad.example에서 제공된 코드는 사용자 브라우저의 위치정보 기능에 액세스할 수 있습니다. 허용 속성은 헤더 출처 목록에 출처를 추가하는 동시에 iframe 자체에도 설정해야 합니다.

이 설정은 데모에서 확인할 수 있습니다.

기능이 동일한 출처에서만 허용됩니다.

출처가 동일한 아키텍처만 기능에 액세스할 수 있음

Permissions-Policy: geolocation=(self)

self 토큰을 사용하면 동일한 출처에 대해서만 위치정보를 사용할 수 있습니다. 교차 도메인에서는 이 기능에 액세스할 수 없습니다. 이 예시에서는 https://trusted-site.example (self)만 위치정보에 액세스할 수 있습니다. 내 페이지에만 이 기능을 사용하려면 이 구문을 사용하세요.

이 설정은 데모에서 확인할 수 있습니다.

동일한 출처 및 특정 교차 출처에서 허용되는 기능

기능에 액세스할 수 있도록 허용된 지정된 출처의 아키텍처

Permissions-Policy: geolocation=(self "https://trusted-site.example")

이 문법을 사용하면 self (https://your-site.example) 및 https://trusted-site.example 모두에 위치정보를 사용할 수 있습니다. iframe 태그에 allow 속성을 명시적으로 추가해야 합니다. <iframe src="https://ad.example" allow="geolocation">가 포함된 다른 iframe이 있으면 https://ad.example에서 위치정보 기능에 액세스할 수 없습니다. iframe 태그의 allow 속성이 있고 원본 목록에 나열된 원본 페이지 및 https://trusted-site.example만 사용자 기능에 액세스할 수 있습니다.

이 설정은 데모에서 확인할 수 있습니다.

모든 출처에서 기능이 차단됨

모든 출처의 아키텍처가 기능 액세스 차단됨

Permissions-Policy: geolocation=()

출처 목록이 비어 있으면 모든 출처에서 기능이 차단됩니다. 이 설정은 데모에서 확인할 수 있습니다.

JavaScript API 사용

기능 정책의 기존 JavaScript API는 문서 또는 요소 (document.featurePolicy or element.featurePolicy)에서 객체로 찾을 수 있습니다. 권한 정책을 위한 JavaScript API는 아직 구현되지 않았습니다.

Feature Policy API는 권한 정책에서 설정하는 정책에 사용할 수 있지만 몇 가지 제한사항이 있습니다. JavaScript API 구현과 관련하여 남은 질문이 있으며, 로직을 Permissions API로 이동하기 위한 제안이 제시되었습니다. 의견이 있으면 토론에 참여하세요.

featurePolicy.allowsFeature(feature)

기능이 기본 출처 사용에 허용되면 true를 반환합니다.
동작은 권한 정책에서 설정한 정책과 이전 기능 정책에서 모두 동일합니다.
iframe 요소 (iframeEl.featurePolicy.allowsFeature('geolocation'))에서 allowsFeature()를 호출하면 반환되는 값이 iframe에 허용 속성이 설정되어 있는지 여부를 반영합니다.

featurePolicy.allowsFeature(기능, 출처)

지정된 출발지에 지형지물이 허용되면 true를 반환합니다.
이 메서드가 document에서 호출되면 이 메서드는 기능 정책처럼 지정된 출처에서 이 기능이 허용되는지 여부를 더 이상 알려주지 않습니다. 이제 이 메서드는 해당 출처에 기능을 허용할 수 있음을 알려줍니다. iframe에 allow 속성이 설정되어 있는지 추가로 확인해야 합니다. 개발자는 iframe 요소의 allow 속성을 추가로 검사하여 기능이 서드 파티 출처에서 허용되는지 확인해야 합니다.

`element` 객체로 iframe의 기능 확인

허용하지 않는 document.allowsFeature(feature, origin)와 달리 allow 속성을 고려하는 element.allowsFeature(feature)를 사용할 수 있습니다.

const someIframeEl = document.getElementById('some-iframe')
const isCameraFeatureAllowed = someIframeEl.featurePolicy.allowsFeature('camera')

featurePolicy.allowedFeatures()

기본 출처 사용에 허용되는 기능 목록을 반환합니다.
권한 정책 및 기능 정책에서 설정한 두 정책의 동작은 동일합니다.
연결된 노드가 iframe인 경우 allow 속성이 고려됩니다.

featurePolicy.features()

브라우저에서 사용할 수 있는 기능 목록을 반환합니다.
권한 정책 및 기능 정책에서 설정한 두 정책의 동작은 동일합니다.

Chrome DevTools 통합

Chrome DevTools와 권한 정책 통합

DevTools에서 권한 정책이 어떻게 작동하는지 확인해 보세요.

Chrome DevTools를 엽니다.
Application 패널을 열어 각 프레임에서 허용되는 기능과 허용되지 않는 기능을 확인합니다.
사이드바에서 검사할 프레임을 선택합니다. 선택한 프레임에서 사용할 수 있는 기능 목록과 해당 프레임에서 차단된 기능의 목록이 표시됩니다.

기능 정책에서 이전

현재 Feature-Policy 헤더를 사용 중인 경우 다음 단계를 구현하여 권한 정책으로 이전할 수 있습니다.

기능 정책 헤더를 권한 정책 헤더로 바꾸기

기능 정책 헤더는 Chromium 기반 브라우저에서만 지원되고 권한 정책 헤더는 Chrome 88부터 지원되므로 권한 정책으로 기존 헤더를 업데이트하는 것이 안전합니다.

변경 전

Feature-Policy:
  autoplay *;
  geolocation 'self';
  camera 'self' 'https://trusted-site.example';
  fullscreen 'none';

기능 정책 적용 전

신규

Permissions-Policy:
  autoplay=*,
  geolocation=(self),
  camera=(self "https://trusted-site.example"),
  fullscreen=()

이제 권한 정책이 적용됩니다.

`document.allowsFeature(feature, origin)` 사용량 업데이트

document.allowsFeature(feature, origin) 메서드를 사용하여 iframe에서 허용되는 기능을 확인하는 경우 포함된 document가 아닌 iframe 요소에 연결된 allowsFeature(feature) 메서드를 사용하세요. element.allowsFeature(feature) 메서드는 allow 속성을 고려하지만 document.allowsFeature(feature, origin)는 그러지 않습니다.

`document`에서 기능 액세스 권한 확인 중

document를 기본 노드로 계속 사용하려면 iframe 태그에서 allow 속성을 추가로 확인해야 합니다.

<iframe id="some-iframe" src="https://example.com" allow="camera"></iframe>

Permissions-Policy: camera=(self "https://example.com")

const isCameraPolicySet = document.featurePolicy.allowsFeature('camera', 'https://example.com')

const someIframeEl = document.getElementById('some-iframe')
const hasCameraAttributeValue = someIframeEl.hasAttribute('allow')
&& someIframeEl.getAttribute('allow').includes('camera')

const isCameraFeatureAllowed = isCameraPolicySet && hasCameraAttributeValue

document를 사용하여 기존 코드를 업데이트하는 대신 이전 예와 같이 element 객체에서 allowsFeature()를 호출하는 것이 좋습니다.

Reporting API

Reporting API는 일관된 방식으로 웹 애플리케이션에 대한 보고 메커니즘을 제공하며, 권한 정책 위반에 대한 Reporting API는 실험용 기능으로 사용할 수 있습니다.

실험용 기능을 테스트하려면 둘러보기에 따라 chrome://flags/#enable-experimental-web-platform-features에서 플래그를 사용 설정합니다. 플래그를 사용 설정하면 DevTools의 Application 탭에서 권한 정책 위반을 확인할 수 있습니다.

다음 예는 Reporting API 헤더를 구성하는 방법을 보여줍니다.

Reporting-Endpoints: main-endpoint="https://reports.example/main", default="https://reports.example/default"

Content-Security-Policy: script-src 'self'; object-src 'none'; report-to main-endpoint;
Document-Policy: document-write=?0; report-to=main-endpoint;

현재 구현에서는 'default'라는 엔드포인트를 구성하여 해당 프레임 내에서 발생하는 위반에 대한 정책 위반 신고를 받을 수 있습니다. 추가할 수 있습니다. 서브프레임에는 자체 보고 구성이 필요합니다.

자세히 알아보기

권한 정책에 관해 자세히 알아보려면 다음 리소스를 참고하세요.

권한 정책으로 브라우저 기능 제어

권한 정책 변경사항

구조화된 필드 사용

헤더를 iframe allow 속성과 결합

권한 정책은 어떻게 사용하나요?

간략한 개요

Permissions-Policy HTTP 응답 헤더

여러 하위 도메인 및 경로

iframe allow 속성

iframe 탐색 처리

권한 정책 설정 예시

모든 출처에서 기능이 허용됨

기능이 동일한 출처에서만 허용됩니다.

동일한 출처 및 특정 교차 출처에서 허용되는 기능

모든 출처에서 기능이 차단됨

JavaScript API 사용

featurePolicy.allowsFeature(feature)

featurePolicy.allowsFeature(기능, 출처)

element 객체로 iframe의 기능 확인

featurePolicy.allowedFeatures()

featurePolicy.features()

Chrome DevTools 통합

기능 정책에서 이전

기능 정책 헤더를 권한 정책 헤더로 바꾸기

document.allowsFeature(feature, origin) 사용량 업데이트

document에서 기능 액세스 권한 확인 중

Reporting API

자세히 알아보기

헤더를 iframe `allow` 속성과 결합

`Permissions-Policy` HTTP 응답 헤더

iframe `allow` 속성

`element` 객체로 iframe의 기능 확인

`document.allowsFeature(feature, origin)` 사용량 업데이트

`document`에서 기능 액세스 권한 확인 중