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

기능 정책 소개

Eric Bidelman

요약

웹 개발자는 기능 정책을 통해 선택적으로 기능을 사용 설정, 사용 중지, 브라우저에서 특정 API 및 웹 기능의 동작을 수정할 수 있습니다. 이는 마치 CSP를 사용하지만 보안을 제어하는 대신 제어 기능을 제공합니다.

기능 정책 자체에 개발자 간의 동의 여부가 거의 없습니다. 높은 수준의 빌드 및 유지 목표를 달성하는 데 도움이 될 수 있는 고품질 웹 앱을 제공합니다.

소개

웹용으로 개발하기란 어려운 일입니다. 최고의 실력을 쌓기란 어려운 일이죠 성능을 향상하고 모든 최신 권장사항을 사용하는 웹 앱입니다. 심지어 계속해서 훌륭한 경험을 제공하기가 어렵습니다. 프로젝트가 발전함에 따라 새로운 기능이 출시되고 코드베이스가 늘어납니다. 그 것이 한 번 달성한 Great Experience TM는 성능이 저하되고 UX가 나빠질 수 있습니다. 더 힘들어질 테니까요! 기능 정책은 사용자가 정책을 준수할 수 있도록 설계되었습니다.

기능 정책을 사용하면 브라우저에서 다음 작업을 하도록 '정책' 집합을 선택할 수 있습니다. 사이트 전체에서 사용되는 특정 기능에 시행할 수 있습니다. 이러한 정책은 사이트에서 액세스하거나 브라우저의 기본 동작을 수정할 수 있는 API 확인할 수 있습니다

기능 정책으로 할 수 있는 작업의 예는 다음과 같습니다.

기본 동작 변경 (모바일 및 서드 파티 동영상의 총 autoplay개)
사이트에서 camera 또는 microphone와 같은 민감한 API를 사용하지 못하도록 제한합니다.
iframe에서 fullscreen API를 사용하도록 허용합니다.
동기 XHR 및 document.write()와 같은 오래된 API의 사용을 차단합니다.
이미지 크기가 적절한지 (예: 레이아웃 스래싱 방지) 너무 큰 경우 (예: 사용자의 대역폭 낭비)

정책은 개발자와 브라우저 간의 계약입니다. 이러한 원칙은 정보를 제공하여 앱이 레일에서 벗어나 나쁜 일을 하려고 합니다. 사이트 또는 삽입된 서드 파티 콘텐츠가 개발자가 사전 선택한 브라우저가 더 나은 UX로 동작을 재정의하거나 API를 차단합니다. 완전히 달라졌습니다.

기능 정책 사용

기능 정책은 기능을 제어하는 두 가지 방법을 제공합니다.

Feature-Policy HTTP 헤더를 통해
iframe에서 allow 속성을 사용합니다.

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

참고: HTTP 헤더와 allow 속성의 가장 큰 차이점은 다음과 같습니다. allow 속성은 iframe 내의 기능만 제어합니다. 헤더 기본 응답의 기능 + 내부의 모든 iframe 콘텐츠를 제어할 수 있습니다. 있습니다. 이는 iframe이 상위 페이지의 정책을 상속하기 때문입니다.

`Feature-Policy` HTTP 헤더

기능 정책을 사용하는 가장 쉬운 방법은 Feature-Policy HTTP 헤더를 페이지 응답으로 반환합니다. 이 헤더의 값은 정책 또는 설정입니다. 정책:

Feature-Policy: <feature> <allow list origin(s)>

원본 허용 목록은 다음과 같은 여러 값을 사용할 수 있습니다.

*: 이 기능은 최상위 탐색 컨텍스트 및 중첩에서 허용됩니다. 탐색 컨텍스트 (iframes)를 지원합니다.
'self': 이 기능은 최상위 탐색 컨텍스트에서 허용됩니다. 동일한 출처의 중첩 브라우징 컨텍스트를 사용하세요 교차 출처에서 허용되지 않습니다. 문서에 액세스할 수 있습니다.
'none': 최상위 탐색 컨텍스트에서 이 기능이 허용되지 않습니다. 중첩 브라우징 컨텍스트에서는 허용되지 않습니다.
<origin(s)>: 정책을 사용 설정할 특정 출처입니다 (예: https://example.com).

예

모든 콘텐츠에서 Geolocation API에 액세스할 수 있습니다. 이렇게 하려면 엄격한 geolocation 기능의 'none' 허용 목록:

Feature-Policy: geolocation 'none'

코드 또는 iframe에서 Geolocation API를 사용하려고 하면 브라우저가 차단될 수 있습니다. 이는 사용자가 이전에 위치 공유 권한을 가지고 있어야 합니다.

경우에 따라서는 이 정책을 약간 완화하는 것이 좋습니다. Google에서는 Google의 자체 출처를 통해 Geolocation API를 사용할 수 있지만 제3자 콘텐츠가 허용 목록에서 'self'를 설정하여 액세스합니다.

Feature-Policy: geolocation 'self'

iframe `allow` 속성

기능 정책을 사용하는 두 번째 방법은 애플리케이션 내에서 콘텐츠를 제어하는 것입니다. iframe allow 속성을 사용하여 다음에 관한 정책 목록을 지정합니다. 삽입된 콘텐츠:

<!-- Allow all browsing contexts within this iframe to use fullscreen. -->
<iframe src="https://example.com..." allow="fullscreen"></iframe>

<!-- Equivalent to: -->
<iframe src="https://example.com..." allow="fullscreen *"></iframe>

<!-- Allow only iframe content on a particular origin to access the user's location. -->
<iframe
  src="https://another-example.com/demos/..."
  allow="geolocation https://another-example.com"
></iframe>

기존 iframe 속성은 어떻게 되나요?

기능 정책으로 제어되는 기능 중 일부에는 속성을 사용하여 동작을 제어합니다. 예: <iframe allowfullscreen> 은 iframe 콘텐츠가 HTMLElement.requestFullscreen() API allowpaymentrequest 및 allowusermedia 속성이 Payment Request API 및 getUserMedia(), 각각 1개의 값으로 사용합니다.

기존의 allow 속성 대신 속성을 사용합니다(가능한 경우). 역방향을 지원해야 하는 경우 상응하는 레거시 속성과 allow 속성을 사용하는 호환성 아무런 문제가 없습니다 (예: <iframe allowfullscreen allow="fullscreen">). 다만 더 제한적인 정책이 우선입니다. 예를 들어 iframe이 전체화면으로 전환될 수 없습니다. allow="fullscreen 'none'"가 allowfullscreen보다 더 제한적입니다.

<!-- Blocks fullscreen access if the browser supports feature policy. -->
<iframe allowfullscreen allow="fullscreen 'none'" src="..."></iframe>

한 번에 여러 정책 제어

HTTP 헤더를 전송하여 여러 기능을 동시에 제어할 수 있음 ;로 구분된 정책 지시문 목록으로 바꿉니다.

Feature-Policy: unsized-media 'none'; geolocation 'self' https://example.com; camera *;

또는 정책마다 별도의 헤더를 전송합니다.

Feature-Policy: unsized-media 'none'
Feature-Policy: geolocation 'self' https://example.com
Feature-Policy: camera *;

이 예에서는 다음을 실행합니다.

모든 브라우징 컨텍스트에서 unsized-media 사용을 허용하지 않습니다.
다음을 제외한 모든 브라우징 컨텍스트에서 geolocation 사용을 허용하지 않습니다. 페이지의 자체 출처와 https://example.com를 지정해야 합니다.
모든 탐색 컨텍스트에서 camera 액세스를 허용합니다.

예 - iframe에 여러 정책 설정

<!-- Blocks the iframe from using the camera and microphone
     (if the browser supports feature policy). -->
<iframe allow="camera 'none'; microphone 'none'"></iframe>

JavaScript API

Chrome 60에서는 Feature-Policy HTTP 헤더 및 allow 속성을 사용하여 Chrome 74에 JavaScript API가 추가되었습니다.

이 API를 사용하면 클라이언트 측 코드가 구성할 수 있습니다. 다음에서 혜택에 액세스할 수 있습니다. 기본 문서의 경우 document.featurePolicy, 기본 문서의 경우 frame.featurePolicy iframe.

예

아래 예는 https://example.com 사이트의 Feature-Policy: geolocation 'self':

/* @return {Array<string>} List of feature policies allowed by the page. */
document.featurePolicy.allowedFeatures();
// → ["geolocation", "midi",  "camera", "usb", "autoplay",...]

/* @return {boolean} True if the page allows the 'geolocation' feature. */
document.featurePolicy.allowsFeature('geolocation');
// → true

/* @return {boolean} True if the provided origin allows the 'geolocation' feature. */
document.featurePolicy.allowsFeature(
  'geolocation',
  'https://another-example.com/'
);
// → false

/* @return {Array<string>} List of feature policies allowed by the browser
regardless of whether they are in force. */
document.featurePolicy.features();
// → ["geolocation", "midi",  "camera", "usb", "autoplay",...]

/* @return {Array<string>} List of origins (used throughout the page) that are
   allowed to use the 'geolocation' feature. */
document.featurePolicy.getAllowlistForFeature('geolocation');
// → ["https://example.com"]

정책 목록

그렇다면 기능 정책을 통해 제어할 수 있는 기능은 무엇일까요?

현재는 구현되는 정책에 관한 문서가 부족합니다. 자세히 알아보겠습니다. 또한 시간이 지남에 따라 다양한 브라우저가 지원되면서 다양한 정책을 구현할 수 있습니다 기능 정책이 이전됩니다 좋은 참고 문서가 필요합니다

지금은 몇 가지 방법으로 제어할 수 있는 기능을 확인할 수 있습니다.

데모의 기능 정책 키친 싱크를 확인하세요. 예시가 있음 각 정책에 대해 자세히 알아보겠습니다.
Chrome 소스 확인 를 참조하세요.
about:blank에서 document.featurePolicy.allowedFeatures()를 쿼리하여 목록을 찾습니다.

        ["geolocation",
         "midi",
         "camera",
         "usb",
         "magnetometer",
         "fullscreen",
         "animations",
         "payment",
         "picture-in-picture",
         "accelerometer",
         "vr",
        ...

chromestatus.com에서 Blink에서 구현되거나 고려 중인 프로세스입니다.

이러한 정책을 사용하는 방법을 알아보려면 사양의 GitHub 저장소를 참고하세요. 일부 정책에 대한 설명이 포함되어 있습니다.

FAQ

기능 정책은 언제 사용하나요?

모든 정책은 선택 항목이므로 적절한 경우 기능 정책을 사용해야 합니다. 대상 예를 들어 앱이 이미지 갤러리인 경우 maximum-downscaling-image 정책을 사용하면 모바일 표시 영역으로 대용량 이미지가 전송되는 것을 방지할 수 있습니다.

document-write 및 sync-xhr와 같은 다른 정책은 더 많은 정책과 함께 사용해야 합니다. 관리. 사용 설정하면 광고와 같은 서드 파티 콘텐츠가 차단될 수 있습니다. 일 반면 기능 정책은 페이지가 올바른지 절대로 이 끔찍한 API를 사용하지 마세요!

개발 또는 프로덕션 단계에서 기능 정책을 사용하나요?

둘 다요. 개발 중에는 정책을 사용 설정하고 정책이 프로덕션 단계에서 활성화됨 개발 중에 정책을 사용 설정하면 올바른 방향으로 시작하는 데 도움이 됩니다. 이렇게 하면 예상치 못한 상황을 포착할 수 있고 모델을 학습시킬 수 있습니다 프로덕션에서 정책을 사용 설정 상태로 유지 사용자의 특정 UX를 보장합니다.

서버에 정책 위반을 보고할 수 있는 방법이 있나요?

Reporting API 작업 중입니다. 사이트에서 이 제안에 대한 보고서를 수신하도록 선택할 수 있는 것과 CSP 위반 또는 지원 중단되는 경우 기능 정책 위반에 대한 신고를 받을 수 있음

iframe 콘텐츠에 대한 상속 규칙은 무엇인가요?

스크립트 (퍼스트 파티 또는 서드 파티)가 탐색 정책을 상속함 있습니다. 즉, 최상위 스크립트가 기본 문서의 정책을 상속합니다.

iframe는 상위 페이지의 정책을 상속합니다. iframe에 상위 페이지와 allow 간의 더 엄격한 정책인 allow 속성 이길 수도 있습니다. iframe 사용에 관한 자세한 내용은 iframe의 allow 속성을 사용합니다.

정책을 적용하면 페이지 탐색 시 정책이 유지되나요?

아니요. 정책의 전체 기간은 단일 페이지 탐색 응답을 위한 것입니다. 만약 사용자가 새 페이지로 이동하는 경우 Feature-Policy 헤더가 명시적으로 지정되어야 함 새 응답에서 전송됩니다.

어떤 브라우저가 기능 정책을 지원하나요?

최신 정보는 caniuse.com에서 확인하세요. 자세히 알아보세요.

현재 기능 정책을 지원하는 브라우저는 Chrome뿐입니다. 하지만 전체 API 노출 영역이 선택되거나 기능을 감지할 수 있으므로 기능 정책 점진적 개선에 적합합니다.

결론

기능 정책은 더 나은 UX 및 API를 개발하기 위한 얻을 수 있습니다. 앱을 개발하거나 유지할 때 특히 편리합니다. 코드베이스에 잠입하기 전에 잠재적인 풋총을 피하는 데 도움이 되기 때문입니다.

추가 리소스:

기능 정책 설명 자료
기능 정책 사양
주방 싱크대 데모
기능 정책 DevTools 확장 프로그램 - 페이지의 기능 정책을 사용해 볼 수 있는 테스터입니다.
chromestatus.com 항목

기능 정책 소개

요약

소개

기능 정책 사용

Feature-Policy HTTP 헤더

iframe allow 속성

기존 iframe 속성은 어떻게 되나요?

한 번에 여러 정책 제어

JavaScript API

예

정책 목록

FAQ

기능 정책은 언제 사용하나요?

개발 또는 프로덕션 단계에서 기능 정책을 사용하나요?

서버에 정책 위반을 보고할 수 있는 방법이 있나요?

iframe 콘텐츠에 대한 상속 규칙은 무엇인가요?

정책을 적용하면 페이지 탐색 시 정책이 유지되나요?

어떤 브라우저가 기능 정책을 지원하나요?

결론

`Feature-Policy` HTTP 헤더

iframe `allow` 속성