Permissions-Policy 헤더로 조금 더 안전하게 Browser API 사용하기

hahwul

Apr 09, 2022

오늘은 Permissions-Policy(구 Feature Policy) 헤더에 대해 잠깐 이야기할까 합니다.

Permissions-Policy

Permissions Policy는 Feature Policy는 라고도 불리는 보안 정책 헤더이며 개발자가 다양한 브라우저 기능 및 API의 사용을 선택적으로 활성화 및 비활성화할 수 있는 메커니즘을 정의합니다. 전반적인 동작 방식은 CSP(Content-Security-Policy)와 유사합니다. 다만 CSP가 통제하는 성향의 정책이라면 Permissions Policy는 기능을 제어하는 정책입니다.

참고로 여기서 말한 기능이란 카메라, GPS와 같이 브라우저의 기능들을 의미합니다. 문법은 CSP와 동일하게 directive와 allowlist로 명시합니다.

Permissions-Policy

Permissions-Policy: directive=(allowlist), directive=(allowlist)

e.g

Permissions-Policy: fullscreen=(), geolocation=()

Feature-Policy

Feature-Policy: directive ‘allowlist’

e.g

Feature-Policy: geolocation 'none'

Allowlist

Permissions-Policy는 special value인 *과 나머지 3개의, 즉 총 4개의 Allowlist를 지원합니다. 여기서 기본 값은 * self (최상위에서만) 입니다.

*: 모든 곳에서 허용
self: Same Origin 에서만 허용
src: iframe의 src가 부모와 Same Origin인 경우 허용
none: 사용 불가

Directives

각 Browser 별 API가 포함되기 때문에 양이 굉장히 많습니다. 아래 w3c에서 정리한 features 문서를 참고해주세요!

https://github.com/w3c/webappsec-permissions-policy/blob/main/features.md

그리고 대표적인 API는 아래와 같습니다.

Geolocation
Camera
Microphone
Notifications
Background Sync
USB

또한 이 페이지에서 브라우저 별 지원 하는 directive를 확인할 수 있습니다.

In Iframe

allow 속성을 통해 iframe에서 Permissions-Policy를 사용할 수 있습니다.

<iframe src="src" allow="geolocation"></iframe>

Why use?

최근 브라우저는 엄청나게 많은 API를 제공해주고 있기 때문에 단순히 웹을 탐색하는 도구 뿐만 아니라 위치, 마이크, 카메라부터 우리가 잘 모르는 장치까지 지원하고 있습니다. 이러한 API는 Javascript를 통해 통제할 수 있기 때문에 XSS가 꾸준히 웹에서 최고의 취약점으로 불릴만한 이유가 됩니다.

그래서 아래 코드처럼 geolocation을 읽는 XSS 코드를 작성한다면 사용자의 위치정보도 노려볼 수 있게됩니다.

// 위치 정보를 읽어 alert
function getLocation() {
  if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(function(position) {
      alert(position.coords.latitude + ' ' + position.coords.longitude);
    }, function(error) {
      console.error(error);
    }, {
      enableHighAccuracy: false,
      maximumAge: 0,
      timeout: Infinity
    });
  }
}
getLocation();