Iframe Not Working In Angularjs 1.3.0

I'm new to web dev. I'm using AngularJS 1.3.0. When I try using {{ things[0].embed }} to insert the embedded source video link from my database, nothing is displayed, but hardcodin

Solution 1:

I know I joined the party late (again), but there you go:

Strict Conceptual Escaping (SCE) is an important concept in Angular should not be taken light-heartedly (if you care about the security of your app).

It is important to understand wht it means and what are the implications and dangers in calling $sce.trustAs...().

This answer gives a little insight on what is SCE and why does Angular treat resources (such as URLs) the way it does. That answer explains the importance of client-side sanitization (this is what you by-pass by calling $sce.trustAs...() unless you are 100% sure that you can trust it).

---

That said, there might be better (read "safer and more maintainable") ways to achieve the same result.

E.g. $sceDelegateProvider (which is used by the $sce service to decide what is secure and what isn't) provides methods to white-list/black-list resources using string-matching (with optional wildcards) or regular expressions (not recommended). For more info on how to populate your white-/black-list take a look here.

---

E.g. if you want your application to allow links from www.youtube.com, you can define your white-list like this:

.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 updated demo.

Solution 2:

Your updated plunker

You must explicitly direct angular to trust content that could otherwise provide security holes for xss attacks. That is what the

$sce.trustResourceAsUrl()

function call is for.