Question 1

การโจมตี XSS (Cross-Site Scripting) คืออะไร?

Accepted Answer

การโจมตี XSS เกี่ยวข้องกับการแทรกโค้ด JavaScript ที่เป็นอันตรายเข้าไปในแอปพลิเคชันเว็บเพื่อรันในเบราว์เซอร์ของผู้ใช้คนอื่น ผู้โจมตีใช้ประโยชน์จากช่องโหว่ด้าน validation หรือ escaping เพื่อขโมย cookie, session token หรือดำเนินการที่ไม่ได้รับอนุญาต React มีการป้องกันในตัวโดย escape ค่า JSX โดยอัตโนมัติ แต่ยังคงมีช่องโหว่กับ dangerouslySetInnerHTML หรือการจัดการ DOM โดยตรง

Question 2

React ป้องกันการโจมตี XSS โดยค่าเริ่มต้นอย่างไร?

Accepted Answer

React escape ค่าทั้งหมดที่แทรกผ่าน JSX โดยอัตโนมัติโดยแปลงเป็นข้อความธรรมดาก่อนการ render การป้องกันนี้ช่วยป้องกันการรันสคริปต์ที่เป็นอันตรายแม้จะมีการแทรกโค้ด HTML เข้าไปในข้อมูล แตกต่างจาก innerHTML ที่แปลงและรัน HTML, React ถือว่าแท็กเป็นข้อความธรรมดา ทำให้ไม่สามารถแทรก JavaScript ที่เป็นอันตรายผ่าน props หรือ state มาตรฐานได้

Question 3

ทำไม dangerouslySetInnerHTML ถึงถือว่าอันตรายใน React?

Accepted Answer

คุณสมบัตินี้หลีกเลี่ยงการป้องกัน XSS ของ React โดยการแทรก HTML ดิบโดยตรงลงใน DOM โดยไม่มีการ escape หากเนื้อหามาจากแหล่งที่ไม่น่าเชื่อถือหรือ API ภายนอก อาจมี JavaScript ที่เป็นอันตรายที่จะถูกรัน ชื่อที่ชัดเจน dangerouslySetInnerHTML บังคับให้นักพัฒนารับรู้ถึงความเสี่ยงด้านความปลอดภัยและนำ sanitization ที่เหมาะสมมาใช้กับ library อย่าง DOMPurify

React ความปลอดภัย & แนวปฏิบัติที่ดีที่สุด

การโจมตี XSS (Cross-Site Scripting) คืออะไร?

คำตอบ

React ป้องกันการโจมตี XSS โดยค่าเริ่มต้นอย่างไร?

คำตอบ

ทำไม dangerouslySetInnerHTML ถึงถือว่าอันตรายใน React?

คำตอบ

ความแตกต่างหลักระหว่างการโจมตี XSS แบบ Stored และ Reflected คืออะไร?

ควรใช้แนวทางใดในการแสดง HTML จาก API ภายนอกใน React?

หัวข้อสัมภาษณ์ 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 สำหรับการสัมภาษณ์ครั้งถัดไป