Angular $sce blocking my audio blob src

Question

I am trying to use angular ngRepeat with the html5 audio tag. I have the html:

    <li ng-repeat="recordings in recordinglist">
        <audio controls ng-src="{{recordings}}"></audio>
   </li>

and the js:

    $scope.$apply($scope.recordinglist.push("blob:http%3A//localhost%3A9000/67ecfa65-3394-45a6-8f29-42f3421a2727"));

But angular's same origin checking is causing an error to be thrown on interpolation:

Error: [$interpolate:interr] Can't interpolate: {{recordings}}
Error: [$sce:insecurl] Blocked loading resource from url not allowed by $sceDelegate policy.  URL: blob:http%3A//localhost%3A9000/67ecfa65-3394-45a6-8f29-42f3421a2727

This just seems silly. It's not interpolating a local resource. I imagine there's a way to do this correctly - or should I file a bug report?

Have you tried wrapping your URL in $sce.trustAsResourceUrl() ? — ksimons
– ksimons, Commented Nov 1, 2013 at 15:51
Any update on this? Did you find a solution? I'm having similar issues. — Nick Jennings
– Nick Jennings, Commented Dec 3, 2013 at 0:37
I cheated. Its was for some prototyping so I just put this in the .config '$sceProvider.enabled(false);' — Stevo
– Stevo, Commented Dec 4, 2013 at 19:35

Don't Panic · Accepted Answer · 2016-12-28 22:45:41Z

20

I have the same problem when trying to display a blob src for webrtc video before, and I fixed it by using $sce service:

angular.module('moduleName', ['ngSanitize'])
.controller('ctrName', ['$sce', function($sce) {
  $scope.recordings = $sce.trustAsResourceUrl(recordings);
}])

You may also check the doc here.

edited Dec 28, 2016 at 22:45

Don't Panic

41.9k11 gold badges70 silver badges87 bronze badges

answered Jan 13, 2014 at 9:05

fraserxu

4203 silver badges8 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Community · Accepted Answer · 2017-05-23 11:46:43Z

4

For me the following solved the problem:

$sce.trustAsResourceUrl

see SO question with more detailed explanation here

edited May 23, 2017 at 11:46

CommunityBot

11 silver badge

answered Feb 4, 2014 at 14:07

elewinso

2,5316 gold badges23 silver badges28 bronze badges

Comments

Endless · Accepted Answer · 2013-11-20 14:14:42Z

1

Faced a similar problem with my blob images... Try this:

Basically it allows any blob image in src

app.config( ['$compileProvider', function($compileProvider){   
  $compileProvider.imgSrcSanitizationWhitelist(/^\s*(blob):/);

  // another sample to allow diffrent kinds of url in <a>
  // $compileProvider.urlSanitizationWhitelist(/^\s*(https?|ftp|mailto):/);
}]);

answered Nov 20, 2013 at 14:14

Endless

38.8k14 gold badges118 silver badges138 bronze badges

Comments

Hassan Siddique · Accepted Answer · 2016-01-19 11:04:32Z

0

Best way to solve this is to create a trusted filter.

app.filter('trusted', ['$sce', function ($sce) {
return function(url) {
    return $sce.trustAsResourceUrl(url);
};}]);

And Use this filter in ng-src.

<li ng-repeat="recordings in recordinglist">
    <audio controls ng-src="{{recordings |trusted}}"></audio></li>

answered Jan 19, 2016 at 11:04

Hassan Siddique

1,59014 silver badges27 bronze badges

1 Comment

RandallB Over a year ago

This defeats the entire purpose of SCE. You'd probably be better off just disabling it than creating a filter which any html could inject on the page maliciously.

Mahesh · Accepted Answer · 2016-10-24 14:59:39Z

0

When getting the blob from a file reader, you might have to add $scope.$apply() to trigger the watch and bind accordingly.

InitRecording = function() {
    var reader = new FileReader();
    reader.onload = function() {
        audioSRC = $sce.trustAsResourceUrl(reader.result);
        $scope.$apply();
    };
    reader.readAsDataURL(recordedBlob);
}

answered Oct 24, 2016 at 14:59

Mahesh

4,0651 gold badge42 silver badges50 bronze badges

2 Comments

Endless Over a year ago

You don't need FileReader... if you look carefully you see that the user has created a blob url using URL.createObjectURL(blob)

Mahesh Over a year ago

Exactly, and in case you are using a FileReader, and still facing the same error with '$sce', then $apply needs to be called, to trigger the watch variables changes

Collectives™ on Stack Overflow

Angular $sce blocking my audio blob src

5 Answers 5

Comments

Comments

Comments

1 Comment

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

Comments

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related