AngularJS は $sce を使用してコードのセキュリティチェックを制御します

AngularJS は $sce を使用してコードのセキュリティチェックを制御します_AngularJS

WBOY

リリース： 2016-05-16 15:21:47

オリジナル

1082 人が閲覧しました

ブラウザには同一オリジン読み込みポリシーがあるため、異なるドメインにあるファイルを読み込んだり、ファイルなどの不十分なプロトコルを使用してファイルにアクセスしたりすることはできません。

angularJs のセキュリティ脆弱性を回避するために、一部の ng-src または ng-include はセキュリティ検証を実行するため、iframe 内の ng-src が使用できないことがよくあります。

SCE とは

SCE、つまり厳密なコンテキストエスケープ、私の理解は厳密なコンテキスト分離です...翻訳は正確ではないかもしれませんが、文字通り理解すると、angularjsがコンテキストアクセスを厳密に制御しているはずです。

SCE はデフォルトで angular で有効になっているため、サードパーティのスクリプトやライブラリの使用、HTML の読み込みなど、一部の安全でない動作がデフォルトで禁止されることを意味します。

これは確かに安全で、一部のクロスサイト XSS を回避しますが、特定のファイルを自分でロードしたい場合があります。このときどうすればよいでしょうか?

現時点では、$sce サービスを使用して、一部のアドレスを安全で承認されたリンクに変えることができます...簡単に言えば、これはドアマンに、この見知らぬ人は実際には私の良い友人であり、非常に信頼できる人であると伝えるようなものです。傍受する必要はありません。

一般的に使用されるメソッドは次のとおりです:

$sce.trustAs(タイプ,名前);
$sce.trustAsHtml(値);
$sce.trustAsUrl(値);
$sce.trustAsResourceUrl(値);
$sce.trustAsJs(値);

次の API は最初の API に基づいています。たとえば、trsutAsUrl は実際に trsutAs($sce.URL,"xxxx");

を呼び出します。

type のオプションの値は次のとおりです:

$sce.HTML
$sce.CSS
$sce.URL //タグ内にhref、imgタグ内にsrc
$sce.RESOURCE_URL //ng-include,src または ngSrc (iframe や Object
など) $sce.JS

公式 Web サイトの例: ng-bind-html

<!DOCTYPE html>
<html>
<head>
  <title></title>
  <script src="http://apps.bdimg.com/libs/angular.js/1.2.16/angular.min.js"></script>
</head>
<body ng-app="mySceApp">
  <div ng-controller="AppController">
   <i ng-bind-html="explicitlyTrustedHtml" id="explicitlyTrustedHtml"></i>
  </div>
  <script type="text/javascript">
    angular.module('mySceApp',[])
    .controller('AppController', ['$scope', '$sce',
     function($scope, $sce) {
      $scope.explicitlyTrustedHtml = $sce.trustAsHtml(
        '<span onmouseover="this.textContent="Explicitly trusted HTML bypasses ' +
        'sanitization."">Hover over this text.</span>');
     }]);
  </script>
</body>
</html>

ログイン後にコピー

動作例: ng-src リンク

<!DOCTYPE html>
<html>
<head>
  <title></title>
  <script src="http://apps.bdimg.com/libs/angular.js/1.2.16/angular.min.js"></script>
</head>
<body ng-app="mySceApp">
<div ng-controller="AppController">
  <iframe width="100%" height="100%" seamless frameborder="0" ng-src="{{trustSrc}}"></iframe>
</div>
  <script type="text/javascript">
    angular.module('mySceApp',[])
    .controller('AppController', ['$scope','$sce',function($scope,$sce) {
      $scope.trustSrc = $sce.trustAs($sce.RESOURCE_URL,"http://fanyi.youdao.com/");
      // $scope.trustSrc = $sce.trustAsResourceUrl("http://fanyi.youdao.com/");//等同于这个方法
     }]);
  </script>
</body>
</html>

ログイン後にコピー

まだ時間があるので、angular の ng-bind-html ディレクティブと $sce サービスを紹介しましょう

angular js の強力な機能の 1 つは、双方向データバインディングという優れた機能です。私たちがよく使用する 2 つは、フォーム用の ng-bind と ng-model です。しかし、私たちのプロジェクトでは、バックグラウンドから返されるデータにさまざまな HTML タグが含まれるような状況に遭遇することになります。例:

$scope.currentWork.description = “こんにちは、
今日はどこに行きますか?”
ng-bind-html のような命令を使用してバインドしますが、結果は期待どおりではありません。こんな感じです

こんにちは、

今日はどこに行きますか？

どうすればいいですか?

angular 1.2 より前のバージョンの場合、問題を解決するには $sce サービスを使用する必要があります。いわゆるsceとは「Strict Contextual Escaping」の略です。中国語に翻訳すると、「厳密なコンテキストモード」を意味し、安全なバインディングとしても理解できます。使い方を見てみましょう。

コントローラーコード:

$http.get('/api/work/get&#63;workId=' + $routeParams.workId).success(function (work) {$scope.currentWork = work;});

ログイン後にコピー

HTML コード:

<p> {{currentWork.description}}</p>

ログイン後にコピー

返されるコンテンツには一連の HTML タグが含まれています。結果は記事の冒頭で述べたとおりです。この時点で、安全にバインドするように指示する必要があります。これは、$sce.trustAsHtml() を使用して実行できます。このメソッドは、値を特権によって受け入れられ、「ng-bind-html」で安全に使用できる値に変換します。したがって、コントローラーに $sce サービスを導入する必要があります

controller('transferWorkStep2', ['$scope','$http','$routeParams','$sce', function ($scope,$http, $routeParams, $sce) {
$http.get('/api/work/get&#63;workId=' + $routeParams.workId)
.success(function (work) {
  $scope.currentWork = work;
  $scope.currentWork.description = $sce.trustAsHtml($rootScope.currentWork.description);
});

ログイン後にコピー

html コード:

<p ng-bind-html="currentWork.description"></p>

ログイン後にコピー

結果はページに完全に表示されます:

こんにちは

今日はどこに行きますか？

この方法で使用することもでき、フィルターにカプセル化して、いつでもテンプレート上で呼び出すことができます

app.filter('to_trusted', ['$sce', function ($sce) {
return function (text) {
  return $sce.trustAsHtml(text);
};
}]);

ログイン後にコピー

html コード:

すべてを選択してメモにコピーします

<p ng-bind-html="currentWork.description | to_trusted"></p>

ログイン後にコピー

AngularJS は $sce を使用してコードのセキュリティ チェックを制御します_AngularJS

AngularJS は $sce を使用してコードのセキュリティチェックを制御します_AngularJS