11.1 אבטחת פרונטאנד תרגול

תרגול - אבטחת פרונטאנד¶

תרגיל 1 - מניעת XSS¶

יש לכם קומפוננטת בלוג שמציגה פוסטים של משתמשים. הפוסטים יכולים להכיל עיצוב (bold, italic, קישורים).

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

דרישות:
- התקינו את DOMPurify
- אפשרו רק תגיות HTML בטוחות: b, i, em, strong, a, p, br, ul, ol, li, code
- אפשרו רק את התכונה href בתגית a, ורק עם פרוטוקול http או https
- הציגו את הפוסט בצורה בטוחה

בדקו שהקומפוננטה חוסמת:
- תגיות <script>
- אירועי onerror, onclick וכדומה
- קישורים עם javascript: protocol

תרגיל 2 - אימות קלט עם Zod¶

צרו סכמת אימות ב-Zod לטופס הרשמה עם השדות הבאים:

שם משתמש - 3-20 תווים, רק אותיות, מספרים וקו תחתון
אימייל - כתובת אימייל תקינה
סיסמה - לפחות 8 תווים, חייבת להכיל: אות גדולה, אות קטנה, מספר ותו מיוחד
אישור סיסמה - חייב להתאים לסיסמה
גיל - מספר בין 13 ל-120
אתר אישי - URL תקין (אופציונלי)
הסכמה לתנאים - חייב להיות true

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

תרגיל 3 - הגדרת כותרות אבטחה¶

צרו קובץ next.config.js שמגדיר את כל כותרות האבטחה הבאות:

Content-Security-Policy שמאפשר:
סקריפטים רק מהדומיין שלכם
סגנונות מהדומיין שלכם ומ-Google Fonts
תמונות מהדומיין שלכם, מ-data URIs ומ-Cloudinary
חיבורים (fetch) לדומיין שלכם ול-API בכתובת https://api.myapp.com
פונטים מ-Google Fonts
חסימת iframe embedding
Strict-Transport-Security
X-Content-Type-Options
X-Frame-Options
Referrer-Policy
Permissions-Policy שחוסם מצלמה, מיקרופון ומאפשר geolocation רק מהדומיין שלכם

תרגיל 4 - שירות אימות מאובטח¶

צרו שירות אימות (authentication service) שכולל:

פונקציית login ששולחת אימייל וסיסמה לשרת ומקבלת HttpOnly cookie
פונקציית logout שמנקה את ה-session
פונקציית getUser שמחזירה את פרטי המשתמש המחובר
פונקציית refreshToken שמרעננת את הטוקן כשהוא עומד לפוג

צרו גם React Context שעוטף את השירות ומספק את מצב האימות לכל האפליקציה, כולל:
- מצב טעינה ראשוני
- בדיקה אוטומטית האם המשתמש מחובר בעת טעינת האפליקציה
- רענון אוטומטי של הטוקן

תרגיל 5 - הגנת CORS ו-CSRF¶

צרו API Route ב-Next.js שמטפל ב:

א. CORS:
- רשימת origins מורשים
- טיפול ב-preflight requests (OPTIONS)
- הגדרת methods ו-headers מורשים

ב. CSRF:
- יצירת CSRF token
- middleware שמאמת את ה-token בכל בקשת POST/PUT/DELETE
- קומפוננטת React שמקבלת את ה-token ומצרפת אותו לבקשות

תרגיל 6 - סריקת אבטחה אוטומטית¶

צרו GitHub Actions workflow שמבצע:

בדיקת npm audit עם רמת חומרה high ומעלה
בדיקת TypeScript (type-check)
הרצת ESLint עם כללי אבטחה (eslint-plugin-security)
בדיקה שאין secrets בקוד (שימוש ב-truffleHog או כלי דומה)
שליחת התראה אם נמצאו בעיות

ה-workflow צריך לרוץ:
- בכל push ל-main
- בכל Pull Request
- פעם בשבוע (scheduled)

שאלות¶

מה ההבדל בין Stored XSS, Reflected XSS ו-DOM-based XSS? תנו דוגמה לכל אחד.
מדוע לא מומלץ לשמור JWT ב-localStorage? מה החלופה המומלצת?
מה התפקיד של SameSite attribute בעוגיות? מה ההבדל בין strict, lax ו-none?
הסבירו מה זה preflight request ומתי הדפדפן שולח אותו.
כיצד Content Security Policy מגנה מפני XSS? תנו דוגמה למדיניות שחוסמת סקריפטים חיצוניים.