Chrome 앱 보안 모델에서는 iframe 내의 외부 콘텐츠 및 인라인 콘텐츠 사용을 허용하지 않습니다.
스크립팅 및 eval(). 이러한 제한사항을 재정의할 수 있지만 외부 콘텐츠는
앱으로부터 격리할 수 있습니다
격리된 콘텐츠는 앱의 데이터나 API에 직접 액세스할 수 없습니다. 교차 출처 사용 이벤트 페이지와 샌드박스 콘텐츠 간에 통신하기 위한 XMLHttpRequests 및 사후 메시지 전달과 API에 간접적으로 액세스할 수 있습니다
외부 리소스 참조
앱에서 사용하는 콘텐츠 보안 정책은 여러 종류의 원격 URL 사용을 허용하지 않으므로
앱 페이지에서 외부 이미지, 스타일시트 또는 글꼴을 직접 참조할 수 없음 대신
교차 출처 XMLHttpRequests를 사용하여 이러한 리소스를 가져온 다음 blob: URL을 통해 제공합니다.
매니페스트 요구사항
교차 출처 XMLHttpRequests를 수행하려면 원격 URL의 호스트:
"permissions": [
"...",
"https://supersweetdomainbutnotcspfriendly.com/"
]
교차 출처 XMLHttpRequest
원격 URL을 앱으로 가져와 콘텐츠를 blob: URL로 제공합니다.
var xhr = new XMLHttpRequest();
xhr.open('GET', 'https://supersweetdomainbutnotcspfriendly.com/image.png', true);
xhr.responseType = 'blob';
xhr.onload = function(e) {
var img = document.createElement('img');
img.src = window.URL.createObjectURL(this.response);
document.body.appendChild(img);
};
xhr.send();
오프라인에서 사용할 수 있도록 이러한 리소스를 로컬에 저장하는 것이 좋습니다.
외부 웹페이지 삽입
webview 태그를 사용하면 외부 웹 콘텐츠(예: 웹 앱)를 앱에 삽입할 수 있습니다.
있습니다. 이 도구는 Chrome 앱 내에서 사용 중지된 원격 URL을 가리키는 iframe을 대체합니다. 좋아요 취소
iframe에서는 webview 태그가 별도의 프로세스에서 실행됩니다. 이것은 내부의 익스플로잇이
여전히 격리되어 높은 권한을 얻을 수 없습니다. 게다가 스토리지는
앱으로부터 격리되어 있는 경우 웹 콘텐츠가
앱 데이터에 액세스할 수 있습니다.
WebView 요소 추가
webview 요소는 소스 콘텐츠의 URL을 포함하고 크기를 지정해야 합니다.
<webview src="http://news.google.com/" width="640" height="480"></webview>
속성 업데이트
webview 태그의 src, width, height 속성을 동적으로 변경하려면 다음 방법 중 하나를 사용하세요.
이러한 속성을 JavaScript 객체에서 직접 설정하거나 setAttribute DOM 함수를 사용합니다.
document.querySelector('#mywebview').src =
'http://blog.chromium.org/';
// or
document.querySelector('#mywebview').setAttribute(
'src', 'http://blog.chromium.org/');
샌드박스 로컬 콘텐츠
샌드박스를 사용하면 지정된 페이지를 샌드박스 처리된 고유한 출처에서 제공할 수 있습니다. 그러면 이러한 페이지는
제외해야 합니다. 샌드박스 페이지는 iframe, 인라인 스크립팅 및
eval() sandbox의 매니페스트 필드 설명을 확인하세요.
하지만 샌드박스 처리된 페이지에서는 Chrome을 사용할 수 없습니다.* 데이터에 액세스할 수 있습니다 다음과 같은 작업을 해야 하는 경우
eval()님, CSP에서 제외되도록 이 경로로 이동하세요. 하지만 새로운 멋진 기능은 사용할 수 없습니다.
샌드박스에서 인라인 스크립트 사용
다음은 인라인 스크립트와 eval()를 사용하는 샌드박스 페이지의 샘플입니다.
<html>
<body>
<h1>Woot</h1>
<script>
eval('console.log(\'I am an eval-ed inline script.\')');
</script>
</body>
</html>
매니페스트에 샌드박스 포함
매니페스트에 sandbox 필드를 포함하고
샌드박스:
"sandbox": {
"pages": ["sandboxed.html"]
}
창에서 샌드박스 페이지 열기
다른 앱 페이지와 마찬가지로 샌드박스 페이지가 열리는 창을 만들 수 있습니다. 이 이 샘플을 두 개의 창, 즉 샌드박스 처리되지 않은 기본 앱 창과 샌드박스 페이지:
chrome.app.runtime.onLaunched.addListener(function() {
chrome.app.window.create('window.html', {
'bounds': {
'width': 400,
'height': 400,
'left': 0,
'top': 0
}
});
chrome.app.window.create('sandboxed.html', {
'bounds': {
'width': 400,
'height': 400,
'left': 400,
'top': 0
}
});
});
앱 페이지에 샌드박스 페이지 삽입
샌드박스 페이지는 iframe를 사용하여 다른 앱 페이지 내에 삽입할 수도 있습니다.
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<p>I am normal app window.</p>
<iframe src="sandboxed.html" width="300" height="200"></iframe>
</body>
</html>
샌드박스 페이지로 메일 전송
메시지 보내기는 두 부분으로 나뉩니다. 보낸 사람 페이지/창에서 메시지를 게시해야 하는 경우, 수신 페이지/창의 메시지를 수신할 수 있습니다.
메시지 게시
postMessage를 사용하여 앱과 샌드박스 콘텐츠 간에 통신할 수 있습니다. 다음은 샘플입니다
메시지를 게시하는 백그라운드 스크립트에 추가합니다.
var myWin = null;
chrome.app.runtime.onLaunched.addListener(function() {
chrome.app.window.create('sandboxed.html', {
'bounds': {
'width': 400,
'height': 400
}
}, function(win) {
myWin = win;
myWin.contentWindow.postMessage('Just wanted to say hey.', '*');
});
});
일반적으로 웹에서는 메시지가 전송되는 정확한 출처를 지정하는 것이 좋습니다. Chrome 앱에서는 샌드박스 처리된 콘텐츠의 고유한 출처에 액세스할 수 없으므로 모든 콘텐츠를 허용 목록에 추가할 수만 있습니다. 출처('*')가 허용되는 출처로 표기합니다. 수신 측에서는 일반적으로 출처를 확인하는 것이 좋습니다. Chrome 앱 콘텐츠는 포함되어 있기 때문에 필요하지 않습니다. 자세한 내용은 window.postMessage.
메시지 듣기 및 답장
다음은 샌드박스 페이지에 추가되는 샘플 메시지 수신자입니다.
var messageHandler = function(event) {
console.log('Background script says hello.', event.data);
// Send a reply
event.source.postMessage(
{'reply': 'Sandbox received: ' + event.data}, event.origin);
};
window.addEventListener('message', messageHandler);
자세한 내용은 샌드박스 샘플을 확인하세요.