מהם עוגיות וכיצד לעבוד עם הן באמצעות JavaScript

? ? ? לא בדיוק… ??? טוב יותר! העוגייה ? היא אחת מאמוג'י האהובות ברשת וגם אחת מהטכנולוגיות החשובות ביותר של הרשת.

בואו נסתכל על מה כל זה מדובר, איזה?

יסודות העוגיות בדפדפן

עוגיות הדפדפן נכנסו לרשת כדי לשמור מידע עמיד על המשתמש. מקרה השימוש הראשון היה לבדוק האם משתמש כבר ביקר באתר של נטסקייפ.

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

• שם: _ga
• ערך: GA1.3.210706468.1583989741
• דומיין: .example.com
• נתיב: /
• תפוגה / מקסימום גילוי: 2022-03-12T05:12:53.000Z

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

כיצד נוצרים עוגיות

ישנם שני דרכים עיקריות ליצירת עוגיות:

• עם HTTP ניתן לשלוח Set-Cookie בכותרת התגובה שלך ב-HTTP. בהתאם לטכנולוגיות שאתה משתמש בהן עבור שרת האינטרנט שלך; אתה יכול להשתמש בכלים וספריות שונות כדי לנהל תגיות עוגיות. כלים אלה צריכים ליצור תגובות HTTP שתראה בערך כך:

HTTP/2.0 200 OK
Content-type: text/html
Set-Cookie: alligator_name=barry
Set-Cookie: tasty_cookie=strawberry
... More http Content

ניתן להוסיף מידע לעוגיות כמו תאריך תפוגה, ותכונות אבטחה כמו ההנחיה Secure והדגל HttpOnly.

Set-Cookie: cookie_name=cookie_value; Expires=Wed, 17 Sep 2021 07:00:00 GMT; Secure; HttpOnly

הדגל HttpOnly אומר שהעוגיות אינן יכולות להיות נקראות או להיערך על ידי הדפדפן. ו-Secure אומר שהעוגיה יכולה להיעבר רק מעל HTTPS. אלו חשובים מאוד להגנה על היישום שלך.

• עם Javascript זה קצת קשה יותר לנהל עוגיות. יש לנו ממשק אחד, document.cookie, שמאחסן את העוגיות שלנו וניתן להחדיר מחדש. לדוגמה, באתר שבו מותקן Google Analytics, ובקונסולת המפתח, אנו יכולים לבצע:

console.log(document.cookie)
// מקלט דברים כמו "_ga=GA1.3.210706468.1583989741; _gid=GA1.3.1734708005.1583989741"

// הסימן השיוון הזה אינו פועל כפי שאתה מצפה
document.cookie = "alligator=alligator_cookie_content;"
console.log(document.cookie)
// מקלט "_ga=GA1.3.210706468.1583989741; _gid=GA1.3.1734708005.1583989741; alligator=alligator_cookie_content"
// שים לב שהקטע הקודם מוסיף את העוגיה החדשה שיצרנו

// יישום גס של ממשק עוגיות עשוי להיראות כך:
const createCookie = (name, value) => document.cookie = name + '=' + value + ';'
// לעדכון אמיתי נבדוק תחילה האם העוגיה קיימת
const updateCookie = (name, value) => document.cookie = name + '=' + value + ';'
const deleteCookie = (name) => document.cookie = name + '=; Max-Age=-1;';  

סוגי עוגיות

עוגיות סשן

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

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

עוגיית קבוע

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

עוגיית צד שלישי

אנו יכולים להבדיל בין עוגיות שנמצאות באותו דומיין לבין עוגיות שנשלחות מספקים צד שלישי. הדוגמה שציינו קודם עם Google Analytics היא דוגמה לעוגיית צד שלישי. עוגיות צד שלישי ניתן להשתמש בהן למעקב אחר פעילויות המשתמש. כדי להגדיר עוגיית צד שלישי, עליך להגדיר ';domain=thirdpartydomain.com'.

Cookie Max-Age vs Expire

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

• השתמש ב־Expires וקבע תאריך תפוגה קבוע. התאריך משתמש בפורמט תאריך HTTP: <day-name>, <day> <month> <year> <hour>:<minute>:<second> GMT. לכן לדוגמה אם נרצה שעוגיית העוגייה שלנו תפוג ב־17 בספטמבר 2020, נוכל לעשות כך:

const jacksBirthday = new Date(2020, 8, 17);
document.cookie = 'jacksage=27; expires =' + jacksBirthday.toUTCString() + ';';

• שימוש ב־‘Max-Age’ לא נתמך בכל דפדפן. אך זהו הפתרון הכי מוצלח. זה מכריח את העוגייה להתבטל לאחר כמות זמן מסוימת (בשניות) לאחר שהלקוח מקבל אותה:

// תפוג אחרי יום אחד
const oneDayToSeconds = 24 * 60 * 60;
document.cookie =  'daily_cookie=session_identifierXYZ; max-age = ' + oneDayToSeconds + ';';

? ככה זה! מקווה שעכשיו יש לך רעיון טוב יותר כיצד להשתמש בעוגיות בצד הלקוח עם JavaScript. אם יש לך שאלות, תשאל אותנו בטוויטר. בפעם הבאה, נראה כיצד לנהל סשנים עם עוגיות ו־Express.js.