What types of attacks on the frontend do you know? How to protect against them?

Main types of attacks on the frontend:

• XSS (Cross-Site Scripting) — injecting malicious scripts into a web page.
• CSRF (Cross-Site Request Forgery) — forging requests on behalf of a user.
• Clickjacking — deceiving users with invisible or disguised elements.
• Man-in-the-Middle (MITM) — intercepting and altering data between client and server.
• Injections (e.g., HTML injections) — injecting unwanted code.

Protection:

• For XSS — escaping and validating user input, Content Security Policy (CSP).
• For CSRF — using CSRF tokens, checking Origin/Referer.
• For Clickjacking — using the X-Frame-Options: DENY or SAMEORIGIN header.
• Using HTTPS to protect against MITM.
• Minimizing trust in external scripts, using Subresource Integrity (SRI).

Example of XSS protection in React:

function SafeComponent({ userInput }) {
  return <div>{userInput}</div>; // React automatically escapes
}

To insert HTML, use dangerouslySetInnerHTML with caution and proper sanitization.