콘텐츠 보안 정책 (CSP)에 익숙하지 않다면 먼저 콘텐츠 보안 정책 소개부터 읽어보시기 바랍니다. 이 문서에서는 CSP의 더 광범위한 웹 플랫폼 관점을 다루며 Chrome 앱 CSP는 그다지 유연하지 않습니다.
CSP는 교차 사이트 스크립팅 문제를 완화하기 위한 정책이며, 우리는 모두 교차 사이트 스크립팅이 부적절하다는 것을 알고 있습니다. Google은 CSP가 복잡하고 모호한 정책이라고 여러분에게 납득시키려고 하지 않을 것입니다. 여기에는 작업이 필요하며, 기본적인 작업을 다른 방식으로 수행하는 방법을 배워야 합니다.
이 문서의 목적은 Chrome 앱에 적용되는 CSP 정책, 정책을 준수하기 위해 필요한 조치, CSP를 준수하는 방식으로 이러한 기본 작업을 수행할 수 있는 방법을 정확히 설명하는 것입니다.
Chrome 앱용 CSP란 무엇인가요?
Chrome 앱의 콘텐츠 보안 정책에서는 다음 작업을 제한합니다.
- Chrome 앱 페이지에서는 인라인 스크립팅을 사용할 수 없습니다. 이 제한사항은
<script>블록과 이벤트 핸들러 (<button onclick="...">)를 모두 차단합니다. - 앱 파일에서 외부 리소스를 참조할 수 없습니다 (동영상 및 오디오 리소스 제외). iframe에 외부 리소스를 삽입할 수 없습니다.
eval()및new Function()같은 string-to-JavaScript 메서드는 사용할 수 없습니다.
이는 다음 정책 값을 통해 구현됩니다.
default-src 'self';
connect-src * data: blob: filesystem:;
style-src 'self' data: 'unsafe-inline';
img-src 'self' data:;
frame-src 'self' data:;
font-src 'self' data:;
media-src * data: blob: filesystem:;
Chrome 앱은 앱 내의 스크립트와 객체만 참조할 수 있습니다 (미디어 파일은 제외). 앱은 패키지 외부의 동영상 및 오디오를 참조할 수 있습니다. Chrome 확장 프로그램을 사용하면 기본 콘텐츠 보안 정책을 완화할 수 있지만 Chrome 앱에서는 완화하지 않습니다.
CSP를 준수하는 방법
모든 자바스크립트와 리소스는 로컬이어야 합니다 (모든 것이 Chrome 앱에 패키징됨).
"그런데 어떻게..."
템플릿 라이브러리를 사용 중일 가능성이 매우 높으며 이러한 라이브러리 중 다수는 CSP와 호환되지 않습니다. 또한 앱의 외부 리소스 (외부 이미지, 웹사이트 콘텐츠)에 액세스하는 것이 좋습니다.
템플릿 라이브러리 사용
사전 컴파일된 템플릿을 제공하는 라이브러리를 사용하면 모든 준비가 완료됩니다. 사전 컴파일을 제공하지 않는 라이브러리를 사용할 수도 있지만 개발자가 약간의 작업을 해야 하고 제한사항이 있습니다.
'평가'하려는 모든 콘텐츠를 격리하려면 샌드박스를 사용해야 합니다. 샌드박스는 지정된 콘텐츠에서 CSP를 상승시킵니다. Chrome 앱에서 매우 강력한 Chrome API를 사용하려면 샌드박스 처리된 콘텐츠가 이러한 API와 직접 상호작용할 수 없습니다 (샌드박스 로컬 콘텐츠 참고).
원격 리소스 액세스
XMLHttpRequest를 통해 원격 리소스를 가져오고 blob:, data: 또는 filesystem: URL을 통해 이를 제공할 수 있습니다 (외부 리소스 참조 참고).
동영상 및 오디오는 오프라인이거나 연결이 불안정할 때 대체 동작이 양호하므로 원격 서비스에서 로드할 수 있습니다.
웹 콘텐츠 삽입
iframe을 사용하는 대신 WebView 태그를 사용하여 외부 URL을 호출할 수 있습니다 (외부 웹페이지 삽입 참고).