JavaScript 99 - verdieping: cookies

• Informatica
• WO
• Studiejaar 4,5

                      JavaScript

Fundament

Kerndomein D. Programmeren

Ontwikkelen met JavaScript (JS)

                        verdieping:

                          Cookies!

Leerdoelen:

Je kunt na deze les:

• beschrijven wat een cookie is
• verschillende soorten cookies benoemen
• vertellen wat een tracking- of supercookie is
• beschrijven wat een cookie te maken heeft met de AVG
• detecteren welke JS functie een cookie maakt

Rode achtergrond betekent: klas is stil, dit zijn de leerdoelen en quizzes waarbij niet overlegd mag worden.

Doel van deze les is om het leren zichtbaar te maken voor zowel leerling als docent.

Cookies

"Cookies":

• zijn kleine tekstbestanden met informatie
• worden gebruikt door websites (en dus je browser)
• bestaan in verschillende varianten
• zijn van belang voor je privacy (ja, daar is de AVG weer)
• zijn belangrijk voor de werking van het internet

Wat staat in een cookie?

Dat kan veel verschillende informatie zijn, zoals:

• voorkeuren van de gebruiker
• dat de gebruiker is ingelogd
• IP adres
• browser-versie en taal
• inhoud van je winkelwagen op een website
• etc.

Waar worden ze opgeslagen?

Cookies worden (door je browser) opgeslagen op het apparaat (device) waarop je browser zich bevindt

De lokatie hangt af van je browser

voor Chrome is het:

%LOCALAPPDATA%\Google\Chrome\User Data\Default\

en voor Microsoft Edge is het:

%LOCALAPPDATA%\Microsoft\Edge\User Data\Default\

Browser instellingen

Moderne browsers hebben instellingen die aangeven of, hoe, wanneer, en welke cookies mogen worden gebruikt

Wat die instellingen zijn en waar je ze kunt vinden verschilt per browser

               Edge:

Welke soorten cookies zijn er?

Er zijn een aantal verschillende soorten cookies, zoals:

• Sessiecookies
   Deze worden verwijderd zodra je je browser sluit
• Permanente cookies
   Deze blijven staan totdat ze verlopen of je ze verwijdert
• First-party cookies
   Deze worden door de website zelf ingesteld
• Third-party cookies
   Deze worden ingesteld door andere websites dan de huidige pagina

Hoe wordt een cookie gemaakt?

Een cookie wordt gemaakt in een webpagina, bijvoorbeeld met JavaScript:

maar ook met
PHP kunnen
cookies
"gezet" worden

Hoe wordt een cookie gemaakt?

Meestal dus in een webpagina met JavaScript

Zo doet https://leerlingen.stmichaelcollege.nl dat ook

Inspector: Application > Storage: Cookies

Opdracht

1. Ga naar https://leerlingen.stmichaelcollege.nl 
2. Log daar in met je schoolmail en -wachtwoord
3. Kijk naar de broncode (Elements) via de inspector
4. Zoek in de <script> tags:
   a. Welke functie laat de "Oké, ik begrijp het" balk zien?
   b. Wat is de naam van de functie die de cookies leest?
   c. Wat is de naam van de functie die de cookie maakt?

Tracking cookie en supercookie

Twee nog niet eerder genoemde cookies zijn extra belangrijk:

• tracking cookie: deze volgen (tracken) je over verschillende websites
• supercookie: dit zijn een soort super-tracking cookies en je browser
   is daar eigenlijk niet op voorbereid, deze worden gebruikt om je
   hele gebruik van de browser te volgen

Extra belangrijk, omdat deze permanent en lastig te verwijderen zijn

Het is erg belangrijk dat je dit weet, omdat de informatie in die cookies van invloed is op je privacy en/of veiligheid! 

dieprood: erg belangrijke informatie

AVG

Let wel, wat gezegd wordt, is niet altijd wat wordt gedaan:

https://www.uva.nl/shared-content/faculteiten/nl/faculteit-der-rechtsgeleerdheid/nieuws/2024/03/cookies-controleren.html

Oefening: Darkmode met cookies

We gaan nu samen een webpagina maken met een darkmode

Wat hebben we daarvoor nodig?

1. HTML bestand waar we alles in zetten
2. CSS voor darkmode (default is lightmode)
3. JS functie om te wisselen tussen modes
   
4. HTML code om de functie aan te roepen
5. JS functie die de keuze in een cookie vastlegt
6. JS functie die de keuze uitleest en (automatisch) toepast

Oefening: Darkmode: HTML

Oefening: Darkmode: CSS

Oefening: Darkmode: JS+HTML

Oefening: Darkmode: JS

Oefening: Darkmode: testen 1/3

Nu hebben we nog een probleem... Cookies maken gebruik van HTTP 

als je dus een .htm of .html bestand lokaal opent , dan kun je daar geen cookies mee opslaan (want dan wordt HTTP niet gebruikt)

  

We moeten dus een lokale webserver maken... dat kan gelukkig eenvoudig met Python en met je command prompt (terminal)

Oefening: Darkmode: testen 2/3

1. sla je gemaakte .htm bestand op als
   index.htm
2. maak een tekst bestand en zet daar het volgende in:
   python3 -m http.server
3. sla het tekstbestand op als: "maakServer.bat" in dezelfde map als 1.
4. voer het .bat bestand uit door erop te dubbelklikken:
   sluit hij direct weer? installeer dan Python3 via https://python.org

Oefening: Darkmode: testen 1/3

Nu hebben we nog een probleem... Cookies maken gebruik van HTTP 

als je dus een .htm of .html bestand lokaal opent , dan kun je daar geen cookies mee opslaan (want dan wordt HTTP niet gebruikt)

  

We moeten dus een lokale webserver maken... dat kan gelukkig eenvoudig met Python en met je command prompt (terminal)

Oefening: Darkmode: testen 3/3

Zolang als je terminal (Command Prompt) open blijft staan, kun je het index.htm bestand van zojuist benaderen in je browser

Open daarvoor het volgende adres met je browser:

http://localhost:8000

Schakel naar Dark Modus en 

ververs de pagina met F5 of

Heeft hij de keuze onthouden?

Leerdoelen:

Je kunt nu:

• beschrijven wat een cookie is
  
• verschillende soorten cookies benoemen
  
• vertellen wat een tracking- of supercookie is
  
• beschrijven wat een cookie te maken heeft met de AVG
  
• detecteren welke JS functie een cookie maakt

Rode achtergrond betekent: klas is stil, dit zijn de leerdoelen en quizzes waarbij niet overlegd mag worden.

Doel van deze les is om het leren zichtbaar te maken voor zowel leerling als docent.

Exit ticket

https://forms.gle/7J97NiRs9nqWjk5V6