在 AngularJS 中从变量设置 iframe src 属性

在 AngularJS 中，尝试从以下位置设置 iframe 的 src 属性时可能会遇到问题一个变量。为了解决这个问题，这里有一个分步指南：

1。注入 $sce 服务

将 $sce（严格上下文转义）服务注入控制器以处理清理。

function AppCtrl($scope, $sce) {
  // ...
}

2.信任资源 URL

在控制器内使用 $sce.trustAsResourceUrl 以确保 URL 安全。

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

3.更新模板

在模板中，将ng-src属性绑定到受信任的URL变量。

示例代码

function AppCtrl($scope, $sce) {
  $scope.projects = {
    // ...
  };

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

{{project.name}}

附加说明

• 对不受信任的 URL 使用 $sce.trustSrc。
• 解决方案围绕防止跨站点通过确保 URL 安全来进行脚本 (XSS) 攻击。