אבטחת פרונטאנד - הבסיס שכל מפתח חייב לדעת¶
אני נתקל המון במפתחי פרונטאנד, גם כאלה עם ניסיון, שחושבים שאבטחה זה "עניין של הבקאנד". זו טעות מסוכנת. חלק ניכר מהחולשות הכי נפוצות באתרים קורות בדיוק בקוד הפרונטאנד, וזה בדיוק הקוד שאתם כותבים. בואו נעבור על הבסיס שכל מפתח חייב להכיר, בלי להפוך לקורס אבטחה שלם.
XSS - החולשה שהכי כדאי להכיר¶
XSS (Cross-Site Scripting) קורה כשתוקף מצליח להכניס קוד ג'אווהסקריפט זדוני לאתר שלכם, שרץ בדפדפן של משתמשים תמימים אחרים. הדוגמה הקלאסית - שדה תגובות שמציג טקסט שהמשתמש הכניס, בלי לנקות אותו קודם:
אם משתמש זדוני כותב תגובה שמכילה <script> שגונב עוגיות (cookies) של משתמשים אחרים, וזה מוצג ישירות בלי סינון, הקוד הזה פשוט ירוץ אצל כל מי שרואה את התגובה. זה יכול להוביל לגניבת פרטי התחברות, השתלטות על חשבונות, ועוד.
הפתרון הבסיסי - לעולם לא להכניס טקסט ממשתמש ישירות כ-HTML. אם אתם משתמשים ב-innerHTML, תוודאו שהתוכן נוקה (sanitized) קודם. ריאקט, אגב, עוזר לכם כאן באופן אוטומטי - כשאתם מציגים טקסט בתוך JSX הוא נמלט (escaped) כברירת מחדל, ורק אם אתם משתמשים במפורש ב-dangerouslySetInnerHTML (שם שנבחר בכוונה כדי להפחיד אתכם) אתם חוזרים לסיכון הזה.
CSP - שכבת הגנה נוספת ברמת הדפדפן¶
CSP (Content Security Policy) היא מדיניות שאתם מגדירים בשרת, שמגבילה מאיזה מקורות מותר לטעון קוד, תמונות, וסגנונות באתר שלכם. אפילו אם תוקף מצליח להזריק סקריפט זדוני, CSP חזק יכול למנוע ממנו לרוץ, כי הדפדפן פשוט יחסום קוד שלא מגיע ממקור מאושר.
השורה הזאת אומרת לדפדפן - הריצו קוד ג'אווהסקריפט רק מהדומיין שלנו או מ-CDN מאושר ספציפי, שום דבר אחר. זו שכבת הגנה נוספת, לא תחליף לניקוי קלט נכון, אלא רשת ביטחון למקרה שמשהו חמק.
אל תסמכו על ולידציה בצד לקוח בלבד¶
זו אולי הטעות הכי נפוצה שאני רואה אצל מתחילים - לחשוב שאם שדה טופס בודק בג'אווהסקריפט שהאימייל תקין או שהמחיר חיובי, זה מספיק. זה לא. כל בדיקה שרצה בדפדפן של המשתמש אפשר לעקוף. משתמש יכול לפתוח את כלי הפיתוח, לשנות ערכים, או פשוט לשלוח בקשה ישירות לשרת בלי לעבור דרך האתר שלכם בכלל.
ולידציה בצד לקוח היא לחוויית משתמש טובה - הודעת שגיאה מיידית בלי לחכות לשרת. היא לא בקרת אבטחה. כל בדיקה שקריטית לביטחון חייבת לקרות שוב בשרת, בלי יוצא מן הכלל.
אחסון מידע רגיש - localStorage הוא לא כספת¶
טעות נפוצה נוספת היא לשמור טוקן התחברות (JWT) ב-localStorage, מתוך מחשבה שזה מקום בטוח. זה לא - כל קוד ג'אווהסקריפט שרץ בדף, כולל קוד זדוני שהוזרק דרך XSS, יכול לקרוא את ה-localStorage בקלות. אלטרנטיבה בטוחה יותר היא עוגיות עם הדגלים HttpOnly ו-Secure, שג'אווהסקריפט בכלל לא יכול לגשת אליהן.
HTTPS זה לא אופציונלי¶
זה אולי נשמע מובן מאליו ב-2026, אבל אתר בלי HTTPS חושף כל תעבורה בין המשתמש לשרת, כולל סיסמאות וטוקנים, לכל מי שיושב באותה רשת. אין שום סיבה טובה היום לא להשתמש ב-HTTPS, וברוב שירותי האחסון זה חינם וקל להגדרה.
למה זה חלק מהעבודה שלכם¶
מפתחי פרונטאנד הם קו ההגנה הראשון מול המשתמש עצמו, ולכן חלק גדול מהחולשות שנוגעות למשתמש הקצה מתחילות ומסתיימות בקוד שאתם כותבים. הבנה בסיסית של אבטחה לא הופכת אתכם למומחי סייבר, אבל היא מונעת מכם לבנות דלתות פתוחות בטעות.
בקורס צד לקוח יש פרק על נושאים מתקדמים שכולל בדיוק את הבסיס הזה של אבטחה, כדי שתדעו לבנות דברים נכון מהיום הראשון.
לסיכום¶
XSS, CSP, ולידציה שרצה בשני הצדדים, ואחסון נכון של מידע רגיש - זה לא "עוד נושא" בשולי הלימודים, זה חלק מהמקצועיות שמצפים ממפתח פרונטאנד. תתחילו להרגיל את עצמכם לחשוב "איך אפשר לנצל את זה" בכל פיצ'ר שאתם בונים, וזה כבר יעמיד אתכם לפני רוב המפתחים בשוק.
יש לכם שאלה על אבטחה בפרויקט שלכם? תשאלו בדיסקורד.