在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) 攻擊。