Chrome 확장 프로그램에서 평가 사용

Chrome의 확장 프로그램 시스템은 매우 엄격한 기본 콘텐츠 보안 정책 (CSP)을 시행합니다. 정책 제한은 간단합니다. 스크립트를 줄 바깥으로 별도로 옮겨야 함 addEventListener를 사용하도록 JavaScript 파일과 인라인 이벤트 핸들러를 변환해야 하며, eval()는 사용 중지됩니다. Chrome 앱에는 더욱 엄격한 정책이 적용되며 Google은 속성에 따라 다릅니다.

하지만 다양한 라이브러리가 다음과 같은 eval() 및 eval와 유사한 구조를 사용한다는 것을 알고 있습니다. new Function(): 성능 최적화 및 표현 용이성 템플릿 라이브러리는 이러한 구현 스타일에 특히 취약할 수 있습니다. 일부 코드 (예: Angular.js)는 CSP 외부를 지원하지만 널리 사용되는 많은 프레임워크는 아직 Android 및 iOS 기기와 호환되는 광고 확장' eval이(가) 적은 세상을 즐기세요. 따라서 해당 기능에 대한 지원을 중단하는 것이 더 많은 것으로 입증되었습니다. 문제가 될 수 있습니다.

이 문서에서는 이러한 라이브러리를 프로젝트에 포함하는 안전한 메커니즘인 샌드박스를 소개합니다. 데이터를 수집, 저장, 사용할 수 있습니다 간결함을 위해 여기서는 확장이라는 용어를 사용하겠지만 개념이 애플리케이션에 동일하게 적용됩니다

샌드박스를 사용해야 하는 이유

eval는 확장 프로그램 내에서 위험합니다. 실행하는 코드가 높은 권한의 환경을 제공합니다. 다음과 같은 강력한 chrome.* API를 사용할 수 있습니다. 사용자의 보안 및 개인 정보 보호에 심각한 영향을 미치는 경우 간단한 데이터 무단 반출은 가장 사소한 걱정입니다. 제공되는 솔루션은 eval가 확장 프로그램의 데이터 또는 확장 프로그램의 고가치 API입니다. 데이터도, API도, 문제도 없습니다.

이를 위해 확장 프로그램 패키지 내의 특정 HTML 파일을 샌드박스 처리 중인 것으로 나열합니다. 샌드박스 페이지가 로드될 때마다 고유한 출처로 이동되며 거부됩니다. chrome.* API에 액세스할 수 있습니다. iframe를 통해 이 샌드박스 페이지를 확장 프로그램에 로드하면 메시지를 전달하고 어떤 식으로든 해당 메시지에 대해 조치를 취하도록 한 다음 표시됩니다. 이 간단한 메시지 메커니즘은 eval 기반의 안전한 포함하는 데 필요한 모든 것을 제공합니다. 코드를 작성해야 합니다.

샌드박스 생성 및 사용

바로 코드를 작성하려면 샌드박스 샘플 확장 프로그램을 다운로드하여 사용 중지합니다. 이는 핸들바 위에 빌드된 작은 메시지 API의 실제 예입니다. 이 템플릿 라이브러리에는 시작하는 데 필요한 모든 것이 들어 있습니다. 이러한 문제를 해결하고자 하는 이 샘플을 함께 살펴보겠습니다.

매니페스트에 파일 나열

샌드박스 내에서 실행해야 하는 각 파일은 sandbox 속성입니다. 이 단계는 매우 중요하며 잊어버리기 쉬우니 다시 한번 확인하시기 바랍니다. 매니페스트에 샌드박스 파일이 나열됩니다. 이 샘플에서는 파일을 스마트하게 샌드박스 처리하여 'sandbox.html'이라고 되어 있습니다 매니페스트 항목은 다음과 같습니다.

{
  ...,
  "sandbox": {
     "pages": ["sandbox.html"]
  },
  ...
}

샌드박스 파일 로드

샌드박스 파일에서 흥미로운 작업을 하려면 확장 프로그램의 코드로 해결할 수 있습니다. 여기에서 sandbox.html이 확장 프로그램의 이벤트 페이지 (eventpage.html)를 iframe를 통해 전달합니다. eventpage.js에 코드가 포함됨 이 클래스는 브라우저 작업을 클릭할 때마다 iframe 페이지를 확장하고 contentWindow에서 postMessage 메서드를 실행합니다. 메시지는 객체임 두 속성 context 및 command 포함 잠시 후 두 가지에 대해 모두 살펴보겠습니다.

chrome.browserAction.onClicked.addListener(function() {
 var iframe = document.getElementById('theFrame');
 var message = {
   command: 'render',
   context: {thing: 'world'}
 };
 iframe.contentWindow.postMessage(message, '*');
});

위험한 행동

sandbox.html가 로드되면 Handlebars 라이브러리를 로드하고 인라인을 만들고 컴파일합니다. 템플릿을 다음과 같이 사용합니다.

<script src="handlebars-1.0.0.beta.6.js"></script>
<script id="hello-world-template" type="text/x-handlebars-template">
  <div class="entry">
    <h1>Hello, !</h1>
  </div>
</script>
<script>
  var templates = [];
  var source = document.getElementById('hello-world-template').innerHTML;
  templates['hello'] = Handlebars.compile(source);
</script>

이 작업은 실패하지 않습니다. Handlebars.compile에서 new Function를 사용하더라도 정상적으로 작동합니다. 정확히 예상대로 정확하게 templates['hello']에 컴파일된 템플릿이 만들어집니다.

결과 반환

명령을 수락하는 메시지 리스너를 설정하여 이 템플릿을 사용할 수 있도록 하겠습니다. 이벤트 페이지에서 삭제합니다. 전달된 command를 사용하여 해야 할 작업을 결정합니다( 단순히 렌더링 이상의 작업을 하는 것을 상상해 보세요. 어떻게 해야 할까요? 아마도 이 제품을 다른 곳에서 관리하고 어떻게 해야 할까요?)하고 context는 렌더링을 위해 템플릿에 직접 전달됩니다. 렌더링된 HTML 확장 프로그램이 나중에 유용한 작업을 수행할 수 있도록 이벤트 페이지로 다시 전달됩니다.

<script>
  window.addEventListener('message', function(event) {
    var command = event.data.command;
    var name = event.data.name || 'hello';
    switch(command) {
      case 'render':
        event.source.postMessage({
          name: name,
          html: templates[name](event.data.context)
        }, event.origin);
        break;

      // case 'somethingElse':
      //   ...
    }
  });
</script>

이벤트 페이지로 돌아가면 이 메시지가 전송되고 html 데이터를 전달하는 방법입니다. 이 경우 단순히 데스크톱 알림을 통해 에코를 출력하지만 확장 프로그램 UI의 일부로 이 HTML을 안전하게 사용하는 것이 전적으로 가능합니다. 다음을 통해 삽입하기 innerHTML은(는) 샌드박스 처리된 애플리케이션이 완전히 손상되더라도 심각한 보안 위험을 야기하지 않습니다. 위험한 스크립트나 플러그인 콘텐츠를 컴퓨터에 주입하지 못하게 할 수 있었습니다. 높은 권한의 확장 프로그램 컨텍스트를 사용해야 합니다

이 메커니즘을 통해 템플릿을 간단하게 만들 수 있지만 물론 템플릿만으로 제한되지는 않습니다. 모든 문자 엄격한 콘텐츠 보안 정책에서 즉시 작동하지 않는 코드는 샌드박스될 수 있습니다. 인치 제대로 실행될 수 있는 확장 프로그램의 구성요소를 샌드박스에서 실행하는 것이 유용할 때가 많습니다. 프로그램의 각 조각을 하는 데 필요한 최소한의 권한 집합으로 제한하기 위해 실행할 수 있습니다 Google의 안전한 웹 앱 및 Chrome 확장 프로그램 작성 프레젠테이션 I/O 2012는 이러한 기법의 몇 가지 좋은 예를 제공하며, 56분 동안은 있습니다.