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

ホームページ

ウェブフロントエンド

jsチュートリアル

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

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 03:21 PM

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

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>

声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

Python vs. JavaScript：開発者の比較分析May 09, 2025 am 12:22 AM

PythonとJavaScriptの主な違いは、タイプシステムとアプリケーションシナリオです。 1。Pythonは、科学的コンピューティングとデータ分析に適した動的タイプを使用します。 2。JavaScriptは弱いタイプを採用し、フロントエンドとフルスタックの開発で広く使用されています。この2つは、非同期プログラミングとパフォーマンスの最適化に独自の利点があり、選択する際にプロジェクトの要件に従って決定する必要があります。

Python vs. JavaScript：ジョブに適したツールを選択するMay 08, 2025 am 12:10 AM

PythonまたはJavaScriptを選択するかどうかは、プロジェクトの種類によって異なります。1）データサイエンスおよび自動化タスクのPythonを選択します。 2）フロントエンドとフルスタック開発のためにJavaScriptを選択します。 Pythonは、データ処理と自動化における強力なライブラリに好まれていますが、JavaScriptはWebインタラクションとフルスタック開発の利点に不可欠です。

PythonとJavaScript：それぞれの強みを理解するMay 06, 2025 am 12:15 AM

PythonとJavaScriptにはそれぞれ独自の利点があり、選択はプロジェクトのニーズと個人的な好みに依存します。 1. Pythonは、データサイエンスやバックエンド開発に適した簡潔な構文を備えた学習が簡単ですが、実行速度が遅くなっています。 2。JavaScriptはフロントエンド開発のいたるところにあり、強力な非同期プログラミング機能を備えています。 node.jsはフルスタックの開発に適していますが、構文は複雑でエラーが発生しやすい場合があります。

JavaScriptのコア：CまたはCの上に構築されていますか？May 05, 2025 am 12:07 AM

javascriptisnotbuiltoncorc;それは、解釈されていることを解釈しました。

JavaScriptアプリケーション：フロントエンドからバックエンドまでMay 04, 2025 am 12:12 AM

JavaScriptは、フロントエンドおよびバックエンド開発に使用できます。フロントエンドは、DOM操作を介してユーザーエクスペリエンスを強化し、バックエンドはnode.jsを介してサーバータスクを処理することを処理します。 1.フロントエンドの例：Webページテキストのコンテンツを変更します。 2。バックエンドの例：node.jsサーバーを作成します。

Python vs. Javascript：どの言語を学ぶべきですか？May 03, 2025 am 12:10 AM

PythonまたはJavaScriptの選択は、キャリア開発、学習曲線、エコシステムに基づいている必要があります。1）キャリア開発：Pythonはデータサイエンスとバックエンド開発に適していますが、JavaScriptはフロントエンドおよびフルスタック開発に適しています。 2）学習曲線：Python構文は簡潔で初心者に適しています。 JavaScriptの構文は柔軟です。 3）エコシステム：Pythonには豊富な科学コンピューティングライブラリがあり、JavaScriptには強力なフロントエンドフレームワークがあります。

JavaScriptフレームワークのパワーは、開発を簡素化し、ユーザーエクスペリエンスとアプリケーションのパフォーマンスを向上させることにあります。フレームワークを選択するときは、次のことを検討してください。1。プロジェクトのサイズと複雑さ、2。チームエクスペリエンス、3。エコシステムとコミュニティサポート。

JavaScript、C、およびブラウザの関係May 01, 2025 am 12:06 AM

はじめに私はあなたがそれを奇妙に思うかもしれないことを知っています、JavaScript、C、およびブラウザは正確に何をしなければなりませんか？彼らは無関係であるように見えますが、実際、彼らは現代のウェブ開発において非常に重要な役割を果たしています。今日は、これら3つの間の密接なつながりについて説明します。この記事を通して、JavaScriptがブラウザでどのように実行されるか、ブラウザエンジンでのCの役割、およびそれらが協力してWebページのレンダリングと相互作用を駆動する方法を学びます。私たちは皆、JavaScriptとブラウザの関係を知っています。 JavaScriptは、フロントエンド開発のコア言語です。ブラウザで直接実行され、Webページが鮮明で興味深いものになります。なぜJavascrを疑問に思ったことがありますか

See all articles