angularjsアプリケーションのXSS問題

Question

これは、スクリプトタグ（以下に示す）を入力フィールドとその説明フィールドのいずれかに注入することに関するものです。値は細かく保存され、グリッドに表示されます。

Go to this <script>window.alert('abc')</script> and fill out the FAFSA.

フォームフィールド： -

アラートスクリプトは、説明フィールドから実行されている下のスクリーンショットで見ることができます。

モーダル実装（リストのドキュメントタイプリンクのクリック時に実行）： -

$rootScope.showNormalModal = function (message) { 
     var modalHtml = "<div class='modal-header'><button type='button' ng-click='cancel()' class='close' data-dismiss='modal' aria-label='Close'>" + 
      "<span aria-hidden='true'>×</span></button> " + 
      "<h4 class='modal-title' id='myModalLabel'><div>" + 
      "</div>" + message + "</h4></div>"; 

     var modalInstance = $modal.open({ 
      template: modalHtml, 
      controller: function ($scope, $modalInstance) { 
       $scope.cancel = function() { 
        $modalInstance.dismiss('cancel'); 
       }; 
      } 
     }); 
    } 
}); 

入力パラメータは、いくつかの操作でスクリプトタグを持っている場合、それはそれとして、UIに表示されていません代わりに、スクリプトはモーダルの前に実行されています。

ここで期待される動作は、リスト内のアンカーをクリックすると、その説明がポップアップに表示されるはずです。ここで起こっているのは、説明を表示する前に、スクリプトタグの注入のために警告ウィンドウが表示されています。

ポップアップの前に警告スクリプトが実行されるのを避ける方法を教えてください。

以下のすべてのスクリーンショットを添付しました。

一覧ページ： -

警告ウィンドウ： -

説明ポップアップ： -

ありがとうございます。

Answer 1

あなたはいくつかの標準的な公開/コンポーネントを使用してくださいコード

$rootScope.showNormalModal = function (message) { 
    var modalHtml = "<div class='modal-header'><button type='button' ng-click='cancel()' class='close' data-dismiss='modal' aria-label='Close'>" + 
    "<span aria-hidden='true'>×</span></button> " + 
    "<h4 class='modal-title' id='myModalLabel'><div>" + 
    "</div><div ng-bind=\"message\"></div></h4></div>"; 

    var modalInstance = $modal.open({ 
    template: modalHtml, 
    controller: function ($scope, $modalInstance, message) { 
     $scope.cancel = function() { 
     $modalInstance.dismiss('cancel'); 
     }; 
     $scope.message = message; 
    }, 
    resolve: { 
     message: function() { 
     return message; 
     } 
    } 
    }); 
}