React לעומת XSS: איפה מסתיימים אמצעי המיגון
React מאובטח כברירת מחדל. הוא מבצע escaping לערכים ב-JSX כדי למנוע את רוב הזרקות הסקריפטים. אך זה יוצר תחושת ביטחון שגויה. React מפחית את הסיכון ל-XSS, אך הוא לא מבטל אותו לחלוטין.
ישנם שלושה סוגים עיקריים של התקפות XSS:
- Reflected XSS: תוקף שולח קישור זדוני. השרת מחזיר את הסקריפט למשתמש באופן מיידי. הדפדפן מריץ את הסקריפט מכיוון שהוא נראה כאילו הגיע מאתר מהימן.
- Stored XSS: התוקף שומר סקריפט בשרת שלך. הוא נשמר במסד הנתונים, בתגובות או בלוגים שלך. כל משתמש שצופה בתוכן הזה מריץ את הסקריפט.
- DOM Based XSS: ההתקפה מתרחשת כולה בדפדפן. התוקף משנה פרמטרים ב-URL או קלטים בצד הלקוח (client side) כדי לגרום ל-JavaScript שלך להתנהג בצורה לא תקינה.
מפני מה React באמת מגן עליך?
- Automatic Escaping: React מתייחס למחרוזות כטקסט פשוט. אם תנסה להזריק תגית script לתוך JSX, React יציג את הטקסט במקום להריץ את הקוד.
- Safe Rendering: React מנהל את האופן שבו התוכן מוצג. זה מפחית את הצורך שלך להשתמש ב-APIs מסוכנים של הדפדפן.
- פחות מניפולציות DOM: React מטפל בעדכונים. אין צורך להשתמש ב-
document.write()או ב-innerHTMLבתדירות גבוהה.
React מספק "פתחי מילוט" (escape hatches). אם תשתמש בהם בצורה שגויה, תיצור פרצות אבטחה.
היזהרו מהטעויות הבאות:
dangerouslySetInnerHTML: המאפיין הזה אומר ל-React לדלג על ה-escaping. הוא מכניס HTML בדיוק כפי שהוא. אם התוכן אינו נקי, התוקף מנצח. השתמש ב-DOMPurify כדי לנקות (sanitize) את התוכן שלך תחילה.- Direct DOM Manipulation: אם תשתמש ב-
element.innerHTMLעם קלט ממשתמש, אתה עוקף את כל מנגנוני האבטחה של React. - ספריות צד שלישי: ייתכן שכלים חיצוניים מסוימים לא יעקבו אחר אותם כללי בטיחות.
React מספק את הכלים לאבטחה. עליך להשתמש בהם בצורה נכונה. האבטחה היא באחריותך.
מקור: https://dev.to/ayomidejhay/react-vs-xss-where-the-guardrails-end-6p2