$sce サービスを使用して AngularJS の変数から iFrame の src 属性を設定する方法

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

AngularJS の変数から iframe の src 属性を設定するには、$sce サービスをコントローラーに挿入する必要があります.

コントローラーの変更

AppCtrl で、$sce 依存関係を挿入します:

<code class="js">function AppCtrl ($scope, $sce) {
    // ...
}</code>

次に、setProject 関数内で trustAsResourceUrl:

を使用して URL を信頼します。

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

テンプレートの変更

テンプレートでは、ng-src 属性で currentProjectUrl 変数を使用します。

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

このアプローチにより、URL が AngularJS によって安全に処理され、潜在的なクロスサイト スクリプティングの脆弱性を防ぎます。

以上が$sce サービスを使用して AngularJS の変数から iFrame の src 属性を設定する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。