ローカル環境でのCookieについて(javascript)

ユーザーにhtmlファイルをダウンロードしてもらい
ローカル環境で使用してもらうことを想定しています

Electron等は使わない
単一のhtmlファイルのみで完結する
ヘッダにはCookieをセットする記述はしない(javascript内のみ)
Chrome IE FireFox Safari での使用を想定
Web StorageとCookieをそれぞれ対応している環境に合わせて使い分ける
CookieにはSecure属性、HttpOnly属性は指定しない

現時点で特に動作に問題があるわけではないのですが
ブラウザのデベロッパーツール内にCookie内容が表示されない問題が起こっています

test.html(一部抜粋)

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">

<title>JavaScript テスト</title>

</head>

<body>
<script type="text/javascript">

// try catch    
function enable_check(){

// ::フェーズ 1::

// LocalStrage対応してる?
  if (typeof(Storage) === "undefined"){
 alert('not support');
}else{
 console.log('Support');

// ::フェーズ 2::

//localStrage対応なら、テストでストレージをセット
  try {
    message = 'it is a test, can you see it in dev panel ?';
    localStorage.setItem('test', message);
    if(typeof localStorage.test !== "undefined"){

console.log("localStorage is eneble in Local ");

  }
}
  catch (e) {
console.log(e);

// ::フェーズ 3::

// キャッシュがあるか
if(document.cookie !== ""){
  console.log("ある");
  var w = document.cookie.split( '; ' );
  alert(w);
}else{
// なければ作成
var expire = new Date();
expire.setTime( expire.getTime() + 1000 * 60 );

document.cookie = 'data=123;expires=' + expire.toUTCString();
document.cookie = 'data2=abc;expires=' + expire.toUTCString();
  console.log("ない");


      }
    }
  }
}
enable_check();
</script>
</body>
</html>

::フェーズ 1:: は四つ全てのブラウザで真
::フェーズ 2:: でエラーを吐くのがIEとSafariです(ローカルでのWeb Storage使用不可)
::フェーズ 3:: へとIEとSafariが進みます(Cookieを使用する)

上記はファイルの一部を抜粋、改変したものです
アプリケーションとしての開発は終わっており、全体の動作としては問題なく動くのですが、ブラウザのデベロッパーツール内にCookieが表示されません（Safari）（IE）

javascriptでのCookieは文字列としての扱いとのことで
::フェーズ 3:: 内に変更があったとしても、文字列処理を書き直すことで
問題なく動作させることができるはずだと、見当しています。

質問としては
どうすればデベロッパーツール内にCookieを表示することができますか？
ということになります
([webインスペクタ]　-> [ストレージ]　内にcookie内容を表示したい)
javascriptによるcookieの内部処理
正式な記法、等について、詳しい方がいらっしゃいましたら
ご教授願います

Safariでの表示

↓ 上記ファイル、リロードするとアラートが表示される

↓ コンピューターローカルの書類としてのcoockieが保存されていることが確認できる

↓　アラートとしてCookieを表示させることはできているがデベロッパーツールには
Cookieが表示されない

環境
mac OS Sierra 10.12.6

追記
win8.1 IE11のキャプチャ

行動規範の内容に同意します

回答3件

ベストアンサー

ローカルファイル

ローカルファイルにも二種類あります。

file:///C:/www/sample.html
http://127.0.0.1/sample.html

SSを見る限りでは、file スキームを使っているので前者ですが、「HTTPプロトコルを使っていない」という問題があります。

HTTP Cookie

9. IANA Considerations - RFC 6265 — HTTP State Management Mechanism （日本語訳）

Cookie関係のHTTPヘッダはHTTPというプロトコルで動作するように設計されています。
従って、Cookieはfileスキームでは使用できません。
使用できるブラウザが存在するのは、ブラウザが勝手にHTTPヘッダを返しているかのように処理してくれているからだと思います。
fileスキームを使用している限りは、全てのブラウザで動作する保証はありません。

解決法としては、Apache等のHTTPサーバをローカルPCにインストールする事が考えられます。
HTTPサーバが存在すれば、http://127.0.0.1/ でアクセスする事でHTTPのプロトコルを利用することが出来ます。

Web Strage

Web Strageでは**生成元(origin)**を見て、同一サイト内で共有できるストレージを定義しています。

仕様によれば、同一生成元と見なされる条件は次の4つです。

A scheme (a scheme).
A host (a host).
A port (a port).
A domain (null or a domain). Null unless stated otherwise.

例えば、次のURLが設定されているなら、

file:///C:/www/sample.html

次の生成元(Origin)が設定されると推定されます。

scheme … "file"
host … "C"
port … null
domain … null

file:///C:/ で始まるURLは全て同一生成元(同一サイト)と見なされる為、file:///C:/www/sample.html で作成された「あなたのストレージ」は file:///C:/foo/evil.html によって悪意あるユーザによる「あなたのストレージ」への参照を許してしまいます。
それはセキュリティ上の脆弱性となる為、Firefoxでは file スキームにおいて、独自の同一オリジンポリシーを設定しているようです。

file: URI の同一オリジンポリシー | MDN

Gecko 1.8 以前では、2つの file: URI は同一オリジンとみなされます。つまり、ローカルディスク上のHTMLファイルはローカルディスク上の別ファイルを読み込めます。

Gecko 1.9 からは、ファイルは特定のファイルのみ読み込みが許可されます。具体的には、読み込み元ファイルの親ディレクトリが、読み込み対象ファイルの祖先ディレクトリと同じ場合のみ、読み込みができます。ただし、ディレクトリはこの方法では読み込めません。

この規定によって、Firefox では file:///C:/foo/evil.html から file:///C:/www/sample.html で設定したWeb Strageに参照する事が不可能となりました。
ただし、この規定はFirefoxだけの例外規定であり、全てのブラウザでそうなる保証はありません。

仕様を全て読んだわけではありませんが、ざっくり検索してみた限りでは file スキームに関する規定が少なく、fileスキームにおける生成元の範囲が不明瞭なように読めました。
実装依存である事を意識して、「制作者が確認した実装以外での動作を保証できない」等の一文を付け加えるべきだと思います。

個人的には動作の保証が出来ないので、積極的にfileスキームでWeb Strageを使いたくはありません。
私なら、ユーザデータはCSV化して [名前を付けて保存] で保存してもらい、HTML閲覧時に [参照] ボタンからCSVファイルを選択し、File APIで設定値を読み込むなど、安全が保証された実装にします。

Re: auto_miss56 さん

投稿2017/11/26 10:43

編集2017/11/26 12:16

think49

総合スコア18194

auto_miss56

2017/11/26 12:13

勉強になりましたありがとうございます

行動規範の内容に同意します

safariやchromwなどのwebkit系ブラウザはローカルなcookieを保存できません。
諦めましょう。
ということで、対応策は以下の3つ。

htmlをサーバに置き、ユーザはそこにアクセスしてもらう

本来の使われ方です。

cookieを諦める

ユーザにはweb storageが動くブラウザを使ってもらう。
最新のブラウザならほぼどれでも対応してます。

firefoxを使ってもらう

firefoxならcookieは保存されます。
でもあらたにfirefoxをインストールすると最新になるので、対応策2になってしまう。

なぜhtmlをダウンロードさせるのか分かりませんが、普通にサーバにアクセスしてもらえばいいんじゃないでしょうか？

投稿2017/11/25 06:56

ooeok

総合スコア469

auto_miss56

2017/11/25 11:55

提示していただいた対応策は取ることはできません理由は言えません申し訳ありませんローカルなcookieは保存はできていると私は認識しています「保存できない」というのであればアラートとして表示しているものはなんなのか？「コンピューターのローカル書類」の中に保存されている(と表示されている)キャッシュ、cookieの正体はなんなのか？どういうプロセスを経てcookieとしての振る舞いを見せているのか恐れ入りますがもう少しだけご教授願いますでしょうか？

ooeok

2017/11/25 15:19

alertが表示されたということはdocument.cookieが取れたということですよね。 document.cookieが取れたのに開発ツールにはcookieが表示れないと。「んなことあるか！」と思うんですが、あるんでしょうね。たぶん。 windowsのchromeの開発ツールには延々と「ない」が表示されてます。 cookieも空のまま。申し訳ないけど再現できないものは調べられません。というか、ないはずのcookieがある時点でオカルトの類です。 macには何か住み着いてるんでしょうか。

auto_miss56

2017/11/26 09:06 編集

質問文にキャプチャ画面は上がっていませんが windowsのIEでも同様のことが起こっていることが確認できましたので macに何か住み着いている訳ではないと思います ↓(確認した方法、下記url参照) http://d.hatena.ne.jp/stealthinu/20140515/p1 どなたかご存知の方いらっしゃいましたらご教授願います

ooeok

2017/11/26 12:08

すでに解決済みになってますが、一応報告だけ。 windows8.1のInternet Explore11.0.20で確認してみました。がっつりcookie保存されてましたよ。開発ツールにcookieを表示する項目がなかったので直接ファイルを見ましたが。 C:\Users***\AppData\Local\Microsoft\Windows\INetCache\1VH34O0J.txt Cookie:***@~~local~~/C:/data/dev/ ということで、document.cookieが存在するのにcookieがないということはなかったですよ。謎の動きをするのはsafariだけのようですね。

auto_miss56

2017/11/26 13:19 編集

私も実機での確認をしました windows 8.1 with Bing 64ビット　になります質問文にwinでのキャプチャ画面を追記しました質問文の流れを説明すると 1枚目　→　アラートを確認 2枚目　→　コンピューターローカルにcookieが保存されている 3枚目　→　デベロッパーツールにcookie映らず winのIEで再現した際もcookieはがっつり保存され、1枚目、2枚目、3枚目、共に同じ挙動でした IEブラウザでcookieを確認する手順はファイルをブラウザで開く ↓ F12 開発者ツールを開く ↓ ネットワークを選択 ↓ 再生ボタン(キャプチャ)を押す ↓ htmlをリロードする ↓ 要約　詳細から詳細を選択する ↓ cookieを選択となります「 mac　safariのみでの謎の動き」は確認できません

ooeok

2017/11/26 15:28

IEの開発ツールは面倒な手順踏まないとcookie見れないんですね。開発でも私用でもIEは使ってなかったので分かりませんでした。たしかに開発ツールにcookieが表示されないことを確認しました。まとめると、IEではローカルなcookieは保存され取得もできるが、開発ツールには表示されないと。 safariの開発ツールも同じなのかもしれませんね。そういえば、今のchromeのエンジンはblinkでした。数年前googleはappleと仲違いしてwebkitから分裂させたのでした。すっかり忘れてた。

行動規範の内容に同意します

ローカルファイルでは残念ながらCookieを使えないようです。
諦めた方が良さそうですが…。

※IEとChromeとSafariはローカルファイルでテストしている場合Cookieが表示されません。ローカルサーバやテストサーバを利用して確認しましょう。

リンク内容

-- 追記 --
ちょっと勘違いしておりました。safariで見方まではわかりましたが、実際に保存できるか、確認できるかは確認してません。

環境設定から「開発」タブを表示できるようにしてから

− webインスペクタを開く

ストレージ

ではないかと思います

投稿2017/11/24 04:00

編集2017/11/24 06:31

sakapun

総合スコア888

auto_miss56

2017/11/24 06:16 編集

上記ファイルを、ローカル環境でSafariで開いた時のスクリーンショットを追加しました Cookieは数十秒後には無くなるため、expiresの設定も反映されているように見えます mac OS Sierra 10.12.6　のバージョンにだけ、できない、ということでしょうか？恐れ入りますがもう少し詳しく教えて頂けないでしょうか？

auto_miss56

2017/11/24 14:49 編集

・環境設定から「開発」タブを表示できるようにしてから − webインスペクタを開く・ストレージではないかと思いますその場所に表示する方法を探しているというのを質問の主旨とするべきでした申し訳ありません編集しましたどなたかご存知の方いらっしゃいましたらご教授願います

行動規範の内容に同意します

あなたの回答