Welke tekens zijn toegestaan in cookies?

Algemene Browserpraktijken

Webbrowsers hanteren vergelijkbare cookie-tekenbeperkingen om webstandaarden te volgen. Hier zijn enkele algemene praktijken:

URL-codering van speciale tekens

Browsers passen URL-codering toe op speciale tekens in cookiewaarden. Dit converteert tekens die niet zijn toegestaan in URL's naar een veilig formaat.

document.cookie = "user_info=John Doe & Co.; path=/";
// Browser slaat het op als: user_info=John%20Doe%20%26%20Co.

Verwerking van niet-ASCII-tekens

De meeste browsers ondersteunen UTF-8-codering voor niet-ASCII-tekens in cookiewaarden. Het is het beste om deze tekens handmatig te coderen:

const userName = "José";
document.cookie = `user=${encodeURIComponent(userName)}; path=/`;
// Browser slaat het op als: user=Jos%C3%A9

Browserspecifieke Beperkingen

Browsers volgen over het algemeen vergelijkbare praktijken, maar er kunnen verschillen zijn in hoe ze cookies verwerken.

Strategieën voor het Werken met Browserbeperkingen

1. Grote gegevens splitsen in meerdere cookies

function setLargeCookie(name, value) {
    const maxLength = 4000;
    const parts = Math.ceil(value.length / maxLength);

    for (let i = 0; i < parts; i++) {
        const part = value.substr(i * maxLength, maxLength);
        document.cookie = `${name}_${i}=${part}; path=/`;
    }
}

// Gebruik
setLargeCookie("user_data", "very_long_string_of_user_data");

2. Gebruik lokale opslag voor client-side gegevens die niet met elk verzoek hoeven te worden verzonden

// Grote gegevens opslaan in lokale opslag
localStorage.setItem('user_preferences', JSON.stringify(largeUserPreferencesObject));

// Gegevens ophalen uit lokale opslag
const userPreferences = JSON.parse(localStorage.getItem('user_preferences'));

3. Implementeer een terugvalmechanisme voor browsers met strengere limieten

function setCookie(name, value, days) {
    try {
        document.cookie = `${name}=${value}; max-age=${days * 24 * 60 * 60}; path=/`;
    } catch (error) {
        console.warn(`Kon cookie niet instellen: ${error.message}`);
        localStorage.setItem(name, value);
    }
}

function getCookie(name) {
    const value = document.cookie.match('(^|;)\\s*' + name + '\\s*=\\s*([^;]+)');
    return value ? value.pop() : localStorage.getItem(name);
}

Verwerking van Internationale Tekens

Bij het werken met internationale tekens in cookies, overweeg deze benaderingen:

1. Gebruik encodeURIComponent() voor codering en decodeURIComponent() voor decodering
2. Voor complexere scenario's, gebruik btoa() en atob() voor Base64-codering

// Internationale tekens coderen
const internationalName = "안녕하세요";
document.cookie = `greeting=${encodeURIComponent(internationalName)}; path=/`;

// Decoderen
const storedGreeting = decodeURIComponent(getCookie('greeting'));

// Base64-codering voor complexe gegevens
const complexData = { name: "José", age: 30, city: "São Paulo" };
document.cookie = `userData=${btoa(JSON.stringify(complexData))}; path=/`;

// Base64 decoderen
const decodedData = JSON.parse(atob(getCookie('userData')));

Domeinattribuut en Tekenbeperkingen

Het domeinattribuut in cookies bepaalt welke hosts de cookie kunnen ontvangen. Hier zijn belangrijke punten over het domeinattribuut en de tekenbeperkingen:

Toegestane Tekens

• Alfanumerieke tekens (a-z, A-Z, 0-9)
• Koppeltekens (-)
• Punten (.)

Regels voor Domeinnamen

• Moet beginnen en eindigen met alfanumerieke tekens
• Mag geen opeenvolgende punten bevatten
• Maximale lengte van 253 tekens

Overwegingen voor Subdomeinen

• Het instellen van het domein op een specifiek subdomein beperkt de cookie tot dat subdomein
• Het gebruik van een voorlooppunt (.) maakt het mogelijk de cookie te delen met subdomeinen

// Cookie voor specifiek subdomein
document.cookie = "name=value; domain=subdomain.example.com";

// Cookie gedeeld met alle subdomeinen
document.cookie = "name=value; domain=example.com";

Expires en Max-Age Attributen

De Expires en Max-Age attributen bepalen wanneer een cookie moet worden verwijderd.

Expires Attribuut

• Gebruikt GMT/UTC-tijdzone
• Formaat: "Wdy, DD-Mon-YYYY HH:MM:SS GMT"
• Voorbeeld: "Wed, 21 Oct 2023 07:28:00 GMT"

Max-Age Attribuut

• Positief geheel getal dat seconden voorstelt
• Maximale waarde hangt af van browserimplementatie (meestal rond 2^31 - 1)

// Expires attribuut gebruiken
const expirationDate = new Date();
expirationDate.setDate(expirationDate.getDate() + 7);
document.cookie = `name=value; expires=${expirationDate.toUTCString()}`;

// Max-Age attribuut gebruiken (7 dagen in seconden)
document.cookie = "name=value; max-age=604800";

Aanvullende Cookie-attributen

Secure Attribuut

• Zorgt ervoor dat cookie alleen via HTTPS wordt verzonden
• Gebruik: document.cookie = "name=value; secure";

HttpOnly Attribuut

• Voorkomt toegang tot de cookie via client-side scripts
• Helpt cross-site scripting (XSS) aanvallen te verminderen
• Gebruik: document.cookie = "name=value; HttpOnly";

SameSite Attribuut

Bepaalt wanneer cookies worden verzonden met cross-site verzoeken:

• Strict: Alleen verzenden voor same-site verzoeken
• Lax: Verzenden voor same-site en navigatie op topniveau vanaf externe sites
• None: Cross-site verzending toestaan (vereist Secure attribuut)

document.cookie = "name=value; SameSite=Strict";