AngularJS で iframe の src 属性を動的に設定する

AngularJS で iframe を操作する場合、多くの場合、変数。ただし、標準の割り当てでこれを実行しようとすると、iframe で空の src 属性がレンダリングされる可能性があります。

問題と解決策について

試行すると問題が発生します。信頼できない URL を使用して src 属性を設定します。 AngularJS は、潜在的な XSS (クロスサイト スクリプティング) 攻撃を防ぐためのセキュリティ対策を実装しています。これを軽減するには、URL を割り当てる前に $sce (Strict Contextual Escaping) サービスを使用して URL を「信頼」する必要があります。

$sce サービスの trustAsResourceUrl() メソッドを使用して、明示的にマークを付けることができます。 URL を信頼できるものとして、AngularJS テンプレートで安全に使用できることを確認します。

コードの実装

提供されたコントローラー/app.js ファイルに、$sce を挿入します。サービスを AppCtrl に追加し、setProject() 関数を次のように変更します。

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

HTML テンプレートで、currentProjectUrl 変数を参照するように iframe の src 属性を更新します:

説明

trustAsResourceUrl() を呼び出すことにより、URL は信頼できるものとしてマークされ、AngularJS テンプレートで安全に使用できるようになります。 ng-src ディレクティブは、信頼できる URL を使用して iframe の src 属性を設定します。

補足

• trustAsResourceUrl() メソッドは、次の場合にのみ使用してください。 URL は安全で信頼できることがわかっています。
• URL が完全修飾されていない場合 (スキームやホスト名が欠落しているなど)、AngularJS はセキュリティ警告をスローする可能性があります。
• セキュリティ上の懸念に対処するためユーザーが指定した URL を受け入れる前に、サーバー側で適切な検証とサニタイズを実装することを常にお勧めします。