AngularJS の変数から iframe src 属性を設定する

AngularJS で、iframe の src 属性を変数から設定しようとすると問題が発生する場合があります。変数。これに対処するためのステップバイステップのガイドは次のとおりです:

1. $sce サービスを注入する

$sce (Strict Contextual Escaping) サービスをコントローラに注入して、サニタイズを処理します。

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

2.リソース URL を信頼します

URL が安全であることを確認するには、コントローラー内で $sce.trustAsResourceUrl を使用します。

$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) 攻撃。