Question

我之前发布了它，但是人们指出的解决方案并没有解决它，所以用更多的知识解决方案再次发布它：

我正在尝试使用AngularJS开发chrome扩展程序。在我的基本指令中，我试图显示图像（本地文件）。这是我的清单

{
    "name": "The Extension",
    "manifest_version": 2,
    "description": "A extension for chrome browsers",
    "version": "1.0.0",
    "background": {
        "persistent": false,
        "scripts": [ "background.js" ]
    },
    "permissions": ["tabs", "<all_urls>"],
    "web_accessible_resources": ["assets/img/extension-logo.png"]
}

我的app.js（从background.js加载）：

//This is adding base directive in app
var app = '<div class="my-extension"><div base></div></div>';
var wrapper = '<div ng-non-bindable>' + app + '</div>';
$('body').append(wrapper);
var myExtension = angular.module('my-extension', ['baseModule']);

myExtension.config(['$compileProvider', function ($compileProvider) {
    $compileProvider.aHrefSanitizationWhitelist(/^\s(https?ftp|mailto|local|data|chrome-extension):/);
}]);

window.name = '';
angular.bootstrap($('.my-extension')[0], ['my-extension']);

基地是：

var baseModule = angular.module('baseModule', []);
baseModule.directive('base', ['$http', function($http) {
    return {
        replace: true,
        template: '<div>Hello World <img src={{logoImgURL}} /></div>',
        link: function(scope, elem, attrs) {
            scope.logoImgURL = chrome.extension.getURL("assets/img/extension-logo.png");
        }
    }
}]);

图像src被绑定了以下值：

SRC =＆＃34;不安全：铬延伸：//lmkgimpeoaoblkhioebjoefpkhckcojf/assets/img/extension-logo.png/"

请原谅我，如果问题很愚蠢，我在扩展开发方面相对超级新。

Answer 1

您应该将chrome-extension添加到img src清理白名单中。与您对a href

的操作相同

myExtension.config(['$compileProvider', function ($compileProvider) {
    // ...
    $compileProvider.imgSrcSanitizationWhitelist(/^\s*((https?|ftp|file|blob|chrome-extension):|data:image\/)/);
}]);

虽然在AngularJS Chrome扩展程序中使用了compileProvider.aHrefSanitizationWhitelist，但标记为不安全的图像

1 个答案: