iframe 在 AngularJS 1.3.0 中不起作用

Question

我是网络开发新手。我正在使用 AngularJS 1.3.0。当我尝试使用 {{ things[0].embed }} 从我的数据库中插入嵌入的源视频链接时，没有显示任何内容，但对链接进行了硬编码，例如“//www.youtube.com/embed/wZZ7oFKsKzY”，作品。有什么我想念的吗？我是否以某种方式滥用范围？ 这是我正在尝试做的另一个例子。如果您将 {{thing[0].embed}} 替换为 youtube 链接，它就可以工作。为什么不将 {{thing[0].embed}} 替换为链接？ http://plnkr.co/edit/Udml7NIyWcUuMtYGDXNc?p=preview

//myCore.js

var coreControl = angular.module('myCore', []);

function mainController($scope, $http) {
    $scope.formData = {};

    $http.get('*')
        .success(function(data) {
            $scope.things = data;
            console.log(data);
        })
        .error(function(data) {
            console.log('Error: ' + data);
        });

    $scope.doThings = function() {
        $http.post('*', $scope.formData)
            .success(function(data) {
                $scope.formData = {};
                $scope.things   = data;
                console.log(data);
            })
            .error(function(data) {
                console.log('Error: ' + data);
            });
    };
}

//index.html  
<div ng-if="moves.length==1" class="col-sm-4 col-sm-offset-4">
        <h1> {{ things[0].name }} </h1>
        <iframe width="560" height="315" ng-src="{{ things[0].embed }}" frameborder="0" allowfullscreen></iframe>

        {{ things[0].embed }}
</div>

Answer 1

我知道我（再次）迟到了，但你去吧：

Strict Conceptual Escaping (SCE) 是 Angular 中的一个重要概念，不应掉以轻心（如果您关心应用程序的安全性）。

重要的是要了解它的含义以及致电$sce.trustAs...() 的含义和危险。

This answer 简要介绍了 SCE 是什么以及 Angular 为何以这种方式处理资源（例如 URL）。
That answer解释了客户端清理的重要性（这是你通过调用 $sce.trustAs...() 绕过的，除非你 100% 确定你可以信任它）。

---

也就是说，可能有更好的（阅读“更安全和更易于维护”）方法来实现相同的结果。

例如$sceDelegateProvider（$sce 服务使用它来决定什么是安全的，什么不是）为 white-list/@987654326 提供方法@ 使用字符串匹配（带有可选通配符）或正则表达式（不推荐）的资源。
有关如何填充白名单/黑名单的更多信息，请查看 here。

---

例如如果您希望您的应用程序允许来自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`
    ]);
});

另请参阅此updated demo。

Answer 2

Your updated plunker

您必须明确指示 Angular 信任可能会为 xss 攻击提供安全漏洞的内容。这就是

$sce.trustResourceAsUrl()

函数调用是为了。