2016-01-20 8 views
7

翻訳キーは実際にはHTMLコードで、エンコードされていてもエンコードされていないものでもあります。角度翻訳ディレクティブ対フィルタ:XSSは可能ですか?

$scope.translations = { 
    "html_code" : "<script>alert('Alert!');</script>", 
    "html_code_full" : "<script>alert('Alert!');</script>", 
    "greeting" : "Welcome!" 
    } 

私はビューで翻訳されたテキストを表示するために、これらの値を使用すると、私は2つのメソッドを使用します。フィルタ{{translations.html_code|translate}}

としてディレクティブ<span translate>{{translations.html_code}}</span>

  • として

    1. を私は同じことをしてみてくださいtranslations.html_code_fullです。ここ は、ビューのコードです:

      translations.html_code = &lt;script&gt;alert('Alert!');&lt;/script&gt; 
      translations.html_code = <script>alert('Alert!');</script> 
      
      
      translations.html_code_full = <script>alert('Alert!');</script> 
      translations.html_code_full = 
      

      それはディレクティブの実装は、HTMLへの変換キーをエンコードしているが、フィルターがないことは明らかだとして:

      translations.html_code = {{translations.html_code|translate}} 
      translations.html_code = <span translate>{{translations.html_code}}</span> 
      
      translations.html_code_full = {{translations.html_code_full|translate}} 
      translations.html_code_full = <span translate>{{translations.html_code_full}}</span> 
      

      これは私が得る出力されます。なぜディレクティブとフィルタの実装の間に出力の違いがありますか? HTMLをレンダリングしていると警告が表示されないのはなぜですか?

      Here is the plunkデモ用に作成しました。

  • 答えて

    1

    AngularJSフレームの作業は、アプリケーションをXSS攻撃から保護しています。ですから、本当にWikipedia - Cross-site scripting

    - 2007年

    のようウェブサイト上で行わ

    クロスサイトスクリプティングは、Symantecによって文書のすべてのセキュリティ脆弱性の約84%を占めましたやろうとしている?多分、私たちはあなたに安全な方法でそれを行う方法を示すことができます。

    +0

    これはまさに私がやろうとしていたものです。別のWebアプリケーションでは、警告を受け取ることができましたが、何とか私はデモで再現できませんでした。 XSSを防ぐために、トランスレート、つまりフィルタ対ディレクティブを使用する*安全な方法を知りたかっただけです。 –

    +0

    [AngularJS Developer Guide - Security](https://docs.angularjs.org/guide/security)を開始するのがよいでしょう。次に、[AngularJS $ sce API Reference](https://docs.angularjs.org/api/ng/service/$sce)を参照してください。 SCEは、(a)デフォルトでは安全であり、(b)XSS、クリックジャッキなどのセキュリティ脆弱性の監査を非常に簡単にする方法でコードを記述するのを支援します。 – georgeawg

    +2

    私は同じ問題があります。私はローカルで私のアプリでローカルに変換することができますが、私のアプリでは攻撃を再現することができます。フィルターは安全だと思われますが、この問題を反映したplunkrを作成しようとするとcssが機能せず、スクリプトが正しくフィルタリングされます。 ng-translateのバージョン2.8.1と2.9.0を試しました。異なるサニタイズ戦略を試しましたが、いずれも機能しませんでした。私はそこに翻訳ディレクティブのセキュリティホールがあるのだろうかと思います。私が

    0

    私にとって、翻訳ライブラリはすべてのインスタンスをカバーしていませんでした。だから、私は通常のスクリプト攻撃と角度を狙った攻撃をカバーする必要がありました。 URLの一部をキーとして読み取った後、それをURLとして攻撃者に公開するメッセージとして表示します。

    私はに対してテスト2つのURL:翻訳ページ内のディレクティブではなく、フィルタを使用した場合は最初のものは正しくエスケープされるだろう私にとって

    /mypage.html#/{{{}.")));alert(1)//";}} 
    
    mypage.html#/%3Cscript%3Ealert('foo')%20%3C/script%3E 
    

    。 2番目は、ページでディレクティブを使用すると攻撃に成功しましたが、フィルタを使用すると正しくエスケープされました。

    最後に、スコープ変数に値を割り当てる前に、エスケープし、翻訳し、コントローラでチェックインしました。したがって、ページに翻訳ディレクティブまたはフィルタはありません。

    function translateParam(paramData, defaultKey){ 
         var deferred = $q.defer(); 
         var trusted = $sce.trustAsHtml(paramData); 
         $translate(trusted).then(
          function(translatedString){ 
           if(translatedString == trusted){ 
            //no key has been found so show a default 
            deferred.resolve($translate.instant(defaultKey)); 
           } 
           else{ 
            //the key has been found correclty 
            deferred.resolve(translatedString); 
           } 
          } 
         ); 
         return deferred.promise; 
        } 
    
    //called like this 
        $scope.error = translateParam('keyFromURL','defaultKeyInTranslateFile'); 
    

    $ q、$ sce、および$ translateを注入する必要があります。私にとってこれは最も安全で信頼性の高いソリューションです。

    関連する問題