크롬 확장을 firefox webextension에 이식 - 안전하지 않은 각도 이미지 호출

Question

크롬 확장 기능이 팝업으로 잘 작동하지만 팝업으로 로컬 이미지를 가져 와서 이식 된 Firefox 웹 확장에 렌더링 할 수 없습니다. 팝업은 어떤 이미지를 렌더링하지 않고 렌더링 된 HTML은 다음과 같습니다

<img ng-src="assets/img/start_your_day_right.png" src="unsafe:moz-extension://d45045df-43fa-654a-b95c-70de00a23f5a/assets/img/start_your_day_right.png"> 

이 오류를 조사한 후, 나는 manifest.json을 파일에 설정 CSP의 다양한 순열을 시도했습니다.

"web_accessible_resources": [ 
    "assets/img/*.png" 
], 
"content_security_policy": "img-src 'self' 'unsafe-eval'; script-src 'self' 'unsafe-eval' https://www.google-analytics.com; object-src 'self'", 

나는 popup.html 페이지에서 각 승/이미지를 렌더링 해요 : 저는 여기에 사용했던 매니페스트 파일의 코드가이다 (도 포함 웹에 액세스 할뿐만 아니라 추천 한 자원이다) :

<img ng-src="{{ tile.imgSrc | htmlSafe }}" /> 

('tile.imgSrc'는 이미지의 상대 경로 링크로 렌더링 곳 -.. 예를 들어 '자산/IMG/start_your_day_right.png'

를 I했습니다 IMG의 다양한 순열을 포함하여 시도 -src 설정 ('안전하지 않은 인라인'포함), '자체'제거 등

0 내가 도망 수없는 것

오류 : 나는 각도 (v1.5.5)의 이전 버전/w 파이어 폭스의 최신 버전 (52.0)를 실행하는거야 screenshot of ffox console error

. FireFox (https://github.com/mozilla/addons-linter/issues/1000#issuecomment-255183470)에 대한 응용 프로그램의 제출 () 중에이 이전 버전의 Angular가 문제를 일으킬 수 있음을 알았지 만 이것이 테스트 및 현재 오류의 원인이 될 수는 없습니다. (Angular 업그레이드를 사용하여 오류를 추가하기 전에이 문제를 해결하려고합니다.)

팁이 있습니까?

Answer 1

여기에서 문제는 Angular가 ng-src 이미지 및 링크 URL을 삭제한다는 것입니다.

앞에 붙이면 unsafe:은 링크를 사용할 수 없게 만들고 앵귤러가 해당 링크를 유효한 것으로 인식하지 못한다는 신호를 보냅니다.

이

가 확장에서 알려진 동작입니다 :

• Angular changes urls to "unsafe:" in extension page
• ng-src doesn't work in Chrome app, even with ng-csp

위의 링크에 나타낸 바와 같이,이 동작은 $compileProvider의 imgSrcSanitizationWhitelist 및 aHrefSanitizationWhitelist을 패치하여 재정의 할 수 있습니다. 각도 개발자 officially blessed이 해결 방법을 사용하고 웹 이외의 용도로 코어 각도 코드를 수정하지 않기로 결정했습니다.

포팅중인 확장 프로그램이 Chrome에서 작동하므로이 패치가 이미 포함되어 있어야합니다. 화이트리스트에 moz-extension:을 추가하기 만하면됩니다. 사용 크롬과 파이어 폭스 모두에서 작동하도록 수정 bugtracker의 example :

var myModule = angular.module('myApp', [...], function($compileProvider) { 
    ... 
    $compileProvider.imgSrcSanitizationWhitelist(
     /^\s*(https?|ftp|file|chrome-extension|moz-extension):|data:image\// 
    ); 
    $compileProvider.aHrefSanitizationWhitelist(
     /^\s*(https?|ftp|mailto|file|chrome-extension|moz-extension):/ 
    ); 
}); 

그것은 마찬가지로 다른 비 - 웹 플랫폼을 수정해야합니다 즉 에지 또는 노드 - 웹킷합니다.