web-dev-qa-db-ja.com

ブラウザベースのアプリケーションでJWTを保存する場所とその使用方法

認証システムにJWTを実装しようとしていますが、いくつか質問があります。トークンを保存するには、Cookieを使用できますが、localStorageまたはsessionStorageを使用することもできます。

どちらが最良の選択でしょうか？

JWTがCSRFからサイトを保護していることを読みました。ただし、JWTトークンをCookieストレージに保存すると、どのように機能するか想像できません。

それではCSRFからどのように保護しますか？

更新1
次のような使用例を見ました：

curl -v -X POST -H "Authorization: Basic VE01enNFem9FZG9NRERjVEJjbXRBcWJGdTBFYTpYUU9URExINlBBOHJvUHJfSktrTHhUSTNseGNh"

ブラウザからサーバーにリクエストを行うときに、どのように実装できますか？また、URLにトークンを実装している人もいます。

http://exmple.com?jwt=token

AJAX経由でリクエストを行う場合、jwt: [token]そして、ヘッダーからトークンを読み取ることができます。

更新2

Advanced REST Client Google Chrome=拡張機能をインストールし、カスタムヘッダーとしてトークンを渡すことができました。サーバーにGETリクエストを送信しますか？

javascriptweb-servicessecuritycookiesjwt
37
zero_coding

このWebサイトをご覧ください： https://auth0.com/blog/2014/01/07/angularjs-authentication-with-cookies-vs-token/

それらを保存する場合は、localStorageまたはsessionStorageを使用するか、Cookieを使用する必要があります。 Authorizationヘッダーも使用する必要がありますが、Basicスキームの代わりにBearerスキームを使用します。

curl -v -X POST -H "Authorization: Bearer YOUR_JWT_HERE"

JSでは、次のコードを使用できます。

<script type='text/javascript'>
// define vars
var url = 'https://...';

// ajax call
$.ajax({
    url: url,
    dataType : 'jsonp',
    beforeSend : function(xhr) {
      // set header if JWT is set
      if ($window.sessionStorage.token) {
          xhr.setRequestHeader("Authorization", "Bearer " +  $window.sessionStorage.token);
      }

    },
    error : function() {
      // error handler
    },
    success: function(data) {
        // success handler
    }
});
</script>
22
Florent Morselli

ストレージを選択することは、決定的な最良の選択を見つけることよりも、トレードオフに関するものです。いくつかのオプションを見てみましょう。

オプション1-Webストレージ（localStorageまたはsessionStorage）

長所

  • ブラウザはWebストレージからHTTPリクエストに自動的に何も含めないため、CSRFに対して脆弱（not
  • データを作成したドメインとまったく同じドメインで実行されているJavascriptのみがアクセスできます
  • 最も意味的に正しいアプローチを使用して、HTTPでトークン認証資格情報（AuthorizationスキームのBearerヘッダー）を渡すことができます。
  • 認証を含める必要のあるリクエストを簡単に選択することは非常に簡単です

短所

  • データを作成したサブドメインのサブドメインで実行されているJavascriptからアクセスできません（example.comによって書き込まれた値はsub.example.comによって読み取れません）
  • ⚠️はXSSに対して脆弱です
  • 認証されたリクエストを実行するには、リクエストをカスタマイズできるブラウザ/ライブラリAPIのみを使用できます（Authorizationヘッダーでトークンを渡します）

使用法

ブラウザー localStorage または sessionStorage APIを利用して、リクエストの実行時にトークンを保存および取得します。

localStorage.setItem('token', 'asY-x34SfYPk'); // write
console.log(localStorage.getItem('token')); // read

オプション2-HTTPのみのCookie

長所

  • XSSに対して脆弱なnot
  • ブラウザは、Cookieの仕様（ドメイン、パス、および有効期間）を満たすリクエストにトークンを自動的に含めます
  • Cookieはトップレベルドメインで作成され、サブドメインによって実行されるリクエストで使用できます

短所

  • ⚠️それはCSRFに対して脆弱です
  • サブドメインでのCookieの使用可能性を認識し、常に考慮する必要があります
  • Cookieを含める必要のある要求をチェリーピッキングすることはできますが、面倒です
  • ブラウザがCookieを処理する方法にわずかな違いがある場合でも、いくつかの問題が発生する可能性があります
  • ⚠️気をつけなければ、XSSに対して脆弱なCSRF緩和戦略を実装できます
  • サーバー側は、より適切なAuthorizationヘッダーではなく、認証のためにCookieを検証する必要があります

使用法

ブラウザが自動的に処理を行うため、クライアント側で何もする必要はありません。

オプション3-JavaScriptでアクセス可能なCookie サーバー側では無視されます

長所

  • それはnotCSRFに対して脆弱です（サーバーによって無視されるため（）
  • Cookieはトップレベルドメインで作成され、サブドメインによって実行されるリクエストで使用できます
  • 最も意味的に正しいアプローチを使用して、HTTPでトークン認証資格情報（AuthorizationスキームのBearerヘッダー）を渡すことができます。
  • 認証を含める必要のあるリクエストを簡単に選択するのは簡単です

短所

  • ⚠️これはXSSに対して脆弱です
  • Cookieを設定するパスに注意していない場合、Cookieはリクエストによってブラウザによって自動的に含まれ、不要なオーバーヘッドが追加されます
  • 認証されたリクエストを実行するには、リクエストをカスタマイズできるブラウザ/ライブラリAPIのみを使用できます（Authorizationヘッダーでトークンを渡します）

使用法

ブラウザー document.cookie APIを利用して、リクエストを実行するときにトークンを保存してから取得します。このAPIはWebストレージほどきめ細かいものではないため（すべてのCookieを取得）、必要な情報を解析するために余分な作業が必要です。

document.cookie = "token=asY-x34SfYPk"; // write
console.log(document.cookie); // read

その他の注意事項

これは奇妙なオプションのように思えるかもしれませんが、トップレベルドメインとすべてのサブドメインでストレージを利用できるという素晴らしい利点があります。これはWebストレージでは得られないものです。ただし、実装はより複雑です。

結論-最終ノート

最も一般的なシナリオに対する私のの推奨事項は、主に次の理由により、オプション1を使用することです

  • Webアプリケーションを作成する場合、XSSに対処する必要があります。常に、トークンの保存場所に関係なく
  • Cookieベースの認証を使用しない場合、CSRFはレーダーに表示されることさえないので、心配する必要はもう1つあります。

また、Cookieベースのオプションもまったく異なることに注意してください。オプション3のCookieは、純粋にストレージメカニズムとして使用されるため、クライアント側の実装の詳細であるかのように見えます。ただし、オプション2は、認証を扱うより伝統的な方法を意味します。このCookie対トークンの詳細については、この記事がおもしろいと思うかもしれません： Cookie vsトークン：The Definitive Guide 。

最後に、どのオプションもそれについて言及していませんが、HTTPSの使用はもちろん必須です。これは、Cookieを適切に作成して考慮に入れる必要があることを意味します。

83
João Angelo

このブログ投稿では、ブラウザーストレージとCookieの優れた比較比較を行い、それぞれの場合に発生する可能性のあるすべての攻撃に対処しています。 https://stormpath.com/blog/where-to-store-your-jwts-cookies-vs-html5-web-storage/

短い答え/ネタバレ：クッキーとjwtにxsrfトークンを追加します。ブログ投稿の詳細な説明。

10
Carlos Arrastia