기능 정책으로 사이트 보호

게시 됨: 2022-03-10
빠른 요약 ↬ 기능 정책은 보안 및 개인 정보 보호에 영향을 미치는 API를 사용하는 제3자로부터 귀하의 사이트를 보호하는 데 도움이 될 수 있으며, 또한 귀하의 팀에서 오래된 API 또는 최적화되지 않은 이미지를 추가하는 것을 방지할 수 있습니다. 방법을 찾아.

최근 Chrome Dev Summit에서 강조된 웹 플랫폼 기능 중 하나는 "사이트 작성자가 다양한 브라우저 기능 및 API의 사용을 선택적으로 활성화 및 비활성화할 수 있도록 허용"하는 것을 목표로 하는 기능 정책이었습니다. 이 기사에서는 몇 가지 실용적인 예와 함께 이것이 웹 개발자에게 무엇을 의미하는지 살펴볼 것입니다.

Google 개발자 사이트의 소개 기사에서 Eric Bidelman은 기능 정책을 다음과 같이 설명합니다.

"기능 정책 자체는 고품질 웹 앱을 구축(및 유지 관리)하려는 우리의 목표를 촉진하는 데 도움이 될 수 있는 개발자와 브라우저 간의 작은 옵트인 계약입니다."

사양은 웹 플랫폼 인큐베이터 그룹 활동의 일부로 Google에서 개발되었습니다. 기능 정책의 목표는 웹 개발자인 우리가 웹 플랫폼 기능의 사용을 브라우저에 명시적으로 설명할 수 있도록 하는 것입니다. 그렇게 함으로써 우리는 이 특정 기능을 사용하거나 사용하지 않는 것에 대해 동의합니다. 이를 기반으로 브라우저는 특정 기능을 차단하거나 예상하지 못한 기능이 사용 중임을 보고할 수 있습니다.

예는 다음과 같습니다.

  1. iframe을 포함하고 있는데 포함된 사이트가 방문자의 카메라에 액세스하는 것을 원하지 않습니다.
  2. 최적화되지 않은 이미지가 CMS를 통해 내 사이트에 배포되는 상황을 포착하고 싶습니다.
  3. 제 프로젝트에 많은 개발자들이 작업하고 있는데 그들이 document.write 와 같은 구식 API를 사용하는지 알고 싶습니다.

이러한 모든 사항은 기능 정책의 일부로 추적, 차단 또는 보고될 수 있습니다.

기능 정책 사용 방법

기능 정책을 사용하려면 브라우저가 두 가지 사항, 즉 정책을 생성하는 기능과 해당 기능을 처리하는 방법을 알아야 합니다.

 Feature-Policy: <directive> <allowlist>

<directive> 는 정책을 설정하는 기능의 이름입니다.

점프 후 더! 아래에서 계속 읽기 ↓

현재 기능 목록(Chrome Dev Summit에서 제공한 프레젠테이션에서 제공)은 다음과 같습니다.

  • 가속도계
  • 주변 광 센서
  • 자동 재생
  • 카메라
  • 문서 쓰기
  • 암호화된 미디어
  • 전체 화면
  • 지리적 위치
  • 자이로스코프
  • 레이아웃 애니메이션
  • 게으른로드
  • 레거시 이미지 형식
  • 자력계
  • 미디
  • 특대 이미지
  • 지불
  • 픽처 인 픽처
  • 스피커
  • 동기화 스크립트
  • sync-xhr
  • 최적화되지 않은 이미지
  • 크기가 없는 미디어
  • USB
  • 세로 스크롤
  • VR

<allowlist> 는 기능을 사용할 수 있는 방법을 자세히 설명하며(사용하는 경우) 다음 값 중 하나 이상을 사용합니다.

  • *
    이 문서와 이 도메인 또는 다른 곳의 모든 iframe에서 해당 기능이 허용된다는 가장 자유로운 정책입니다. 예를 들어 모든 것을 활성화하고 도메인 목록을 전달하는 것은 의미가 없으므로 단일 값으로만 ​​사용할 수 있습니다.
  • self
    이 기능은 문서와 모든 iframe에서 사용할 수 있지만 iframe의 출처는 동일해야 합니다.
  • src
    iframe allow 속성을 사용할 때만 적용됩니다. 이것은 로드된 문서가 iframe의 src 속성에 있는 URL과 동일한 출처에서 오는 한 기능을 허용합니다.
  • none
    문서 및 모든 중첩된 iframe에 대한 기능을 비활성화합니다. 단일 값으로만 ​​사용할 수 있습니다.
  • <origin(s)>
    이 기능은 특정 출처에 대해 허용됩니다. 즉, 기능이 허용되는 도메인 목록을 지정할 수 있습니다. 도메인 목록은 공백으로 구분됩니다.

사이트에서 기능 정책을 활성화할 수 있는 두 가지 방법이 있습니다. HTTP 헤더를 보내거나 iframe에서 allow 속성을 사용할 수 있습니다.

HTTP 헤더

HTTP 헤더를 보낸다는 것은 해당 헤더를 설정하는 페이지 또는 전체 사이트에 대한 기능 정책과 사이트에 포함된 모든 항목을 활성화할 수 있음을 의미합니다. 헤더는 웹 서버에서 전체 사이트에 대해 설정하거나 애플리케이션에서 보낼 수 있습니다.

예를 들어 Geolocation API의 사용을 방지하고 NGINX 웹 서버를 사용하고 있는 경우 NGINX에서 내 사이트에 대한 구성 파일을 편집하여 다음 헤더를 추가할 수 있습니다. Geolocation API를 사용하여 내장된 iframe입니다.

 add_header Feature-Policy "geolocation none;";

단일 헤더에 여러 정책을 설정할 수 있습니다. 지리적 위치 및 진동을 방지하지만 example.com 도메인에서 unsized-media 를 허용하려면 다음을 설정할 수 있습니다.

 add_header Feature-Policy "vibrate none; geolocation none; unsized-media https://example.com;";

iFrame에서 속성 allow

iframe의 콘텐츠에 어떤 일이 발생하는지 주로 우려하는 경우 iframe 자체에서 기능 정책을 사용할 수 있습니다. 이것은 이 사용을 지원하는 Chrome 및 Safari로 작성하는 시점에서 약간 더 나은 브라우저 지원의 이점이 있습니다.

사이트를 포함하고 해당 사이트에서 지리적 위치, 카메라 또는 마이크 API를 사용하지 않도록 하는 경우 내 iframe은 다음 예와 같습니다.

 <iframe allow="geolocation 'none'; camera 'none'; microphone 'none'">

allowfullscreen , allowpaymentrequest 및 allowusermedia 의 내용을 제어하는 ​​개별 속성에 이미 익숙할 것입니다. 이는 기능 정책 allow 속성으로 대체될 수 있으며 브라우저 호환성을 위해 iframe에서 둘 다 사용할 수 있습니다. 두 속성을 모두 사용하는 경우 가장 제한적인 속성이 적용됩니다. Google 기사는 allowfullscreen 을 사용하는 iframe의 예를 보여줍니다. 즉, iframe이 전체 화면으로 들어갈 수 있지만 fullscreen none 이라는 충돌하는 기능 정책이 있음을 의미합니다. 이러한 충돌로 인해 가장 제한적인 정책이 우선 적용되며 이 iframe은 전체 화면으로 전환할 수 없습니다.

 <iframe allowfullscreen allow="fullscreen 'none'" src="...">

iframe 요소에는 많은 기능에 대한 지원을 관리하도록 설계된 sandbox 속성도 있습니다. 이 기능은 또한 모든 샌드박스 기능을 비활성화하는 sandbox 값을 사용하여 콘텐츠 보안 정책에 추가되었습니다. 그러면 선택적으로 다시 선택할 수 있습니다. 샌드박스 기능과 기능 정책에 의해 제어되는 기능 간에 일부 교차가 있으며 기능 정책은 샌드박스에 의해 이미 적용된 값을 복제하지 않습니다. 그러나 하나의 대규모 정책 집합으로 모든 것을 전 세계적으로 해제하는 것보다 이러한 정책을 관리하는 데 보다 세분화된 접근 방식을 취함으로써 샌드박스의 일부 제한 사항을 해결합니다.

기능 정책 및 보고 API

기능 정책 위반은 보고 API를 통해 보고할 수 있습니다. 즉, 사이트 전체에서 기능 사용을 추적하는 포괄적인 정책 세트를 개발할 수 있습니다. 이것은 사용자에게 완전히 투명하지만 기능이 어떻게 사용되었는지에 대한 엄청난 양의 정보를 제공합니다.

기능 정책에 대한 브라우저 지원

현재 기능 정책에 대한 브라우저 지원은 Chrome으로 제한되지만 개발 중 기능 정책을 사용하고 사이트를 미리 볼 때 이것이 반드시 문제가 되는 것은 아닙니다.

아래에서 설명할 많은 사용 사례는 지원 없이 브라우저를 사용하는 사이트 방문자에게 영향을 주지 않고 현재 사용할 수 있습니다.

기능 정책을 사용하는 경우

기능 정책을 사용하여 사이트를 개발할 때 내린 결정을 백업할 수 있다는 아이디어가 정말 마음에 듭니다. 성과 예산과 같은 문서에 기록되거나 GDPR 감사의 일부로 작성될 수 있지만 사이트의 수명 동안 보존하기 위해 기억해야 하는 결정 사항입니다. 여러 사람이 한 사이트에서 작업할 때 항상 쉬운 일이 아닙니다. 초기 의사 결정에 관여하지 않았거나 단순히 요구 사항을 인식하지 못한 사람들. 우리는 제3자가 어떻게든 우리 사이트에 영향을 미치기 위해 관리하는 것에 대해 많이 생각하지만, 때때로 우리 사이트는 우리 자신으로부터 보호해야 합니다!

제3자 감시

allow 속성이 있는 iframe의 기능 정책을 사용하여 타사 사이트가 카메라 또는 마이크에 액세스하는 것을 방지할 수 있습니다. 해당 사이트를 포함하는 이유가 해당 기능과 관련이 없는 경우 해당 기능을 비활성화하면 사이트에서 해당 기능을 요청할 수 없습니다. 그런 다음 GDPR 준수를 보장하기 위한 프로세스와 연결될 수 있습니다. 사이트의 개인 정보 보호 영향을 감사할 때 기능 정책을 통해 제3자의 액세스를 잠그는 프로세스를 구축하여 귀하와 방문자에게 추가적인 보안과 마음의 평화를 제공할 수 있습니다.

이 사용 은 기능 정책에 대한 브라우저 지원에 의존하여 사용을 차단합니다. 그러나 기능 정책 보고 모드를 사용하여 제3자가 수행할 작업을 변경한 경우 이러한 API의 사용을 알릴 수 있습니다. 이렇게 하면 기본적으로 Chrome을 사용하는 첫 번째 사용자가 사이트를 방문하는 즉시 매우 빠른 알림을 받을 수 있습니다.

기능을 선택적으로 활성화

또한 일반적으로 차단되는 일부 기능을 선택적으로 활성화할 수도 있습니다. 아마도 우리는 다른 사이트에서 콘텐츠를 로드하는 iframe이 브라우저에서 지리적 위치 기능을 사용하도록 허용하기를 원할 것입니다. Chrome은 기본적으로 이를 차단하지만 신뢰할 수 있는 사이트에서 콘텐츠를 로드하는 경우 기능 정책을 사용하여 교차 출처 요청을 활성화할 수 있습니다. 즉, 제어 하에 있는 다른 도메인에서 콘텐츠를 로드할 때 기능을 안전하게 켤 수 있습니다.

오래된 API 사용 및 성능 저하 기능 포착

기능 정책은 보고서 전용 모드에서 실행할 수 있습니다. 그런 다음 특정 기능의 사용을 추적하고 사이트에서 해당 기능이 발견되면 알려줍니다. 이것은 많은 시나리오에서 유용할 수 있습니다. 레거시 코드가 많은 매우 큰 사이트가 있는 경우 기능 정책을 활성화하면 주의가 필요한 위치를 추적하는 데 도움이 됩니다. 대규모 팀과 함께 작업하는 경우(특히 개발자가 종종 타사 코드 라이브러리를 가져오는 경우) 기능 정책은 사이트에서 보고 싶지 않은 것을 포착할 수 있습니다.

최적화되지 않은 이미지 다루기

내가 본 기능 정책에 대한 대부분의 기사는 보안 및 개인 정보 보호 측면에 집중되어 있지만 이미지 최적화와 관련된 기능은 기술 및 비기술 사용자가 생성한 많은 콘텐츠를 다루는 사람으로서 저에게 정말 매력적이었습니다. 기능 정책을 사용하면 방문자가 너무 크거나 최적화되지 않은 이미지를 다운로드하는 것을 방지하여 사이트 성능과 사용자 경험을 보호할 수 있습니다.

이상적인 세계에서 CMS는 이미지 관리를 처리하여 이미지의 크기를 현명하게 조정하고 웹과 이미지가 표시되는 컨텍스트에 최적화합니다. 그러나 실생활은 이상적인 세계가 아니므로 때때로 크기 조정 작업을 수행합니다. 이미지 최적화는 콘텐츠 편집자가 웹에 거대한 이미지를 업로드하지 않도록 하는 일입니다. 이는 콘텐츠 관리 레이어가 없는 정적 CMS를 사용하는 경우 특히 문제입니다. 기술 담당자라도 폴더에 자리 표시자로 표시한 거대한 스크린샷이나 카메라 이미지의 크기를 조정하는 것을 잊는 것은 매우 쉽습니다.

현재 Chrome의 플래그 뒤에는 도움이 될 수 있는 기능이 있습니다. 이러한 기능의 이면에 있는 아이디어는 문제가 있는 이미지를 강조 표시하여 사이트를 완전히 손상시키지 않고 수정할 수 있도록 하는 것입니다.

unsized-media 기능 정책은 HTML 또는 CSS에 크기가 설정되지 않은 이미지 또는 비디오를 찾습니다. 크기가 조정되지 않은 미디어 요소가 로드되면 페이지의 콘텐츠가 리플로우될 수 있습니다.

크기가 조정되지 않은 미디어가 사이트에 추가되는 것을 방지하려면 다음 헤더를 설정하십시오. 그러면 미디어가 300×150 픽셀의 기본 크기로 표시됩니다. 사이트가 작은 미디어로 로드되는 것을 보고 수정할 문제가 있음을 알게 됩니다.

 Feature-Policy: unsized-media 'none'

데모를 참조하세요(실험적 웹 플랫폼 기능이 있는 Chrome Canary 필요).

oversized-images 기능 정책은 이미지가 컨테이너보다 크지 않은지 확인합니다. 그렇다면 자리 표시자가 대신 표시됩니다. 이 정책은 모바일 사용자에게 거대한 데스크톱 이미지를 전송하지 않는지 확인하는 데 매우 유용합니다.

 Feature-Policy: oversized-images 'none'

데모를 참조하세요(실험적 웹 플랫폼 기능이 있는 Chrome Canary 필요).

unoptimized-images 기능 정책은 이미지의 데이터 크기(바이트)가 렌더링 영역(픽셀)보다 0.5배 이상 크지 않은지 확인합니다. 이 정책을 사용하고 이미지가 정책을 위반하는 경우 이미지 대신 자리 표시자가 표시됩니다.

 Feature-Policy: unoptimized-images 'none'

데모를 참조하세요(실험적 웹 플랫폼 기능이 있는 Chrome Canary 필요).

기능 정책에 대한 테스트 및 보고

Chrome DevTools는 특정 기능이 기능 정책에 의해 차단되거나 활성화되었음을 알리는 메시지를 표시합니다. 사이트에서 기능 정책을 활성화했다면 이것이 작동하는지 확인할 수 있습니다.

기능 정책에 대한 지원도 보안 헤더 사이트에 추가되었습니다. 즉, 사이트 또는 웹의 다른 사이트에서 콘텐츠 보안 정책과 같은 헤더와 함께 이를 확인할 수 있습니다.

다양한 기능 정책을 켜고 끌 수 있는 Chrome DevTools 확장 프로그램이 있습니다(헤더를 구성할 필요 없이 페이지를 확인하는 좋은 방법이기도 함).

기능 정책을 보고 API와 통합하려는 경우 이 작업을 수행하는 방법에 대한 추가 정보가 여기에 있습니다.

추가 읽을거리 및 리소스

나는 이 기사를 조사할 때 사용한 많은 리소스를 찾았습니다. 이것들은 당신의 애플리케이션에서 기능 정책 구현을 시작하는 데 필요한 모든 것을 제공해야 합니다. 이미 콘텐츠 보안 정책을 사용하고 있다면 이는 사이트를 사용하는 사람들의 보안과 개인 정보를 보호하기 위해 브라우저에서 사이트가 작동하는 방식을 제어하는 ​​추가 논리적 단계인 것 같습니다. 기능 정책을 사용하여 시간이 지남에 따라 사이트에 추가되는 성능 저하 요소를 파악하는 데 도움이 되는 추가 보너스가 있습니다.

  • 기능 정책 사양
  • 기능 정책 소개
  • Chrome Dev Summit에서 보기
  • MDN의 기능 정책
  • 기능 정책을 사용할 수 있습니까?
  • 기능 정책 데모
  • Nginx에서 기능 정책, 참조자 정책 및 콘텐츠 보안 정책 헤더 설정