Firefox WebExtension, 격리 된 HTML 오버레이

WebExtensions를 사용하여 일부 웹 사이트에 격리 된 오버레이를 표시하는 방법을 찾고 있습니다.
iframe은 css, js 및 DOM에 대해 전체 분리 된 범위를 제공하므로이 방법을 사용하는 것처럼 보일 것입니다. 그리고 또 다른 좋은 점은 대상 웹 사이트가 내용을 읽거나 변경할 수 없다는 것입니다.Firefox WebExtension, 격리 된 HTML 오버레이

Firefox에서 WebExtensions와 함께 문제가없는 것처럼 보이지만 동일한 구문을 공유하는 Chrome 확장 프로그램에서 보안 경고/오류가 표시되고 작동하지 않습니다. src 속성없이 iframe을 만들기

및 웹 사이트의 본문에 그 주입 :

나는 다른 두 가지를 시도했습니다. iframe.contentWindow.document.open() 일 때 CSP 오류/경고가 표시되어이 방법이 실패했습니다.
관련 내용 스크립트 코드 : 나는 (이 컨텐츠에 액세스 웹 사이트를 허용하는 것처럼 방법이 더 나을하는) 노력 다른 것은, 파일에 내 iframe이 코드를 넣어했다
```
let html = ` 
    <!DOCTYPE html> 
    <html> 
     <head></head> 
     <body> 
     <h1>TEST</h1> 
     </body> 
    </html> 
` 
let iframe = document.createElement('iframe') 
document.body.appendChild(iframe) 
iframe.contentWindow.document.open() 
iframe.contentWindow.document.write(html) 
iframe.contentWindow.document.close() 
```
(overlay.html)을 내 WebExtension에 저장하고 src를 browser.extension.getURL('overlay.html')으로 설정하여 iframe을로드합니다.
관련 내용 스크립트 코드 : 매니페스트에서
```
let iframe = document.createElement('iframe') 
iframe.src = browser.extension.getURL('overlay.html') 
document.body.appendChild(iframe) 
```
나는 이것에 대한 web_accessible_resources로 overlay.html 정의 :
```
"web_accessible_resources": [ 
    "overlay.html" 
], 
```
그것에 대해 문제는 iframe을 단순히로드되지 않는다는 것입니다 overlay.html 파일. 그러나 확실히 이용 가능합니다. 그렇지 않으면 location.href = browser.extension.getURL('overlay.html')가 작동하지 않습니다. 내 오버레이에서 별도의 파일로 전체 오버레이 (html, css, js)를 저장할 수 있으므로 매우 효과적이었을 것입니다. 마치 독립 실행 형 웹 사이트 일 것입니다. 그리고 콘텐츠 스크립트를 사용하여 새로운 데이터를 추가하기 위해 액세스 할 수있었습니다.

편집 : 순간

내가 그것을 (즉에 대한 wOxxOm 덕분에) 포함해야 소스 코드를 설정하는 내 iframe 대응의 srcdoc 속성을 사용하고 있습니다. 그래서 적어도 나는 지금 일하는 것을 가지고있다. 그러나이 접근법에 대해 내가 정말로 싫어하는 점은 콘텐츠 스크립트의 iframe 콘텐츠와 상호 작용할 수 없다는 점입니다. 흥미롭게도, iframe의 js 코드 내에서 부모 페이지와 상호 작용할 수 있지만 콘텐츠 스크립트에서는 다시 사용할 수 없습니다. 그것은 또한 엉망이고 불편하며 모든 HTML, CSS, js 코드를 일반 웹 사이트와 같은 여러 파일 대신 하나의 문자열로 유지하기가 어렵습니다.

출처

2017-01-19 Forivin

처럼, 당신은 매우 제한적인 CSP를 정의하려고했습니다 아마 사이트 상대해야 하는가? 나는'iframe.srcdoc'을 시도 할 것입니다. 스타일 분리에 관해서는 iframe 대신에 그림자 DOM을 사용할 수 있습니다. – wOxxOm

정말 고맙습니다! – Forivin

1) CSP 문제 : 저는 그것이 사이트라고 생각하지 않습니다. 그것은'file : /// C : /'에서 나에게 같은 오류를 준다. 확장 프로그램의 CSP와 관련이 있다고 생각합니다. 구문에 익숙하지 않아서 해결책을 제시 할 수 없습니다. 부주의로 허용 할 수있는 다른 것을 완전히 이해하지 않고 조심해서 구멍을 뚫어주십시오. 2) 나는 iframe을 즉시 추가했다. iframe.src가 나에게 도움이되었지만 직접 할당은 모든 속성에 똑같이 적용되지 않습니다. iframe.setAttribute (attribute, value);로 모든 속성을 지정해보십시오. 특히'class'는 문제가 있다고 생각합니다. – user314159

문제점 첫째

을, 우리는 정확히 문제가 무엇인가 문제가 보안 문제 알아? iframe src를 설정하여 iframe에 확장 리소스를로드하려고하면 브라우저가 Security에 대해 불평하고 iframe이 다른 프로토콜 (이 경우 'moz-extension : //')에 연결하지 못하게합니다.

해결책은

로드 확장 문맥에서 HTML 등 및 문자열로 투입. 핵심적으로 불쾌한 진실은

이 해결하기 위해

, 우리는 data:text/html;charset=utf8,${markup}에가 iframe src 속성을 설정할 수 있습니다.

이것은 iframe에 내용이 html이고 utf8 인코딩을 사용하며 원시 마크 업이 뒤 따른다는 것을 직접 알려줍니다. 우리는 네트워크를 통해 리소스를로드하기 위해 iframe에 대한 필요성을 완전히 무시하고 있습니다.

Firefox 콘텐츠 스크립트의 실행 컨텍스트는로드 된 페이지와 별개입니다. 즉, CSP를 위반하지 않고 xhr 요청을 할 수 있습니다.

마크 업에 대해 xhr 요청을하면 응답 내용을 문자열로 가져 와서 iframe src 특성에 직접 삽입 할 수 있습니다.

따라서 컨텐츠 스크립트 : 간단한 HTML 파일

<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Test</title> <meta charset="utf8" /> </head> <body> <h1>Hello World</h1> </body> </html>

와

function loaded (evt) { if (this.readyState === 4 && this.status === 200) { var html = this.responseText; console.log(html); var iframe = document.createElement('iframe'); iframe.src = 'data:text/html;charset=utf-8,' + html; document.body.appendChild(iframe); console.log('iframe.contentWindow =', iframe.contentWindow); } else { console.log('problem loading'); } } var xhr = new XMLHttpRequest(); xhr.overrideMimeType("text/html"); xhr.open("GET", browser.extension.getURL('test.html'), false); xhr.addEventListener("readystatechange", loaded); xhr.send(null);

그래서 지금 당신은 성공적으로 대상은 iframe에 HTML 템플릿을 주입했다.

이미지, 스크립트, CSS 파일 등이 필요한 경우 위에서 설명한 방법을 기반으로 부트 로더를 작성하고 iframe 문서에 직접 새 스크립트 태그를 삽입해야합니다.

출처

2017-01-25 11:39:39

은 BTW, 때때로 사람들은 다른 프로토콜에 IFRAME URL을 사용 즉
https:// (현재 페이지가 http:// 동안).

그래서, IFRAME URL은 src="//example.com"

출처

2017-01-28 19:43:16

파이어 폭스 확장 기능의 컨텍스트에서 웹 사이트 컨텍스트가 아닌 확장 기능 파일 시스템의 파일에 액세스하면 작동하지 않습니다. firefox 확장 파일은 moz-extension 프로토콜에 있습니다. –

Firefox WebExtension, 격리 된 HTML 오버레이

답변

관련 문제