Угловое добавление «небезопасно» к URL-адресу при попытке загрузить файл

Question

У меня есть небольшое приложение AngularJS, где я пытаюсь открыть загруженное изображение, и я столкнулся с проблемой, когда угловая добавляет «небезопасно:» в начале URL-адреса , Я добавил следующую строку в моем приложении конфигурации, чтобы санировать URL, но это не работает для меня:

$compileProvider.imgSrcSanitizationWhitelist(/^\s*(https?|ftp|file|blob:chrome-extension):|data:image|\//); 

Я использую Угловой v1.3.0 так я использую правильное имя свойства. Я использую Chrome в основном, но у меня такая же проблема в других браузерах. Кроме того, начало моего изображения выглядит так:

unsafe:data:image/jpeg;base64,iVBORw0KGgoAAAANSUhEUg... 

Любая идея, что мне не хватает в моем регулярном выражении? Спасибо заранее!

Answer 1

Если вы используете $compileProvider.imgSrcSanitizationWhitelist() без параметра regexp, он возвращает текущее определенное регулярное выражение.

Выполнение этого кода на пустой угловой 1.3.0:

app.config(function ($compileProvider) { 
    console.log($compileProvider.imgSrcSanitizationWhitelist()); // 
}); 

Я получил этот результат - /^\s*((https?|ftp|file|blob):|data:image\/)/

И base64 закодирован JPEG с использованием основной <img ng-src="{{main.src}}"> на самом деле работает, как вы можете видеть here, и another one с png. Также посмотрите на консоль, чтобы увидеть регулярное выражение.

Другой тест я бежал, чтобы переместить data:image/jpeg;base64, из сферы переплетены строки и поместить его в нг-Src:

<img ng-src="data:image/jpeg;base64,{{main.src}}">

Как вы можете видеть его worked, а также.

Чтобы сделать длинный рассказ коротким - вам не нужно определять регулярное выражение в 1.3.0 и выше для данных: image/*, как определено по умолчанию.

Я не могу быть уверен, в чем проблема, но, возможно, у вас есть другое определение imgSrcSanitizationWhitelist где-то в вашем коде или данные uri как-то сломаны.