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

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

Kevin K. Lee

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

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

권한 정책을 사용하면 최상위 사이트에서 사이트 및 서드 파티가 사용하려는 항목을 정의할 수 있으며, 기능 액세스 요청이 합법적인지 여부를 판단해야 하는 부담이 사라집니다. 예를 들어 권한 정책을 통해 모든 제3자의 위치정보 기능을 차단함으로써 개발자는 제3자가 사용자의 위치정보에 액세스할 수 없다고 확신할 수 있습니다.

권한 정책 변경사항

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

구조화된 필드 사용

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

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

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

헤더를 iframe allow 속성과 결합

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

따라서 개발자는 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에서는 위치정보를 사용할 수 없습니다.

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

Permissions-Policy HTTP 응답 헤더

Permissions-Policy: <feature>=(<token>|<origin(s)>)

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

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

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

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

다양한 하위 도메인 및 경로

다른 하위 도메인(예: 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에서 기능에 액세스하려면 태그에 allow 속성이 있어야 합니다.

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

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

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

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에서 게재된 코드는 사용자 브라우저의 위치정보 기능에 액세스할 수 있습니다. allow 속성은 원본을 헤더 출처 목록에 추가하는 것과 함께 iframe 자체에도 설정해야 합니다.

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

동일한 출처에서만 허용되는 기능

Permissions-Policy: geolocation=(self)

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

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

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

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

이 구문을 사용하면 자체 (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)

• 기능이 default-origin 사용으로 허용되면 true를 반환합니다.
• 권한 정책에서 설정한 정책과 이전 기능 정책에서 모두 동일하게 동작합니다.
• allowsFeature()가 iframe 요소 (iframeEl.featurePolicy.allowsFeature('geolocation'))에서 호출되면 allow 속성이 iframe에 설정되어 있는지 여부를 반환된 값이 반영됩니다.

featurePolicy.allowsFeature(feature, origin)

• 기능이 지정된 출발지에 허용되는 경우 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()

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

featurePolicy.features()

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

Chrome DevTools 통합

DevTools에서 권한 정책이 작동하는 방식을 확인해 보세요.

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

기능 정책에서 이전

현재 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'라는 이름의 엔드포인트를 구성하여 해당 프레임 내에서 발생하는 모든 위반에 대한 정책 위반 보고서를 수신할 수 있습니다. 서브프레임에는 자체 보고 구성이 필요합니다.

자세히 알아보기

권한 정책에 대한 자세한 내용은 다음 리소스를 참고하세요.

• 권한 정책 사양
• 권한 정책 설명
• 정책 제어 기능 목록