在 AngularJS 中使用 $sce

Question

我无法在我的 Angular 应用程序中显示 iFrame。我的用户可以输入 YouTube 网址，我的应用会将其直接转换为视频。

当然，Angular 不会直接允许这样做，因此您必须明确“信任”内容，所以我使用它来显示 iframe：

$sce.trustAsResourceUrl(url_of_video)

但是，我该如何返回？我希望能够将 URL 发送到我的后端，但在这种经过清理的形式中，它不再是原始的 url 字符串。

更新：

对此进行实验并提出以下代码：

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
});

我注意到我可以在数组中创建一个新的名称/值对并将其分配给原始 url，但如果我尝试将 item.data 分配给经过清理的数据的可信形式，那么它会拒绝它！嗯！这是为什么呢？

有什么想法吗？

更新 2 我决定创建两个版本的数据，一个用于前端（我用 $sce “信任”它），另一个用于后端。这似乎暂时解决了我的问题。

Answer 1

查看 this answers（其中包含指向更多答案和资源的链接）。

您应该了解信任用户输入的内容的含义以及$sce 的用途。

如果您想允许 YouTube 网址，最好只将这些网址“列入白名单”（而不是信任用户输入的任何网址）。
（不要忘记，SCE 并不是为了让您的应用程序防弹，但它是一种工具，可以帮助您使其更安全，并帮助您更轻松/更可靠地对其进行审核。）

---

也就是说，您可以通过以下方式配置 Angular 的 SCE 以允许来自 www.youtube.com 的 URL：

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

另请参阅另一个答案中的这个 short demo（你想要的）。