מה זה עוגיות (Cookies) באינטרנט וכיצד לעבוד איתן ב JavaScript?

עוגיות, או Cookies הן אחת מטכנולוגיות ה-web החשובות ביותר. עוגיות נוצרו כדי לשמור בדפדפן אינפורמציה מתמדת על משתמשים. אותה עוגיה היא פיסת מידע מאתר כלשהו הנשמרת בדפדפן כך שאותו אתר יוכל לגשת אליה ולהשתמש באינפורמציה הנשמרת בעוגיה זו בשלב מאוחר יותר.

כשמשתמש מסוים חוזר לאתר, אותה עוגיה מספקת אינפורמציה ומאפשרת לאתר להציג הגדרות מסוימות או תוכן ממוקד ספציפית לאותו משתמש.

עוגיות למשל שומרות אינפורמציה כגון פריטים בעגלת קניות, שמות משתמש וסיסמאות לטפסים וכדומה. מפרסמים (advertisers) עושים שימוש בעוגיות כדי לעקוב אחר פעילות של גולשים באתרים שונים ולהציג להם פרסומות ממוקדות.

ולמרות ששיטה זו נועדה כדי לספק חווית משתמש יותר ממוקדת ופרסונלית לגולש, יש הרואים בזאת כפגיעה בפרטיות. זו הסיבה שרוב האתרים כיום מציגים הודעה ובקשה לאישור השימוש בעוגיות, ללא קשר למיקום הגולש:

הבסיס של עוגיות בדפדפן – The Basics of Browser Cookies

כשהדפדפן מבקש עמוד אינטרנטי מהשרת, העוגיות השייכות לאותו עמוד מתווספות לבקשה, כך שהשרת מקבל את המידע הנחוץ כדי לזכור אינפורמציה על משתמשים.

עוגיות הן בעצם פיסת מידע המכילה שדה בשם name, שדה בשם value ומספר פרמטרים אופציונלים נוספים. הערכים של שדות אלו הם מחרוזות בהן ניתן לשמור איזה טקסט שתרצו בהתאם לצרכים של האפליקציה או של האתר שלכם. עוגיות נשמרות באופן של key & value pair, לדוגמה:

username = John Doe

ה-cookie של גוגל אנליטיקס למשל, נקרא _ga והוא כנראה אחד מהעוגיות היותר נפוצות שקיימות. ב-GA4 הוא נראה כך בד"כ:

• Name: _ga
• Value: GA1.1.1197596843.1673515099
• Domain: .example.com
• Path: /
• Expires / Max-Age: שנתיים (בפועל כ-13 חודשים בשל מדיניות דפדפנים)

הערך מורכב מ: גרסה (GA1), רמת דומיין (1), מזהה לקוח אקראי, וחותמת הזמן שבה העוגיה נוצרה.

ניתן לשמור בעוגיות עד 4096 בייטים של מידע. מספר העוגיות המותר לכל דומיין משתנה בין דפדפנים – Chrome מאפשר עד 180, Firefox עד 150, ו-Safari ו-Edge עד 50.

א. יצירת Cookie ב-JavaScript

באמצעות JavaScript ניתן ליצור, לקרוא ולמחוק עוגיות באמצעות התכונה document.cookie. למשל, ניתן ליצור עוגיה באופן הבא:

document.cookie = "username=John Doe";

אפשר גם להוסיף תאריך תפוגה לעוגיה (זמן UTC). כברירת מחדל, עוגיות נמחקות ברגע שהדפדפן נסגר:

document.cookie = "username=John Doe; expires=Thu, 18 Dec 2025 12:00:00 UTC";

גישה מודרנית יותר היא שימוש ב-max-age, שמגדיר את משך החיים של העוגיה בשניות. זה לרוב קל יותר מחישוב מחרוזת תאריך UTC:

// עוגיה שתפוג תוקפה בעוד 7 ימים (7 * 24 * 60 * 60 = 604800 שניות)
document.cookie = "username=John Doe; max-age=604800";

עם הפרמטר path, באפשרותכם לציין לדפדפן לאיזה נתיב או עמוד העוגיה שייכת. כברירת מחדל, עוגיה שייכת לעמוד הנוכחי:

document.cookie = "username=John Doe; expires=Thu, 18 Dec 2025 12:00:00 UTC; path=/";

ב. קריאת Cookie באמצעות JavaScript

עם JavaScript ניתן לקרוא עוגיות באופן הבא:

let x = document.cookie;

השימוש ב-document.cookie יחזיר לכם את כל העוגיות במחרוזת אחת: cookie1=value; cookie2=value; cookie3=value;

ג. שינוי Cookie באמצעות JavaScript

בעזרת JavaScript ניתן לשנות עוגיות באותו אופן שאתם יוצרים אותם, במקרה זה העוגיה הישנה תידרס ותחליף אותה העוגיה החדשה שיצרתם:

document.cookie = "username=John Smith; expires=Thu, 18 Dec 2025 12:00:00 UTC; path=/";

ד. מחיקת עוגיות באמצעות JavaScript

מחיקת עוגיה זה מאוד פשוט – אתם לא צריכים לציין את הערך של העוגיה כשאתם עושים זאת. פשוט קבעו את הפרמטר expires לתאריך שעבר כבר:

document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;";

עליכם לרשום את ה-path הנכון כדי לוודא שאתם מוחקים את העוגיה הנכונה. דפדפנים מסוימים לא יאפשרו לכם למחוק עוגיה אם אינכם מציינים את ה-path.

ה. המחרוזת של עוגיות

התכונה document.cookie נראית כמחרוזת טקסט רגילה. אך היא לא. גם אם תכתבו את כל המחרוזת של עוגיה ל-document.cookie, כאשר תנסו לקרוא אותה תקבלו רק את הזוג name-value.

אם תגדירו עוגיה חדשה, עוגיות ישנות לא יימחקו. העוגיה החדשה תתווסף ל-document.cookie, כך שאם תקראו ל-document.cookie שוב, תקבלו משהו בסגנון של:

cookie1 = value; cookie2 = value;

רק לצורך הבנת המחרוזת של העוגיות, השתמשו בכפתורים מטה כדי ליצור עוגיות, להציג את אותן עוגיות שיצרתם, ולמחוק אלו.

אם אתם רוצים למצוא את הערך של עוגיה ספציפית, אתם חייבים לכתוב פונקציית JavaScript המחפשת את הערך של העוגיה במחרוזת שלה.

תכונות אבטחה של עוגיות – Cookie Security Attributes

כשאתם עובדים עם עוגיות, במיוחד כאלו ששומרות מידע רגיש כמו טוקנים של סשן, חשוב להכיר את תכונות האבטחה הזמינות. תכונות אלו מגנות מפני התקפות נפוצות כמו XSS (Cross-Site Scripting) ו-CSRF (Cross-Site Request Forgery).

SameSite – שולט האם העוגיה נשלחת עם בקשות cross-site. מקבל שלושה ערכים:

• Strict – העוגיה נשלחת רק בהקשר של first-party (אותו אתר). זו האפשרות הבטוחה ביותר.
• Lax – העוגיה נשלחת גם עם ניווטים ברמה עליונה ובקשות GET מאתרים אחרים. זו ברירת המחדל בדפדפנים מודרניים.
• None – העוגיה נשלחת עם כל הבקשות, כולל cross-site. דורש את התכונה Secure.

Secure – מבטיח שהעוגיה תישלח רק דרך HTTPS. השתמשו בתכונה זו תמיד עבור עוגיות המכילות מידע רגיש.

HttpOnly – מונע מ-JavaScript לגשת לעוגיה דרך document.cookie. תכונה זו מוגדרת בצד השרת והיא קריטית עבור עוגיות סשן, מכיוון שהיא מונעת מהתקפות XSS לגנוב אותן.

הנה דוגמה להגדרת עוגיה עם תכונות אבטחה באמצעות JavaScript:

document.cookie = "theme=dark; max-age=2592000; path=/; SameSite=Lax; Secure";

עוגיות First-Party לעומת Third-Party

עוגיית first-party מוגדרת על ידי הדומיין שאתם מבקרים בו ישירות. למשל, אם אתם גולשים ל-example.com, כל עוגיה שמוגדרת על ידי example.com היא first-party. עוגיות אלו משמשות לסשנים, העדפות ואנליטיקס.

עוגיית third-party מוגדרת על ידי דומיין אחר מזה שאתם מבקרים בו – בדרך כלל על ידי פרסומות, ווידג'טים של רשתות חברתיות, או סקריפטים למעקב המוטמעים בדף. למשל, רשת פרסום שרצה באתר example.com עשויה להגדיר עוגיה תחת adnetwork.com.

עוגיות third-party היו הבסיס של מעקב cross-site ורימרקטינג במשך שנים. עם זאת, דפדפנים מגבילים אותן יותר ויותר. Safari ו-Firefox כבר חוסמים עוגיות third-party כברירת מחדל. Chrome החל להגביל אותן עבור אחוז מהמשתמשים ב-2024 כחלק מיוזמת Privacy Sandbox, עם הגבלות רחבות יותר בתכנון.

אם האתר שלכם מסתמך על עוגיות third-party לפונקציונליות (למשל טפסי תשלום מוטמעים, התחברות פדרטיבית), בדקו היטב וחשבו על חלופות כמו Storage Access API או עוגיות מחולקות (CHIPS).

דוגמה – JavaScript Cookie

בדוגמה הבאה ניצור עוגיה השומרת את השם של המבקר באתר. בפעם הראשונה שהגולש יגיע לעמוד, הוא יתבקש למלא את השם שלו, והשם הזה יישמר בעוגיה. בפעם הבאה שהמשתמש יגיע לאותו עמוד הוא יקבל הודעה בסגנון של "Welcome Roee".

עבור הדוגמה ניצור שלוש פונקציות ב-JavaScript:

• פונקציה להגדרת הערך של העוגיה.
• פונקציה לקריאת הערך של העוגיה.
• פונקציה לבדיקת הערך של העוגיה.

הפונקציות והקוד המופיע מטה נלקחו והועתקו במלואם מהאתר הבא.

1. פונקציה להגדרת העוגיה

דבר ראשון, ניצור פונקציה השומרת את שם המבקר באתר בתוך העוגיה:

function setCookie(cname, cvalue, exdays) {
  const d = new Date();
  d.setTime(d.getTime() + (exdays*24*60*60*1000));
  let expires = "expires="+ d.toUTCString();
  document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
}

הפרמטרים של פונקציה זו הם השם של העוגיה (cname), הערך של העוגיה (cvalue) ומספר הימים עד שיפוג תוקף העוגיה (exdays).

הפונקציה מגדירה את העוגיה על ידי חיבור שם העוגיה, הערך של העוגיה, והטקסט של פקיעת התוקף.

2. פונקציה לקריאת העוגיה

כעת ניצור פונקציה המחזירה את הערך של העוגיה המדוברת:

function getCookie(cname) {
  let name = cname + "=";
  let decodedCookie = decodeURIComponent(document.cookie);
  let ca = decodedCookie.split(';');
  for(let i = 0; i <ca.length; i++) {
    let c = ca[i];
    while (c.charAt(0) == ' ') {
      c = c.substring(1);
    }
    if (c.indexOf(name) == 0) {
      return c.substring(name.length, c.length);
    }
  }
  return "";
}

הפונקציה מקבלת שם של עוגיה, מוסיפה לו =, ואז עוברת בלולאה על כל העוגיות (מפוצלות לפי ;) ומסירה רווחים מיותרים מכל אחת. כשהיא מוצאת עוגיה שמתחילה בשם המבוקש, היא מחזירה את חלק הערך. אם לא נמצאה התאמה, היא מחזירה מחרוזת ריקה.

3. פונקציה לבדיקת העוגיה

הפונקציה האחרונה היא פונקציה שבודקת אם העוגיה מוגדרת. אם היא מוגדרת תוצג הודעת שלום לגולש, ואם אינה מוגדרת היא תציג הודעה המבקשת מהגולש להכניס את השם שלו, ושומרת את השם בעוגיה למשך 365 ימים בעזרת שימוש בפונקציה setCookie שהגדרנו קודם לכן:

function checkCookie() {
  let username = getCookie("username");
  if (username != "") {
   alert("Welcome again " + username);
  } else {
    username = prompt("Please enter your name:", "");
    if (username != "" && username != null) {
      setCookie("username", username, 365);
    }
  }
}

אם אתם רוצים לראות דוגמה מעשית לשימוש בעוגיות עם JavaScript כדי לשלוט מתי פופאפ מוצג, תנו מבט בפוסט על הצגת פופאפ באתרי וורדפרס באמצעות JavaScript Cookie.

ה-Cookie Store API

ה-API המסורתי document.cookie הוא סינכרוני, כלומר הוא חוסם את ה-main thread בכל פעם שקוראים או כותבים עוגיה. ברוב המקרים זה בסדר, אך באפליקציות רגישות לביצועים זה עשוי להיות בעייתי.

ה-Cookie Store API (cookieStore) הוא חלופה מודרנית ואסינכרונית שהגיעה לסטטוס Baseline ב-2025. הוא מספק ממשק נקי יותר מבוסס Promise:

// הגדרת עוגיה
await cookieStore.set("theme", "dark");

// קריאת עוגיה
const cookie = await cookieStore.get("theme");
console.log(cookie.value); // "dark"

// מחיקת עוגיה
await cookieStore.delete("theme");

// האזנה לשינויים בעוגיות
cookieStore.addEventListener("change", (event) => {
  console.log("Changed cookies:", event.changed);
  console.log("Deleted cookies:", event.deleted);
});

ה-Cookie Store API נתמך בכל הדפדפנים המרכזיים (Chrome 87+, Firefox 138+, Safari 18.5+, Edge 87+) ועובד רק בהקשר מאובטח (HTTPS). הוא עובד גם ב-Service Workers, דבר ש-document.cookie לא תומך בו.

שאלות נפוצות

שאלות נפוצות בנושא עוגיות ו-JavaScript:

סיכום

עוגיות נשארות חלק בסיסי מפיתוח אתרים. ה-API של document.cookie מאפשר ליצור, לקרוא, לשנות ולמחוק עוגיות ישירות מ-JavaScript. לפרויקטים חדשים, ה-Cookie Store API מציע חלופה נקייה ואסינכרונית יותר.

כשאתם עובדים עם עוגיות, תמיד חשבו על אבטחה: השתמשו בתכונות SameSite, Secure ו-HttpOnly כשמתאים, והיו מודעים למגמה המתמשכת של הגבלת עוגיות third-party. לקריאה נוספת:

• Using HTTP Cookies – MDN
• JavaScript Cookies – W3Schools