Chrome 확장 프로그램 : 샌드 박스 환경에서 생성 된 동적 iframe에 콘텐츠 작성

이 문제를 극복 할 수 없습니다. 누군가 조언을 해줄 수 있습니까?Chrome 확장 프로그램 : 샌드 박스 환경에서 생성 된 동적 iframe에 콘텐츠 작성

Chrome 확장 프로그램에서 실행해야하는 ExtJS 라이브러리를 사용하는이 응용 프로그램이 있습니다. 메시징 브리지 (postMessage)를 성공적으로 만들고 샌드 박스로 전체 응용 프로그램을 샌드위치 처리하면 모든 것이 정상적으로 작동합니다. ExtJS가로드되고 응용 프로그램이 실행 중입니다.
그런 다음 ExtJS 뷰포트에서 일부 HTML 미리보기를 미리보아야 할 부분이 있습니다. 나는 Panel 자체에 iframe을 만들고 afterrender에 나는 그 안에 스 니펫을 쓰려고했습니다. 그런 다음 오류
```
html: '<iframe src="about:blank" style="width:100%;height:100%;border:none;"></iframe>'; 

...... 

//p is the panel found in afterrender 
p.body.down('iframe').dom.contentDocument.write(content); 
```
:

Unsafe JavaScript attempt to access frame with URL about:blank from frame with URL chrome-extension://fcnpmlgapilgclcelfanblpbglmkghbc/core/themes/default/app.html. Domains, protocols and ports must match.
나는이 역동적 인은 iframe에 샌드 박스 내에서 postMessage으로 시도했지만 아무 일도 일어나지 않는다 이것은 내가 사용하는 코드입니다. 매니페스트에 sandbox 특성을 설정해도 작동하지 않습니다. 이것은 유일한 방법이며 작동합니다. 아래 내 대답을 참조하십시오.

질문 :

하나는 이러한 유형의 유스 케이스를 지원하기 위해 매니페스트를 설정하는 방법?
iframe을 사용하지 않고 HTML 스 니펫을 미리 볼 수있는 더 좋은 방법이 있습니까? iframe으로 Afaik 미리보기는 부모 css로 엉망이없이 스 니펫을 샌드 박스로 처리하는 것이 가장 좋습니다.

참고

이 코드 조각은 매니페스트 (V1)에서 잘 작동했지만, 난 V2를 명시하도록 마이그레이션을 계획했다. 나는 CSP (Content Security Policy)가 엄격해진 것을 깨닫지 못했습니다.

문제를 설명하는 화면;

screen

출처

2012-09-24 Lionel Chan

미안)이 어색. 외관상으로는 postMessage이 유일한 방법이며, iframe이 아직로드되어 있지 않기 때문에 이전에 작동하도록 할 수 없습니다. 또한 iframe의 dom 문서에 액세스하는 것은 CSP에서 이 아니고이 아니지만 contentWindow에 액세스하여 postMessage을 처리 할 수 있습니다.

이것은이 문제를 해결하기 위해 수행 한 작업입니다.사람이 혜택을 누릴 것입니다 희망 :

이
manifest.json에서 확장 루트에 preview.html 만들기 preview.html 안에는 sandbox 속성의 일부로서

을 추가, 다음 코드를 추가합니다 . 내 스 니펫은 전체 HTML이므로, 대신 document.write을 사용했습니다.

<!DOCTYPE html> 
<html> 
    <head> 
     <script> 
     window.addEventListener("message", function(e) { 
      if (e.data.content) { 
       document.write(e.data.content); 
      } 
     }); 
     </script> 
    </head> 
    <body></body> 
</html>

은 평소와 같이 코드에서 iframe을 작성하여 preview.html를 가리 키도록하고, 부모 div 이하 Ext.Panel에 연결합니다.

postMessage에 다음 코드를 사용하여 요소를 그 렸습니다.

var content = '<!DOCTYPE html><html><body>Hello World!</body></html>'; 
var iframe = p.body.down('iframe').dom; //or the iframe node 

iframe.onload = function() { 
    iframe.contentWindow.postMessage({content: content}, '*'); 
};

즐길 수 )

편집 Mike in Chromium forum에 의해 지적

은이 문제뿐만 아니라 srcdoc에 의해 해결 될 수 있습니다. 단순히 iframe의 srcdoc을 설정하면 문제가 해결됩니다.

상태가 확실하지 않은 경우 srcdoc

출처

2012-09-25 05:09:46

Chrome 확장 프로그램 : 샌드 박스 환경에서 생성 된 동적 iframe에 콘텐츠 작성

답변

관련 문제