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

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

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

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

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

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

Ответ 1

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

Запуск этого кода на пустой angular 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}}"> работает, как вы можете видеть здесь, и другой с png. Также посмотрите на консоль, чтобы увидеть регулярное выражение.

Еще один тест, который я выполнил, состоит в том, чтобы переместить data:image/jpeg;base64, из строки привязанной области и поместить его в ng-src:

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

Как вы можете видеть, работал.

Короче говоря, вам не нужно определять regexp в 1.3.0 и выше для данных: image/*, как определено по умолчанию.

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