콘텐츠 보안 정책 가이드

이 문서에서는 Maps JavaScript API의 웹사이트 콘텐츠 보안 정책(CSP)을 구성하는 방법에 관한 권장사항을 제공합니다. 최종 사용자는 다양한 브라우저 유형과 버전을 사용하므로 개발자는 이 예를 참고하여 추가 CSP 위반이 발생하지 않도록 미세 조정하는 것이 좋습니다.

콘텐츠 보안 정책에 대해 자세히 알아보기

엄격한 CSP

허용 목록 CSP 대신 엄격한 CSP를 사용하여 보안 공격의 가능성을 줄이는 것이 좋습니다. Maps JavaScript API는 nonce 기반의 엄격한 CSP 사용을 지원합니다. 웹사이트는 script 및 style 요소를 모두 nonce 값으로 채워야 합니다. 내부적으로 Maps JavaScript API는 이러한 첫 번째 요소를 찾아 API 스크립트에서 삽입한 스타일 또는 스크립트 요소에 nonce 값을 각각 적용합니다.

예

다음 예는 샘플 CSP와 이 CSP가 삽입된 HTML 페이지를 보여줍니다.

콘텐츠 보안 정책 샘플

script-src 'nonce-{script value}' 'strict-dynamic' https: 'unsafe-eval' blob:;
img-src 'self' https://*.googleapis.com https://*.gstatic.com *.google.com *.googleusercontent.com data:;
frame-src *.google.com;
connect-src 'self' https://*.googleapis.com *.google.com https://*.gstatic.com data: blob:;
font-src https://fonts.gstatic.com;
style-src 'nonce-{style value}' https://fonts.googleapis.com;
worker-src blob:;

샘플 HTML 페이지

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="style.css" nonce="{style value}">
    <style nonce="{style value}">...</style>
    ...
  </head>
  <body>
    <div id="map"></div>
    <script src="https://maps.googleapis.com/maps/api/js?key=&callback=initMap" async nonce="{script value}"></script>
    <script nonce="{script value}"> function initMap() { ... } </script>
  </body>
</html>

허용 목록 CSP

허용 목록 CSP를 설정한 경우 Google 지도 도메인의 목록을 참고하세요. 이 문서와 Maps JavaScript API 출시 노트를 참고하여 최신 정보를 확인하고 필요한 경우 허용 목록에 새 서비스 도메인을 추가하는 것이 좋습니다.

기존 Google API 도메인(예: maps.google.com) 또는 지역별 도메인(예: maps.google.fr)에서 Maps JavaScript API를 로드하는 웹사이트는 다음 예와 같이 CSP script-src 설정에 다음 도메인 이름도 포함해야 합니다.

script-src 'self' 'unsafe-inline' 'unsafe-eval' https://*.googleapis.com https://*.gstatic.com *.google.com https://*.ggpht.com *.googleusercontent.com blob:;
img-src 'self' https://*.googleapis.com https://*.gstatic.com *.google.com  *.googleusercontent.com data:;
frame-src *.google.com;
connect-src 'self' https://*.googleapis.com *.google.com https://*.gstatic.com  data: blob:;
font-src https://fonts.gstatic.com;
style-src 'self' 'unsafe-inline' https://fonts.googleapis.com;
worker-src blob:;