React ความปลอดภัย & แนวปฏิบัติที่ดีที่สุด
การป้องกัน XSS, การป้องกัน CSRF, dangerouslySetInnerHTML, Content Security Policy, HTTPS, sanitization
1การโจมตี XSS (Cross-Site Scripting) คืออะไร?
การโจมตี XSS (Cross-Site Scripting) คืออะไร?
คำตอบ
การโจมตี XSS เกี่ยวข้องกับการแทรกโค้ด JavaScript ที่เป็นอันตรายเข้าไปในแอปพลิเคชันเว็บเพื่อรันในเบราว์เซอร์ของผู้ใช้คนอื่น ผู้โจมตีใช้ประโยชน์จากช่องโหว่ด้าน validation หรือ escaping เพื่อขโมย cookie, session token หรือดำเนินการที่ไม่ได้รับอนุญาต React มีการป้องกันในตัวโดย escape ค่า JSX โดยอัตโนมัติ แต่ยังคงมีช่องโหว่กับ dangerouslySetInnerHTML หรือการจัดการ DOM โดยตรง
2React ป้องกันการโจมตี XSS โดยค่าเริ่มต้นอย่างไร?
React ป้องกันการโจมตี XSS โดยค่าเริ่มต้นอย่างไร?
คำตอบ
React escape ค่าทั้งหมดที่แทรกผ่าน JSX โดยอัตโนมัติโดยแปลงเป็นข้อความธรรมดาก่อนการ render การป้องกันนี้ช่วยป้องกันการรันสคริปต์ที่เป็นอันตรายแม้จะมีการแทรกโค้ด HTML เข้าไปในข้อมูล แตกต่างจาก innerHTML ที่แปลงและรัน HTML, React ถือว่าแท็กเป็นข้อความธรรมดา ทำให้ไม่สามารถแทรก JavaScript ที่เป็นอันตรายผ่าน props หรือ state มาตรฐานได้
3ทำไม dangerouslySetInnerHTML ถึงถือว่าอันตรายใน React?
ทำไม dangerouslySetInnerHTML ถึงถือว่าอันตรายใน React?
คำตอบ
คุณสมบัตินี้หลีกเลี่ยงการป้องกัน XSS ของ React โดยการแทรก HTML ดิบโดยตรงลงใน DOM โดยไม่มีการ escape หากเนื้อหามาจากแหล่งที่ไม่น่าเชื่อถือหรือ API ภายนอก อาจมี JavaScript ที่เป็นอันตรายที่จะถูกรัน ชื่อที่ชัดเจน dangerouslySetInnerHTML บังคับให้นักพัฒนารับรู้ถึงความเสี่ยงด้านความปลอดภัยและนำ sanitization ที่เหมาะสมมาใช้กับ library อย่าง DOMPurify
ความแตกต่างหลักระหว่างการโจมตี XSS แบบ Stored และ Reflected คืออะไร?
ควรใช้แนวทางใดในการแสดง HTML จาก API ภายนอกใน React?
+19 คำถามสัมภาษณ์
หัวข้อสัมภาษณ์ React / Next.js อื่นๆ
พื้นฐาน JavaScript
พื้นฐาน React
React Hooks
วงจรชีวิตของ component
React Router
การจัดการ state ด้วย Context
ฟอร์มและ Controlled Components
การดึงข้อมูลและ API
React Query (TanStack Query)
Styling & CSS-in-JS
พื้นฐาน Next.js
TypeScript กับ React
การดึงข้อมูล Next.js
Server Actions ของ Next.js
การกำหนดเส้นทางและการนำทางใน Next.js
API Routes ใน Next.js
Metadata & SEO ใน Next.js
Middleware และ Auth ใน Next.js
การทดสอบ React
Zustand State Management
การเพิ่มประสิทธิภาพ React
Error Boundaries & การจัดการข้อผิดพลาด
Advanced React Patterns
ฟีเจอร์ขั้นสูงของ Next.js
การ Deploy & Production ของ Next.js
Architecture & Design Patterns
React Server Components
การแปลภาษา Next.js
เชี่ยวชาญ React / Next.js สำหรับการสัมภาษณ์ครั้งถัดไป
เข้าถึงคำถามทั้งหมด flashcards แบบทดสอบเทคนิค แบบฝึกหัด code review และตัวจำลองสัมภาษณ์
เริ่มใช้ฟรี