7. Persistenz, Autorisierung, Cookies

7.2 Cookies

node server.js                        
server started on port 6024

document.cookie
''

Die lokale Variable document.cookie ist also der leere String. Klicken Sie nun den Knopf request cookie und schauen, welchen Wert die Variable jetzt hat. Bei mir:

document.cookie
'key_238=value_118'

document.cookie
'key_238=value_118; key_83=value_840'

Was passiert hier? Die Variable document.cookie kann also, ähnlich der document.localStorage, Key-Value-Paare speichern. Allerdings ist sie kein Javascript-Dictionary, sondern ein String, der die Key-Value-Paare im Format key1=value1; key2=value2; key3=value3 speichert, also in einem einzigen String. Dieser Unterschied ist eher kosmetisch. Ein gewichtigerer Unterschied ist allerdings: die Cookies werden in diesem Beispiel rein serverseitig gestzt. In der Tat ist die Seite index.html rein statisch, enthält also kein Javascript. Cookies sind bereits in Http definiert. Die Idee ist, dass der Cookie-String bei jedem Http-Austausch (Request, Response) hin- und hergeschickt wird. Dies dient auch dazu, dass der Server den Client "erkennt", also verschiedene Clients auseinanderhalten kann (z.B. damit er Ihnen den Inhalt Ihrer Email-Inbox anzeigt und nicht meiner). Wie werden Cookies in Http behandelt?

Cookies in Http

Um zu verstehen, wie Cookies in Http übermittelt werden, beginnen wir mit einem Experiment. Wir belauschen wir einfach die Kommunikation zwischen dem Client (Browser) und server.js.

node server.js       
a server that sets random cookies                     
server started on port 6024

java ServerSniffer localhost 6024 6025

http://localhost:6025/                            

...
GET / HTTP/1.1 // das ist der Http-Request
Host: localhost:6025
...
HTTP/1.1 200 OK // das ist der Http-Response
...
// Im Body vom Response steht dann die Html-Datei.

...
GET /request-cookie HTTP/1.1 // das ist der Http-Request, der durch den Knopfdruck ausgelöst worden ist
Host: localhost:6025
...
HTTP/1.1 302 Found // das ist der Http-Response, der den Browser bittet, nun eine andere Location zu laden
X-Powered-By: Express
Set-Cookie: key_968=value_722; Path=/ hier wird ein Cookie gesetzt
Location: /index.html // das ist die Location, die der Browser nun bitte laden soll 
...
// Jetzt kommt wiederum ein GET-Request vom Browser auf /index.html und der Response vom Server.

...
GET / HTTP/1.1 // wurde durch Eingabe von localhost:6025 in der Adresszeile des Browsers ausgelöst
Host: localhost:6025                        
...
Cookie: key_968=value_722 // hier teilt der Client dem Server die gespeicherten Cookies mit
...

...
GET /delete-all-cookies HTTP/1.1 // wurde durch Eingabe von localhost:6025 in der Adresszeile des Browsers ausgelöst
Host: localhost:6025                        
...
Cookie: key_968=value_722 // der Client schickt wie immer dem Server die Cookies
...
HTTP/1.1 302 Found
...
Set-Cookie: key_968=; Path=/; Expires=Thu, 01 Jan 1970 00:00:00 GMT

Cookies im Server

Jetzt wissen wir also in der Theorie, wie Cookies in Http gehandhabt werden. Es ist einfach eine zusätzliche Zeile im Http-Header. In der Praxis ist das aber irrelevant. Da wollen Sie lieber wissen, wie man serverseitig in Node.js mit Cookies umgehen kann. Dieser Abschnitt ist somit auch spezifisch für node.js und express.js. Wir betrachten die Code-Ausschnitte aus server.js.

Cookies setzen in Node.js / express.js                        
app.get('/request-cookie', (req, res) => {
    var key = "key_" + randint(1000);
    var value = "value_" + randint(1000);
    console.log(`cookie is ${JSON.stringify(req.cookies)}`);
    console.log(`setting new cookie "${key}=${value}"`);
    res.cookie(key, value);
    return res.redirect("/index.html");
});

So einfach geht das. Mit res.cookie(key,value) in Zeile 26 setzt der Server das Cookie. Lesen geht ähnlich einfach:

Cookies lesen in Node.js / express.js
const cookieParser = require('cookie-parser');
...
app.use(cookieParser()); // sonst kann die App nicht den Cookie-String lesen
...
app.get('/show-cookies', (req,res) => {
    var responseString = 'Your cookies are: ';
    
    for (key in req.cookies) {
        var value = req.cookies[key];
        responseString += `key: ${key}, value: ${value} n`;
    }
    res.status(200);
    return res.send(responseString);
});

Mit cookie-parser wird req.cookies zu einem gewöhnlichen Javascript-Dictionary, mit dem Sie serverseitig arbeiten können. (Sie können das natürlich ausprobieren, indem Sie localhost:6025/show-cookies aufrufen. Es gibt einfach auf der index.html keinen Link, der diese Route aufruft.) Zum Schluss zeigen wir, wie man Cookies serverseitig in express.js löscht:

Cookies löschen in Node.js / express.js                        
app.get('/delete-all-cookies', (req,res) => {
    for (key in req.cookies) {
        res.clearCookie(key);
    }
    return res.redirect("/index.html");
});

Über die historische Kuriosität, dass man in Http Cookies nicht direkt löschen kann, müssen Sie sich also keine Gedanken machen. res.clearCookie(key) setzt für Sie das Verfallsdatum auf den 1. Januar 1970, was einem Löschen gleichkommt.

Cookies Client-seitig setzen