외부 콘텐츠

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);

자세한 내용은 샌드박스 샘플을 확인하세요.