質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

91.35%

  • JavaScript

    11205questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • HTML5

    2842questions

    HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

  • Cookie

    131questions

    HTTPにおけるCookieとは、クライアントのウェブブラウザ上に保存された一時的なデータを指します。クライアント側のJavaScriptでも、サーバー側のHTTPヘッダーでもクッキーの読み書き・修正・削除が可能です。

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

解決済

回答 3

投稿 2017/11/24 07:05 ・編集 2017/11/26 22:08

  • 評価
  • クリップ 2
  • VIEW 598

auto_miss56

score -2

ユーザーに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のキャプチャ
イメージ説明

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 3

checkベストアンサー

+6

 ローカルファイル

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

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

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

 HTTP Cookie

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 スキームにおいて、独自の同一オリジンポリシーを設定しているようです。

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 19:43

編集 2017/11/26 21:16

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/11/26 21:13

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

    キャンセル

+2

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

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

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

  • 環境設定から「開発」タブを表示できるようにしてから
    − webインスペクタを開く
  • ストレージ

ではないかと思いますイメージ説明

投稿 2017/11/24 13:00

編集 2017/11/24 15:31

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/11/24 15:16 編集

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

    恐れ入りますがもう少し詳しく教えて頂けないでしょうか?

    キャンセル

  • 2017/11/24 23:49 編集

    ・環境設定から「開発」タブを表示できるようにしてから
    − webインスペクタを開く
    ・ストレージ
    ではないかと思います

    その場所に表示する方法を探している
    というのを質問の主旨とするべきでした
    申し訳ありません

    編集しました

    どなたかご存知の方いらっしゃいましたらご教授願います

    キャンセル

+2

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

  1. htmlをサーバに置き、ユーザはそこにアクセスしてもらう
    本来の使われ方です。

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

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

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

投稿 2017/11/25 15:56

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/11/25 20:55

    提示していただいた対応策は取ることはできません
    理由は言えません
    申し訳ありません

    ローカルなcookieは保存はできていると私は認識しています
    「保存できない」というのであれば

    アラートとして表示しているものはなんなのか?
    「コンピューターのローカル書類」の中に保存されている(と表示されている)キャッシュ、cookieの正体はなんなのか?
    どういうプロセスを経てcookieとしての振る舞いを見せているのか
    恐れ入りますがもう少しだけご教授願いますでしょうか?

    キャンセル

  • 2017/11/26 00:19

    alertが表示されたということはdocument.cookieが取れたということですよね。
    document.cookieが取れたのに開発ツールにはcookieが表示れないと。
    「んなことあるか!」と思うんですが、あるんでしょうね。たぶん。

    windowsのchromeの開発ツールには延々と「ない」が表示されてます。
    cookieも空のまま。
    申し訳ないけど再現できないものは調べられません。

    というか、ないはずのcookieがある時点でオカルトの類です。
    macには何か住み着いてるんでしょうか。

    キャンセル

  • 2017/11/26 18:06 編集

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

    キャンセル

  • 2017/11/26 21: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だけのようですね。

    キャンセル

  • 2017/11/26 22: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のみでの謎の動き 」は確認できません

    キャンセル

  • 2017/11/27 00:28

    IEの開発ツールは面倒な手順踏まないとcookie見れないんですね。
    開発でも私用でもIEは使ってなかったので分かりませんでした。
    たしかに開発ツールにcookieが表示されないことを確認しました。

    まとめると、IEではローカルなcookieは保存され取得もできるが、開発ツールには表示されないと。
    safariの開発ツールも同じなのかもしれませんね。

    そういえば、今のchromeのエンジンはblinkでした。
    数年前googleはappleと仲違いしてwebkitから分裂させたのでした。
    すっかり忘れてた。

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

ただいまの回答率

91.35%

関連した質問

同じタグがついた質問を見る

  • JavaScript

    11205questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • HTML5

    2842questions

    HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

  • Cookie

    131questions

    HTTPにおけるCookieとは、クライアントのウェブブラウザ上に保存された一時的なデータを指します。クライアント側のJavaScriptでも、サーバー側のHTTPヘッダーでもクッキーの読み書き・修正・削除が可能です。