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，那么它会拒绝它！ Hmmmmm！这是为什么？

有什么想法吗？

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

Answer 1

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

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

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

也就是说，以下是如何配置Angular的SCE以允许来自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`
    ]);
});

另请参阅另一个答案中的 short demo （这可以达到您想要的效果）。

在AngularJS中使用$ sce

1 个答案: