Skip to content
This repository has been archived by the owner on Apr 12, 2024. It is now read-only.

Unsafe prefix for blob links #3889

Closed
maxaon opened this issue Sep 5, 2013 · 5 comments
Closed

Unsafe prefix for blob links #3889

maxaon opened this issue Sep 5, 2013 · 5 comments

Comments

@maxaon
Copy link

maxaon commented Sep 5, 2013

Links to blob images marked with prefix "unsafe:"

During linking of ngImg image link is set via $compile.$set which checks normalized value via regular expression:

  if (normalizedVal !== '') {
    if ((key === 'href' && !normalizedVal.match(aHrefSanitizationWhitelist)) ||
        (key === 'src' && !normalizedVal.match(imgSrcSanitizationWhitelist))) {
      this[key] = value = 'unsafe:' + normalizedVal;
    }
  }

where imgSrcSanitizationWhitelist equals to /^\s*(https?|ftp|file):|data:image\//
This RegExp doesn't allow blob link, which created using URL.createObjectURL
Created link using Chrome: blob:http%3A//127.0.0.1%3A8080/38272f8d-7435-4cfd-bb64-93c8ca8d92c4
Created by Firefox: blob:53210633-5257-4767-b862-34c3cc50013c

Related issue #2570 Affected versions till v1.2.0-rc.2

@petebacondarwin
Copy link
Contributor

You can modify this whitelist in a config block using the $compileProvider. Something like this...

myModule.config(['$compileProvider', function($compileProvider) {
  var oldWhiteList = $compileProvider.imgSrcSanitizationWhitelist();
  $compileProvider.imgSrcSanitizationWhitelist(/^\s*(https?|ftp|file|blob):|data:image\//);
});

@mcfedr
Copy link

mcfedr commented Oct 24, 2013

Is there any reason why this fix should not be in the standard whitelist? that way everyone using doesnt have to google, find this page, and do it himeself.

@divyachandana
Copy link

    <a href="{{applicant.resume}}" download> download resume</a>


    var app = angular.module("myApp", []);
                    
        app.config(['$compileProvider', function($compileProvider) {
             $compileProvider.aHrefSanitizationWhitelist(/^\s*(https?|local|data|chrome-extension):/);
            $compileProvider.imgSrcSanitizationWhitelist(/^\s*(https?|local|data|chrome-extension):/);
            
            }]);


@kumarendeavour
Copy link

    <a href="{{applicant.resume}}" download> download resume</a>


    var app = angular.module("myApp", []);
                    
        app.config(['$compileProvider', function($compileProvider) {
             $compileProvider.aHrefSanitizationWhitelist(/^\s*(https?|local|data|chrome-extension):/);
            $compileProvider.imgSrcSanitizationWhitelist(/^\s*(https?|local|data|chrome-extension):/);
            
            }]);

can you please explain me step by step process, how to use this, i dont know where to add the aHrefSanitizationWhitelist and in which config file, or in some Ts file. I am very new to Angular ,and facing the issue to show images from fileshare

@AllanPinheiroDeLima
Copy link

I think I misunderstand this, if it is important and it makes a security flaw on Angular, why it works when using background-image into CSS but not into image ?

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Projects
None yet
Development

No branches or pull requests

6 participants