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 までご連絡ください。

ホットAIツール

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

脱衣画像を無料で

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AIヘンタイを無料で生成します。

ホットツール

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

神レベルのコード編集ソフト（SublimeText3）

ホットトピック

Gmailメールのログイン入り口はどこですか？

7392

Java チュートリアル

1630

CakePHP チュートリアル

1357

Laravel チュートリアル

1268

PHP チュートリアル

1216

Related knowledge

JavaScriptの文字列文字を交換します Mar 11, 2025 am 12:07 AM

JavaScript文字列置換法とFAQの詳細な説明この記事では、javaScriptの文字列文字を置き換える2つの方法について説明します：内部JavaScriptコードとWebページの内部HTML。 JavaScriptコード内の文字列を交換します最も直接的な方法は、置換（）メソッドを使用することです。 str = str.replace（ "find"、 "置換"）; この方法は、最初の一致のみを置き換えます。すべての一致を置き換えるには、正規表現を使用して、グローバルフラグGを追加します。 str = str.replace（/fi

8見事なjQueryページレイアウトプラグイン Mar 06, 2025 am 12:48 AM

楽なWebページレイアウトのためにjQueryを活用する：8本質的なプラグイン jQueryは、Webページのレイアウトを大幅に簡素化します。この記事では、プロセスを合理化する8つの強力なjQueryプラグイン、特に手動のウェブサイトの作成に役立ちます

独自のAjax Webアプリケーションを構築します Mar 09, 2025 am 12:11 AM

それで、あなたはここで、Ajaxと呼ばれるこのことについてすべてを学ぶ準備ができています。しかし、それは正確には何ですか？ Ajaxという用語は、動的でインタラクティブなWebコンテンツを作成するために使用されるテクノロジーのゆるいグループ化を指します。 Ajaxという用語は、もともとJesse Jによって造られました

10 jQueryの楽しみとゲームプラグイン Mar 08, 2025 am 12:42 AM

10の楽しいjQueryゲームプラグインして、あなたのウェブサイトをより魅力的にし、ユーザーの粘着性を高めます！ Flashは依然としてカジュアルなWebゲームを開発するのに最適なソフトウェアですが、jQueryは驚くべき効果を生み出すこともできます。また、純粋なアクションフラッシュゲームに匹敵するものではありませんが、場合によってはブラウザで予期せぬ楽しみもできます。 jquery tic toeゲームゲームプログラミングの「Hello World」には、JQueryバージョンがあります。ソースコード jQueryクレイジーワードコンポジションゲームこれは空白のゲームであり、単語の文脈を知らないために奇妙な結果を生み出すことができます。ソースコード jquery鉱山の掃引ゲーム

独自のJavaScriptライブラリを作成および公開するにはどうすればよいですか？ Mar 18, 2025 pm 03:12 PM

記事では、JavaScriptライブラリの作成、公開、および維持について説明し、計画、開発、テスト、ドキュメント、およびプロモーション戦略に焦点を当てています。

Ajaxを使用して動的にボックスコンテンツをロードします Mar 06, 2025 am 01:07 AM

このチュートリアルでは、Ajaxを介してロードされた動的なページボックスの作成を示しており、フルページのリロードなしでインスタントリフレッシュを可能にします。 JQueryとJavaScriptを活用します。カスタムのFacebookスタイルのコンテンツボックスローダーと考えてください。重要な概念： ajaxとjquery