콘텐츠 보안 정책 (CSP)에 익숙하지 않은 경우 콘텐츠 보안 소개 정책으로 시작해 보는 것도 좋습니다. 해당 문서에서는 CSP의 더 광범위한 웹 플랫폼 뷰를 다룹니다. Chrome 앱 CSP는 유연성이 떨어집니다.
CSP는 교차 사이트 스크립팅 문제를 완화하기 위한 정책입니다. 스크립트가 잘못되었습니다. CSP가 복잡하고 모호한 새 정책이라고 여러분을 설득하려고 하지 않을 것입니다. 관련 작업이 있습니다. 기본적인 작업을 다르게 수행하는 방법을 배워야 합니다.
이 문서의 목적은 Chrome 앱에 대한 CSP 정책이 무엇인지, 개발자가 무엇을 어떻게 해야 할 지 알아보고, 적절한 방식으로 이러한 기본적인 작업을 CSP 준수.
Chrome 앱용 CSP란 무엇인가요?
Chrome 앱의 콘텐츠 보안 정책에 따라 다음 작업은 수행할 수 없습니다.
- Chrome 앱 페이지에서는 인라인 스크립팅을 사용할 수 없습니다. 제한사항으로 인해
<script>차단이 모두 차단됩니다. 및 이벤트 핸들러 (<button onclick="...">)를 포함해야 합니다. - 앱 파일에서 외부 리소스를 참조할 수 없습니다 (동영상 및 오디오 제외). 리소스)를 제공합니다. 외부 리소스는 iframe에 삽입할 수 없습니다.
eval()및new Function()와 같은 문자열 간 자바스크립트 메서드는 사용할 수 없습니다.
이는 다음 정책 값을 통해 구현됩니다.
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 준수 방법
모든 JavaScript와 모든 리소스는 로컬이어야 합니다 (모든 것이 Chrome 앱에 패키징됨).
"그런데 어떻게..."
템플릿 라이브러리를 사용 중일 가능성이 매우 높으며 그중 대부분은 CSP에서 작동하지 않습니다. 앱의 외부 리소스 (외부 이미지, 웹사이트의 콘텐츠)에 액세스하는 것도 좋습니다.
템플릿 라이브러리 사용
사전 컴파일된 템플릿을 제공하는 라이브러리를 사용하면 됩니다. Cloud Storage에서 는 사전 컴파일을 제공하지 않지만 개발자가 약간의 작업을 수행해야 하며 제한사항이 있습니다.
'eval'을 수행하려는 모든 콘텐츠를 격리하려면 샌드박스를 사용해야 합니다. 할 수 있습니다. 샌드박스는 지정된 콘텐츠에서 CSP를 끌어올립니다. Chrome의 강력한 성능을 활용하고 싶다면 사용할 수 없는 경우 샌드박스 처리된 콘텐츠가 이러한 API와 직접 상호작용할 수 없습니다 (자세한 내용은 샌드박스 로컬 콘텐츠).
원격 리소스 액세스
XMLHttpRequest를 통해 원격 리소스를 가져오고 blob:, data: 또는
URL filesystem:개 (외부 리소스 참조 참고).
동영상 및 오디오는 원격 서비스에서 로드될 수 있습니다. 원격 서비스에서 로드할 수 있는 이유는 다음과 같은 경우 적절한 대체 동작이 있기 때문입니다. 오프라인 상태이거나 연결이 불안정할 수 있습니다.
웹 콘텐츠 삽입
iframe을 사용하는 대신 WebView 태그를 사용하여 외부 URL을 호출할 수 있습니다 (Embed 외부 웹페이지 참조).