0

I'm having trouble getting my head around showing iFrames in my Angular app. My users are allowed to enter a YouTube URL and my app will convert this straight to a video.

Of course, Angular won't allow this directly so you have to explicitly "trust" the contents so I use this to get it to show the iframe:

$sce.trustAsResourceUrl(url_of_video)

However, how do I get back? I want to be able to send the URL to my back-end but in this sanitized form it's no longer the original url string.

UPDATE:

Experimenting with this and came up with this code:

angular.forEach($scope.task.items, function(item) {
  item.data = $sce.getTrustedResourceUrl(item.data); //this gets rejected by $sce
  item.data2 = $sce.getTrustedResourceUrl(item.data); //this is accepted and I'm free to POST the url
});

I've noticed that I can create a new name/value pair in the array and assign it the original url but if I try to assign the item.data with the trusted form of the sanitized data then it rejects it! Hmmmmm! Why is this?

Any ideas?

UPDATE 2 I decided to create two versions of the data, one for the front end (which I "trusted" with $sce) and one for the back. This appears to have solved my issue for the moment.

Michael B
  • 1,660
  • 3
  • 28
  • 59
tommyd456
  • 10,443
  • 26
  • 89
  • 163

1 Answers1

0

Take a look at this answers (which contains links to yet more answers and resources).

You should understand the implications of trusting content entered by a user and what $sce is there for.

If you want to allow YouTube URLs, it might be a better idea to "white-list" those URLs only (instead of trusting any URL entered by the user).
(Don't forget that SCE is not there to make your app bullet-proof, but it is a tool to help you make it safer and help you audit it easier/more reliably.)

That said, here is how you could configure Angular's SCE to allow URLs from www.youtube.com:

.config(function ($sceDelegateProvider) {
    $sceDelegateProvider.resourceUrlWhitelist([
        'self',                    // trust all resources from the same origin
        '*://www.youtube.com/**'   // trust all resources from `www.youtube.com`
    ]);
});

See, also, this short demo from the other answer (that does what you want).

Community
  • 1
  • 1
gkalpak
  • 47,844
  • 8
  • 105
  • 118
  • Thanks for this - I do understand $sce and why I would it but my issue was to do with accessing the santized data to send to the back end. – tommyd456 Jun 05 '14 at 09:06
  • Sorry, I don't get it. Sanitization should be applied to data **received** from the server, not data **sent** to the server. – gkalpak Jun 05 '14 at 09:21
  • I'm not saying that - my question was how to access the data that was sanitized by Angular so that I can send the un-santized version to the server. – tommyd456 Jun 05 '14 at 15:05