web-dev-qa-db-ja.com

ローカルストレージとクッキー

すべてのクッキーは同じ機能を持っているように見えるので、すべてのクッキーをローカルストレージに移動することで、Webサイトの読み込み時間を短縮したいです。明らかな互換性の問題を除いて、Cookie機能を置き換えるためにローカルストレージを使用することに長所/短所（特にパフォーマンス上の観点）はありますか？

htmlcookieshttprequestlocal-storage
909
Gio Borje

クッキーとローカルストレージは異なる目的を果たします。クッキーは主に server-side を読むためのもので、ローカルストレージは client-side によってのみ読むことができます。それで、問題はあなたのアプリで、誰がこのデータを必要としているのか - クライアントとサーバーのどちらですか？

それがあなたのクライアント（あなたのJavaScript）であれば、それからどうしても切り替えます。各HTTPヘッダーのすべてのデータを送信することで帯域幅を無駄にしています。

それがあなたのサーバーなら、ローカルストレージはそれほど便利ではありません。なぜなら（Ajaxや隠しフォームフィールドなどを使って）何らかの方法でデータを転送する必要があるからです。サーバーが各要求の合計データのごく一部のサブセットしか必要としない場合、これは問題ないかもしれません。

どちらの方法でもセッションCookieをCookieのままにします。

技術的な違い、そして私の理解によれば、

  1. データを保存するための古い方法であることとは別に、Cookieには 4096 bytes（実際には4095）という制限があります。ローカルストレージはドメインあたり 5MBと同じくらい大きいです - SO質問またそれについて言及しています

  2. localStorageはStorageインターフェースの実装です。それは 有効期限なしでデータを保存します 、そしてJavaScriptを通してクリアされます only 、あるいはブラウザのキャッシュ/ローカルに保存されたデータをクリアします - クッキーの有効期限とは異なります。

1143
jpsimons

JWT の文脈では、Stormpathはそれらを格納するための可能な方法と、それぞれの方法に関連する（不利な）利点を概説したかなり役に立つ記事を書きました。

また、XSS攻撃とCSRF攻撃の概要、そしてそれらの攻撃方法についても簡単に説明します。

記事がオフラインになったり、サイトがダウンしたりした場合のために、この記事の短い抜粋を添付しました。

ローカルストレージ

問題点：

Web Storage（localStorage/sessionStorage）は同じドメイン上のJavaScriptを通してアクセス可能です。つまり、サイトで実行されているJavaScriptはすべてWebストレージにアクセスできることになります。そのため、クロスサイトスクリプティング（XSS）攻撃に対して脆弱になる可能性があります。一言で言えば、XSSは攻撃者があなたのページ上で走るJavaScriptを注入することができる一種の脆弱性です。基本的なXSS攻撃は、フォームの入力を通じてJavaScriptを投入しようとします。攻撃者は警告を発します（ 'You are Hacked'）。ブラウザによって実行され、他のユーザーが表示できるかどうかを確認するためのフォームに変換します。

予防策：

XSSを防ぐための一般的な対応は、信頼できないデータをすべてエスケープしてエンコードすることです。しかし、これは完全な話からは程遠いです。 2015年に、最新のWebアプリはCDNまたは外部のインフラストラクチャでホストされているJavaScriptを使用します。最新のWebアプリケーションには、A/Bテスト、ファンネル/市場分析、および広告用のサードパーティJavaScriptライブラリが含まれています。 Bowerのようなパッケージマネージャを使って、他の人のコードを私たちのアプリにインポートします。

使用しているスクリプトのうち1つだけが危険にさらされているとどうなりますか？悪意のあるJavaScriptがページに埋め込まれる可能性があり、Web Storageが危険にさらされます。この種のXSS攻撃は、知らないうちにあなたのサイトを訪問しているすべての人のWeb Storageを攻撃することができます。これが、多くの組織が価値のあるものを保存したり、Webストレージに情報を信頼したりしないことをお勧めする理由です。これにはセッションIDとトークンが含まれます。

ストレージメカニズムとして、Web Storageは転送中に安全な規格を強制しません。 Web Storageを読んでそれを使用する人は誰でも彼らが常にHTTPS経由でJWTを送信し、決してHTTP経由で送信しないことを保証するために彼らの十分な注意を払わなければなりません。

クッキー

問題点：

HttpOnly Cookieフラグと一緒に使用されたCookieは、JavaScriptからはアクセスできないため、XSSの影響を受けません。 Secure cookieフラグを設定して、CookieがHTTPS経由でのみ送信されるようにすることもできます。これは、クッキーがトークンやセッションデータを保存するために過去に利用されてきた主な理由の1つです。最近の開発者は、状態をサーバーに保存することを伝統的に要求していたため、クッキーの使用をためらっています。そのため、RESTfulなベストプラクティスは破られています。 JWTをCookieに保管する場合、保管メカニズムとしてのCookieでは、サーバーに状態を保管する必要はありません。これは、サーバーが要求を処理するために必要なすべてのものをJWTがカプセル化しているためです。

ただし、Cookieはさまざまな種類の攻撃、つまりクロスサイトリクエストフォージェリ（CSRF）に対して脆弱です。 CSRF攻撃は、悪意のあるWebサイト、電子メール、またはブログによって、ユーザーが現在認証されている信頼済みサイトでユーザーのWebブラウザに不要な操作を行わせることによって発生する攻撃の一種です。これは、ブラウザがCookieを処理する方法を悪用したものです。クッキーは、それが許可されているドメインにのみ送信できます。デフォルトでは、これは元々Cookieを設定したドメインです。 cookieは、あなたがgalaxies.comまたはhahagonnahackyou.comのどちらにいるかにかかわらず、リクエストに応じて送信されます。

予防策：

同期トークンパターンを使用することでCSRFを防ぐことができます。これは複雑に聞こえますが、現代のすべてのWebフレームワークはこれをサポートしています。

たとえば、AngularJSには、Cookieが自分のドメインからのみアクセス可能であることを検証するためのソリューションがあります。 AngularJSドキュメントから直接：

XHR要求を実行するとき、$ httpサービスはクッキー（デフォルトではXSRF-TOKEN）からトークンを読み取り、それをHTTPヘッダー（X-XSRF-TOKEN）として設定します。ドメインで実行されているJavaScriptだけがCookieを読み取ることができるので、XHRはドメインで実行されているJavaScriptからきたものであることをサーバーから確認できます。 xsrfToken JWTクレームを含めることで、このCSRF保護をステートレスにすることができます。

{
  "iss": "http://galaxies.com",
  "exp": 1300819380,
  "scopes": ["Explorer", "solar-harvester", "seller"],
  "sub": "[email protected]",
  "xsrfToken": "d9b9714c-7ac0-42e0-8696-2dae95dbc33e"
}

WebアプリケーションフレームワークのCSRF保護を利用することで、JWTを保存するためのCookieが堅牢になります。あなたのAPIからHTTP RefererとOriginヘッダをチェックすることによってCSRFを部分的に防ぐこともできます。 CSRF攻撃には、アプリケーションとは無関係のRefererヘッダーとOriginヘッダーがあります。

完全な記事はここで見つけることができます： https://stormpath.com/blog/where-to-store-your-jwts-cookies-vs-html5-web-storage/

また、トークン自体の構造に関して、JWTを最適に設計および実装する方法に関する役立つ記事もあります。 https://stormpath.com/blog/jwt-the-right-way/

172
XtraSimplicity

localStorageを使用すると、Webアプリケーションはユーザーのブラウザ内にデータをローカルに保存できます。 HTML 5以前は、アプリケーションデータはすべてのサーバーリクエストに含まれるクッキーに保存されていました。 Webサイトのパフォーマンスに影響を与えることなく、大量のデータをローカルに保存できます。 localStorageはもっと現代的ですが、両方のテクニックには賛否両論があります。

クッキー

長所

  • レガシーサポート（ずっと続いています）
  • 永続データ
  • 有効期限

短所

  • 各ドメインはすべてのCookieを単一の文字列に格納するため、データの解析が困難になります。
  • データは暗号化されていないため、問題が発生します。サイズが小さいにもかかわらず、CookieがHTTPリクエストごとに送信される限られたサイズ（4KB）
  • SQLインジェクションはcookieから実行できます

ローカルストレージ

長所

  • 最近のほとんどのブラウザによるサポート
  • ブラウザに直接保存されている永続データ
  • 同一原点規則がローカルストレージデータに適用される
  • すべてのHTTP要求と共に送信されるわけではありません
  • ドメインあたり最大5MBのストレージ（5120KB）

短所

  • 以前はサポートされていませんでした：IE 8、Firefox 3.5、Safari 4、Chrome 4、Opera 10.5、iOS 2.0、Android 2.0
  • サーバーにクライアント情報を保存する必要がある場合は、意図的に送信する必要があります。

localStorageの使い方はセッションのものとほとんど同じです。それらはほとんど正確なメソッドを持っているので、sessionからlocalStorageへの切り替えは本当に子供向けのものです。ただし、格納されているデータがアプリケーションにとって本当に重要な場合は、localStorageが使用できない場合のために、おそらくバックアップとしてcookieを使用します。 localStorageに対するブラウザのサポートを確認したい場合は、次の簡単なスクリプトを実行するだけです。

/* 
* function body that test if storage is available
* returns true if localStorage is available and false if it's not
*/
function lsTest(){
    var test = 'test';
    try {
        localStorage.setItem(test, test);
        localStorage.removeItem(test);
        return true;
    } catch(e) {
        return false;
    }
}

/* 
* execute Test and run our custom script 
*/
if(lsTest()) {
    // window.sessionStorage.setItem(name, 1); // session and storage methods are very similar
    window.localStorage.setItem(name, 1);
    console.log('localStorage where used'); // log
} else {
    document.cookie="name=1; expires=Mon, 28 Mar 2016 12:00:00 UTC";
    console.log('Cookie where used'); // log
}

"Secure（SSL）ページのlocalStorage値は分離されています" 'http'から 'https'セキュアプロトコルに切り替えた場合、localStorageは使用できないことに気付く人もいます安全なプロトコルを使用している場合は、これを知っておくことが重要です。

79
DevWL

ローカルストレージは最大5MBのオフラインデータを保存できますが、セッションは最大5MBのデータを保存できます。しかしクッキーはテキストフォーマットで4キロバイトのデータしか保存できません。

JSON形式のLOCAlおよびSessionストレージデータ、したがって解析が容易です。しかし、クッキーデータは文字列形式です。

7
Avinash Malhotra

また、モバイルSafariの一部のバージョンでは、ユーザーが「プライベート」モードでブラウズするときにlocalStorageを使用できないことも言及する価値があります。

MDNから引用（ https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage ）：

注：iOS 5.1以降、Safari MobileはlocalStorageデータをキャッシュフォルダーに保存します。これは、通常はスペースが不足している場合に、OSの負担でクリーンアップされることがあります。 Safari MobileのPrivate BrowsingモードもlocalStorageへの書き込みを完全に禁止します。

7
benjaminz

ローカルストレージの速度は、クライアントが使用しているブラウザとオペレーティングシステムによって大きく異なります。 Mac上のChromeまたはSafariは、特に新しいAPIを使用すると、PC上のFirefoxよりはるかに高速になる可能性があります。いつものように、テストはあなたの友人です（私はベンチマークを見つけることができませんでした）。

私は、クッキーとローカルストレージの間に大きな違いは見られません。また、互換性の問題についてももっと心配する必要があります。すべてのブラウザが新しいHTML5 APIをサポートし始めたわけでもないので、スピードと互換性のためにはクッキーが最善の策です。

7
pop850