Angular $sce blocking my audio src, tried $sce.trustAsResourceUrl but still get error

Question

In angular I set awesomeThing.name to base64 data

And I want to read it into .

I tried:

'use strict'

angular.module 'papaApp'
.config [
  "$compileProvider"
  ($compileProvider) ->
    $compileProvider.aHrefSanitizationWhitelist /^\s*(https?|ftp|mailto|data):/
]
.controller 'MainCtrl', ['$scope', '$http', 'socket', '$sce', ($scope, $http, socket, $sce) ->
  $scope.awesomeThings = []

  $http.get('/api/things').success (awesomeThings) ->
    $scope.awesomeThings = awesomeThings
    socket.syncUpdates 'thing', $scope.awesomeThings
    for awesomeThing in $scope.awesomeThings
      $sce.trustAsResourceUrl awesomeThing.name

  $scope.addThing = ->
    return if $scope.newThing is ''
    $http.post '/api/things',
      name: $scope.newThing

    $scope.newThing = ''

  $scope.deleteThing = (thing) ->
    $http.delete '/api/things/' + thing._id

  $scope.$on '$destroy', ->
    socket.unsyncUpdates 'thing'
]

but still get error:

Error: [$sce:insecurl] Blocked loading resource from url not allowed by $sceDelegate policy.  URL: data:audio/mp3;base64,//sQxAADwAABpAAAACAAADSAAAAE8cGnkAH+AOE/hcIGJPyWA8gso…VVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVQ==

how should I use $sce.trustAsResourceUrl for array?

score 1 · Answer 1 · edited May 23 '17 at 10:27

find out by myself

after read this Angular JS Handling Ng-Repeated HTML5 Video & $SCE

angular.module 'papaApp'
.config ($sceDelegateProvider) ->
  $sceDelegateProvider.resourceUrlWhitelist [
    # Allow same origin resource loads.
    "self"
    # Allow loading from our assets domain.  Notice the difference between * and **.
    "data:**"
  ]
  return
.controller 'MainCtrl', ($scope, $http, socket) ->
  $scope.awesomeThings = []

  $http.get('/api/things').success (awesomeThings) ->
    $scope.awesomeThings = awesomeThings
    socket.syncUpdates 'thing', $scope.awesomeThings

  $scope.addThing = ->
    return if $scope.newThing is ''
    $http.post '/api/things',
      name: $scope.newThing

    $scope.newThing = ''

  $scope.deleteThing = (thing) ->
    $http.delete '/api/things/' + thing._id

  $scope.$on '$destroy', ->
    socket.unsyncUpdates 'thing'

Angular $sce blocking my audio src, tried $sce.trustAsResourceUrl but still get error

1 Answers1