セキュリティとプロトコル[]クッキー、セッション、のsessionStorageとコントラストのlocalStorageの包括的な分析

ブラウザに保存されたデータを表示

HTML4ローカルCookieストア

ブラウザのキャッシュメカニズムは、クライアント上のユーザーデータの格納方法を提供することができ、それはサーバとの上のクッキー、セッションなどを使用してデータを交換することができます。

A、クッキーとセッション

クッキーとセッションは、ユーザーの身元会話モードブラウザを追跡するために使用されています。

違い：

1. サーバ側に保存されているブラウザに保存されたクッキー、セッション：ホールド

2. 用途：
   ①クッキーのメカニズム：お使いのブラウザは有効期限が設定されていない場合は、クッキーがブラウザとこの短いセッションクッキークッキーの端部を閉鎖のライフサイクルと一緒に、メモリに格納されます。ブラウザでクッキーの有効期限を設定した場合、クッキーはブラウザを閉じた後、ハードディスクに保存され、Cookieデータは、まだ消えて有効期限が終了するまで存在します。

   クッキーがクライアントに特別な情報サーバで、クッキーのテキストは、クライアントの方法で保存され、すべてのリクエストでそれを運ぶされます

   ②セッションメカニズム：サーバーはセッションオブジェクトを作成するための要求の必要性を受け取り、それを最初にチェックは、クライアント要求は、セッションIDが含まれています。そこSESSIONID場合、サーバはIDに基づいて対応するセッションオブジェクトを返します。クライアントがセッションIDを要求していない場合は、サーバーは新しいセッションオブジェクトを作成し、この応答でクライアントに返さセッションID。

   通常の相互作用にサーバーに送信されたセッションIDは、規則に従ってクライアントのブラウザにセッションIDクッキーを保存します。ユーザーの無効クッキー場合は、URL書き換えを使用する必要がありますresponse.encodeURL（URL）によって達成することができる;にencodeURLを終了するAPIは、ブラウザのクッキー、任意の処理なしのURLをサポートしている場合、であり、ブラウザが対応していない場合（またはクッキー時間）無効なユーザーには、ステッチの後にアクセスセッションIDをURLアドレスを書き換えます。

3. 保存されたコンテンツ：クッキーのみ原文に文字列型を格納、同様のデータ構造ハッシュテーブルによってセッションを保存するために、オブジェクトの任意のタイプをサポートすることができる（セッションは、複数のオブジェクトを含んでいてもよいです）

4. メモリのサイズ：クッキー：単一のクッキーが格納されたデータは、4キロバイトを超えることはできません。セッションにはサイズの制限されません。

5. セキュリティ：クッキー：クッキーは攻撃のために存在する：クッキー詐欺、クッキーが傍受、セキュリティがセッションクッキーよりも大きくなります。

   ：次の理由から
   、（1）はクッキーに保存されている、我々は最初のセッションクッキーを破るために壊す必要がありますセッションID
   誰かログに（2）セッションID、またはのsession_startがあります開始するので、クッキーはセッションIDを取得することができない可能性が破損する;
   （3）二度目のsession_start開始した後、セッションIDが無効になると、セッションの有効期限が切れる前に、セッションIDも失敗します。
   （4）セッションIDが暗号化された
   要約（5）、攻撃者はセッションIDの短期間での暗号化を解除する必要があります、それは難しいです。

6. シナリオ：

   クッキー：
   （1）は、ユーザがログインする（パスワードを覚えているか）自動ログイン次回を有効にするには、ウェブサイトを上陸させたかどうかを判断します。私たちはクッキーを削除する場合は、新しいログインから関連する情報を入力するたびにログインする必要があります。
   （2）ログイン情報の保存前回。
   ページ（3）最後に表示した保存する
   カウント（4）ブラウザ
   
   セッションを：
   ユーザごとに固有の情報を格納するためのセッションは、変数の値が異なる顧客セッションIDを区別するために、サーバ側に保存されています。
   （1）カート内のオンラインショッピングモール
   （2）ユーザのログイン情報保存する
   別のページが同じユーザーを使用するために、セッションの中へ（3）特定のデータを
   （4）は、不正なアクセスからユーザーを防ぐために

7. 欠点：
   クッキー：
   （1）限定されたサイズの
   （2）ユーザが操作することができる（無効）クッキー、限られた機能することを
   より安全（3）
   （4）いくつかの可能な状態がクライアントに格納されています。
   （5）サーバへのすべてのアクセスは、帯域幅を無駄に、クッキーを送信します。
   （6）データパス（パス）のクッキーの概念は、あなたはクッキーのみ、特定のパスの下に属して制限することができます。
   セッション：
   もっと（1）セッションは、サーバのメモリ圧力が相対的に大きくなり、何か、ユーザーがオンラインサイトの多数のためのより多くのサーバーのメモリフットプリントを保存します。
   クッキーが無効になっている場合（2）クッキーに依存（セッションIDクッキーが保存されて）、URL書き換えを使用する必要があります、安全ではない
   （3）は、セッション変数を作成し、ランダム性をたくさん持っていつでも呼び出すことができ、開発者は、正確な必要はありません。治療は、セッション変数のように過度の使用は、コード読めないし、整備不良になります。

HTML5のローカルストレージ

二つの重要なコンテンツに関連付けられたA、HTML5のローカルストレージ

ウェブストレージとローカルデータベース。これは、ウェブストレージがHTML4クッキーの記憶メカニズムの改善のためのストレージメカニズムです。クッキー記憶機構は、多くの欠点を持っているので、HTML5は、もはや、それを使用しない改善されたWebストレージストレージメカニズムに向けます。ローカルデータベースは新しい機能、クライアント上でローカルにデータベースを構築するためにそれを使用してHTML5で、サーバーのデータベースの内容は今直接大幅にサーバー側の負担を軽減し、クライアント上でローカルに保存することができます保存する必要があります元、しかし、データへのアクセス速度を加速します。

第二に、ウェブストレージを説明

私たちは、クッキーは、HTML4でユーザー名や他のクライアントなどの単純なユーザー情報を保存するために使用することができることを知っているが、長期の使用により、次の質問を永久クッキー保存されたデータがあることがわかります。

1. サイズ：クッキーのサイズは4キロバイトに制限されています。

2. 帯域幅：クッキーの一部を送信するときにクッキーを使用するHTTPトランザクションと一緒に送られ、そのため、帯域幅の浪費されています。

3. 複雑さ：正しいクッキーの操作には非常に困難です。

これらの問題を解決するには、HTML5で、再びクライアント上でローカルにデータを保存する機能を提供しています、それは、Webストレージです。

WebStorageの提供2つのHTML5のAPI：

localStorage（ローカルストレージ）とのsessionStorage（セッションストレージ）

1. ライフサイクル：のlocalStorage：のlocalStorageのライフサイクルは消えませんのlocalStorageでページまたはブラウザのデータを閉じた後、永続的です。localStorageは、データを削除するためのイニシアチブない限り、それ以外のデータは消えることはありません。

sessionStorageのライフサイクルは、現在のセッションでのみ有効です。sessionStorageは、「ブラウザウィンドウ」の概念を導入し、相同のsessionStorageは、ウィンドウは常にデータ中に存在しています。限りブラウザのウィンドウが閉じていないとして、ページを更新するか、別のページの相同性に移動しても、データはまだ存在しています。あなたは、ブラウザウィンドウを閉じた後でものsessionStorageは破棄されます。一方、同じページで別のウィンドウを開いているが、のsessionStorageは同じではありません。

2. 収納サイズ：のlocalStorageのsessionStorageサイズやデータを保存するには、一般的には：5メガバイト

3. 保管場所：のlocalStorageとのsessionStorageは、クライアントではなくサーバーとの双方向のコミュニケーションに格納されています。

4. 方法を提供することのlocalStorageのsessionStorageのみ格納文字列型は、複雑なオブジェクトのために使用することができ、解析JSON文字列化のECMAScriptオブジェクト：コンテンツタイプを格納します

5. 获取方式：のlocalStorage：window.localStorage ;;のsessionStorage：window.sessionStorageの;.

6. アプリケーションシナリオ：localStoragese：一般ローカルデータの長期保存に適した長期ログ（+ユーザがログインしているかどうかを決定する）で使用されます。sessionStorage：シングルサインに敏感なアカウント。

これまでのところ、多くのFirefox3.6、Chrome6以上、Safariの5以上、上記Pera10.50よりも、IE8以降のブラウザでは、のsessionStorageとのlocalStorageの使用をサポートしています。

三、WebStorageの利点

（1）大きな記憶容量：クッキーは4キロバイトであり、WebStorageが5メガバイトです。

（2）ネットワークトラフィックを保存するには：WebStorageサーバーに送信しない、データがローカルに格納されている直接得ることができるワードクッキー要求がネットワークを保存、対話クライアントとサーバの削減、サーバに送信されるように、それが美しいとされません交通;

（3）ページのみのセットを閲覧中にユーザーを維持する必要があると、非常に便利なのsessionStorageブラウザデータを閉じた後に廃棄することができます。

（4）高速なディスプレイ：オンWebStorage、ブラウザのキャッシュ自体といくつかのデータ記憶装置に連結されました。買収は速く速く現地時間からデータを取得し、サーバからよりも、取得することができます。

（5）安全性：HTTPヘッダーがサーバーに送信されるようWebStorageはない、クッキーのセキュリティ相は、それは、かなり高い傍受心配しないで、それでも問題が偽造されています。

（6）WebStorageが便利クッキーよりメソッド、データ操作を提供します。

setItem (key, value) ——  保存数据，以键值对的方式储存信息。

getItem (key) ——  获取数据，将键值传入，即可获取到对应的value值。

removeItem (key) ——  删除单个数据，根据键值移除对应的信息。

clear () ——  删除所有的数据

key (index) —— 获取某个索引的key

クッキー、のsessionStorageと比較のlocalStorage

sessionStorageとlocalStorageを使ってデモ

まず、データと表示データを保存するためのWebページ

<!DOCTYPE html>
<html>
    <head>
    <meta charset="UTF-8">
    <title>Web Storage 示例</title>
    </head>
    <body>
    <h1>Web Storage 示例</h1>
    <p id="msg"></p>
    <input type="text" id="input" />
    <input type="button" value="保存数据" onclick="saveStorage('input');" />
    <input type="button" value="读取数据" onclick="loadStorage('msg');" />
    </body>
</html>

あなたがデータを保存する「データ保存」ボタンをクリックすると、「読み取りデータ」ボタンloadStorageメソッド呼び出しのデータをクリックし、saveStorageメソッド呼び出しを呼び出す場合、次のように、これらの2つの方法は、スクリプトファイルscript.jsでした。

//sessionStorage 示例  (保存一个会话周期:从打开浏览器——到关闭浏览器窗口)
function saveStorage(id){
    var target=document.getElementById(id);
    var str=target.value;
    sessionStorage.setItem("message",str);
    //或者sessionStorage.message=str;
}
function loadStorage(id){
    var target=document.getElementById(id);
    var msg=sessionStorage.getItem("message");
    //或者var msg=sessionStorage.message;
    target.innerHTML=msg;
}
//localStorage 示例(可永久保存)    
function saveStorage(id){
    var target=document.getElementById(id);
    var str=target.value;
    localStorage.setItem("message",str);
    //或者localStorage.message=str;
}
function loadStorage(id){
    var target=document.getElementById("msg");
    var msg=localStorage.getItem("message");
    //或者var msg=localStorage.message;
    target.innerHTML=msg;
}

スクリプトファイルは、のsessionStorageとlocalStorageを2つの方法が使用されています。保存されたデータを読み取るために、「読み取りデータ」ボタンをクリックして、データを保存する「データ保存」ボタンをクリックすると、入力ボックスにユーザーの入力テキスト、どちらの方法があります。sessionStorageメソッドを使用するときに近いブラウザは、データが失われた場合でも、データを扱うの両方の方法で同じではない、、、次回はブラウザが読んで、オープンに「読み取りデータ」ボタンをクリックして任意の表示されませんデータ。localStorageメソッドを使用する場合は、ブラウザを閉じても、次の意志はまだあなたがブラウザを開いたときに保存されたデータを読み取ることができます。しかし、データが別のブラウザに保存されていること、保存された、別のブラウザを開き、このブラウザデータに保存されて読まれていません。

データを読み書きするために使用する基本的な方法で特定の外観

（1）のsessionStorage

データを保存する方法：

sessionStorage.setItem("key","value");
//或者写成
sessionStorage.key="value";

データ読み出し方法：

变量=sessionStorage.getItem("key");
//或者写成
变量=sessionStorage.key;

（2）のlocalStorage

データを保存する方法：

localStorage.setItem("key","value");
//或者写成
localStorage.key="value";

データ読み出し方法：

变量=localStorage.getItem("key");
//或者写成
变量=localStorage.key;

使用済みのsessionStorageの読み取りやデータを記憶する場合、データの保存と読み込みと書き込みのsessionStorageオブジェクトを、オブジェクトのメソッドを呼び出すために使用され、データを読み取るか、保存するために使用した場合のlocalStorage、のlocalStorageオブジェクトを使用して読み取ると、オブジェクトのメソッドを呼び出しています。

また、SetItem関数メソッドは、オブジェクトによってデータを保存することができ、でき、読み出し時に関係なく、オブジェクトは、そのオブジェクトのデータGetItemメソッドによって読み取ることができる対象のデータを読み出すカスタムプロパティの値であってもよいですオブジェクトデータのカスタム属性値が格納されます。あなたがデータを保存するときに「キー/キー」の形式で保存されます。そのオブジェクトのGetItemメソッドによってデータを読み出す場合、パラメータは、キーを返す、キーとして指定され、データを読み出すことにより、オブジェクトのカスタムプロパティの値は、カスタムプロパティは、オブジェクトの名前とすることができる場合カスタムプロパティキー属性値にアクセスするための鍵を得ることができるように、SetItem関数法とき結合の名前は、第2の鍵パラメータとして指定され、最初の引数で指定することによって記憶されたオブジェクトデータ;場合オブジェクトデータのカスタム属性値が格納されていることにより、カスタムプロパティをキーとして、オブジェクトの名前であってもよいし、次いで直接カスタムプロパティ値をキーに設定されています。

あなたがデータを保存すると、重複キーが同じ名前を保存することはできません。あなたは、保存キーを変更しますが、（のみ再取るキーにして、キーの保存）キーを変更することはできません。

次のように最後に、この例の結果は、ブラウザで実行されます。

参考記事

https://www.cnblogs.com/cencenyue/p/7604651.html

https://segmentfault.com/a/1190000007243675

https://www.zhihu.com/question/19786827