Question

我是网络开发新手。我使用的是AngularJS 1.3.0。当我尝试使用{{things [0] .embed}}从我的数据库中插入嵌入的源视频链接时，不显示任何内容，而是对链接进行硬编码，例如＆＃34; // www.youtube.com/embed/ wZZ7oFKsKzY＆＃34;，有效。有什么东西我不见了吗？我是否以某种方式滥用了范围？这是我尝试做的另一个例子。如果您使用youtube链接替换{{thing [0] .embed}}，则可以正常工作。为什么不用链接替换{{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为何如何处理资源（例如网址）提供了一些见解。
That answer 解释了客户端清理的重要性（这是您通过调用$sce.trustAs...()来绕过的，除非您100％确定您可以信任它。）

尽管如此，可能会有更好的（阅读“更安全，更易于维护”）方法来实现相同的结果。

E.g。 $sceDelegateProvider （由$sce服务用来决定哪些是安全的，哪些不是）为 white-list 提供方法/ black-list 使用字符串匹配（带可选通配符）或正则表达式（不推荐）的资源。
有关如何填充白名单/黑名单的详细信息，请查看 here 。

E.g。如果您希望应用程序允许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()

函数调用是为了。

iframe无法在AngularJS 1.3.0中运行

2 个答案: