2

Angular アプリケーションには、サーバー側のユーザー コンテンツで満たされたリンクがあります。そのため、そのリンク コンテンツを解釈しないように Angular に指示する必要があります。それ以外の場合、ユーザーまたは攻撃者がそこに Angular バインディング式 ({{User.Password}} など) を配置すると、Angular はそれを評価し、セキュリティ ホール (一種の XSS 攻撃) を開きます。

ng-non-bindableはほとんどそれを行います。ただし、リンク自体を Angular で操作することも必要です。

<a href="" class="side-bar-element" ng-class="{ 'side-bar-element-selected': isSiteSelected(@site.value.ID) }">@site.value.Name</a>

@site.value.Name は、コンテンツを挿入するサーバー側のコードです。

ng-non-bindable を a 要素に配置すると、ng-class は機能しません。私が見ることができる唯一の解決策は、その中に別のスパン/ divを挿入し、それに ng-non-bindable を適用することです:

<a href="" class="side-bar-element" ng-class="{ 'side-bar-element-selected': isSiteSelected(@site.value.ID) }"><span ng-non-bindable>@site.value.Name</span></a>

Angular がサーバー側のデータに干渉するのを止めるためだけに HTML 構造を変更する必要があるため、これは扱いにくいように思えます。

よりクリーンなソリューションはありますか？

理想的には、ng-non-bindable (またはバリアント) が「コンテンツをバインドしないが、それ以外の場合はこの要素を通常どおりに扱う」ことを意味するようにしたいと考えています。

4

1 に答える 1

0

ユーザーまたは攻撃者が Angular バインディング式をユーザー コンテンツ ({{User.Password}} など) に挿入すると、Angular はそれを評価し、セキュリティ ホール (一種の XSS 攻撃) を開きます。

サービスを使用して、ディレクティブの優先度$delegateを下げます。ng-non-bindable

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="nonBindableExample">  
  <script>
    function delegator($delegate)
     {
     /* Override the directive definition object (DDO) */ 
     $delegate[0].priority = 0;
     
     return $delegate;
     }


    function provider($provide)
     {
     /* Decorate ng-non-bindable with a proxy function */
     $provide.decorator('ngNonBindableDirective', ["$delegate", delegator]);
     }

    /* Inject the provider and the delegator methods with services */
    provider['$inject'] = ['$provide'];
    delegator['$inject'] = ['$delegate'];

    /* Inject the module with the new provider */
    angular.module('nonBindableExample', []);
    angular.module("nonBindableExample").config(["$provide",provider]);
  </script>
  
<div>{{$id}}</div><div ng-non-bindable class="{{$id}}">{{$id}}</div></div>
</body>

1 つの DOM 要素に複数のディレクティブが定義されている場合、ディレクティブが適用される順序を指定する必要がある場合があります。優先度は、コンパイル関数が呼び出される前にディレクティブをソートするために使用されます。優先度は数値で定義されます。数値の優先度が高いディレクティブが最初にコンパイルされます。リンク前の機能も優先順に実行されますが、リンク後の機能は逆の順序で実行されます。同じ優先度のディレクティブの順序は定義されていません。デフォルトの優先度は 0 です。

または、次のように単純にユーザー コンテンツを分離します<script type="text/ng-template">。 

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
  <!--Declare module-->
  <script>
  angular.module('foo', []);
  </script>

<!--Auto Bootstrapping-->
<div ng-app="foo">  
  <!--Inline Template-->
  <script type="text/ng-template" id="baz">
    <span ng-non-bindable>Hi {{bar}}</span>
  </script>

  <!--data binding-->
  <a href="" ng-init="bar=1" ng-class="{{bar}}" ng-include="'baz'"></a>
</div>

要素でディレクティブを使用し、ng-includeディレクティブでa要素を使用して、span要素ng-non-bindableからテキストを分離します。

参考文献

于 2016-02-11T02:56:42.863 に答える