在 AngularJS 中动态设置 iframe 的 src 属性

在 AngularJS 中使用 iframe 时，通常需要根据多变的。但是，尝试使用标准分配来执行此操作可能会导致 iframe 中呈现空 src 属性。

了解问题和解决方案

尝试时会出现问题使用不受信任的 URL 设置 src 属性。 AngularJS 实施安全措施来防止潜在的 XSS（跨站脚本）攻击。为了缓解这种情况，需要在分配 URL 之前使用 $sce（严格上下文转义）服务来“信任”该 URL。

$sce 服务的 trustAsResourceUrl() 方法可用于显式标记URL 受信任，确保它可以在 AngularJS 模板中安全使用。

代码实现

在提供的controllers/app.js文件中，将$sce服务注入到AppCtrl中，并修改setProject()函数如下：

$scope.setProject = function (id) {
    $scope.currentProject = $scope.projects[id];
    $scope.currentProjectUrl = $sce.trustAsResourceUrl($scope.currentProject.url);
}

在 HTML 模板中，更新 iframe 的 src 属性以引用 currentProjectUrl 变量：

说明

通过调用trustAsResourceUrl()， URL 被标记为可信，可以在 AngularJS 模板中安全地使用。然后 ng-src 指令将使用受信任的 URL 设置 iframe 的 src 属性。

附加说明

• trustAsResourceUrl() 方法仅应在以下情况下使用该 URL 已知是安全且可信的。
• 如果 URL 不完全限定（例如，缺少方案或主机名），AngularJS 可能会抛出安全警告。
• 为了解决安全问题，建议在接受用户提供的 URL 之前实施适当的服务器端验证和清理。