AngularJS で iframe の src 属性を安全に動的に設定する方法

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

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

問題と解決策を理解する

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

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

コードの実装

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

<code class="javascript">$scope.setProject = function (id) {
    $scope.currentProject = $scope.projects[id];
    $scope.currentProjectUrl = $sce.trustAsResourceUrl($scope.currentProject.url);
}</code>

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

<code class="html"><iframe ng-src="{{currentProjectUrl}}"></iframe></code>

説明

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

追加メモ

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

以上がAngularJS で iframe の src 属性を安全に動的に設定する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。