javascript - 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 提供方法。 / black-list 使用字符串匹配(带有可选通配符)或正则表达式(不推荐)的资源。
有关如何填充白名单/黑名单的更多信息，请查看 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 。