AngularJS で変数から iframe src 属性を安全に設定する方法は?

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

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

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

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

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

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

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

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

3.テンプレートを更新します

テンプレートで、ng-src 属性を信頼できる URL 変数にバインドします。

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

コード例

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

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

<code class="html"><ul ng-repeat="project in projects">
  <li ng-click="setProject(project.id)">{{project.name}}</li>
</ul>

<iframe ng-src="{{currentProjectUrl}}">
  Something wrong...
</iframe></code>

追加メモ

• 信頼できない URL には $sce.trustSrc を使用してください。
• この解決策は、クロスサイト スクリプティング (XSS) の防止を中心に展開します。 ) URL が安全であることを確認することで攻撃します。

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