What is CSRF and how can it be mitigated?

Answer

Client-side security is layered: keep untrusted data from becoming executable markup, enforce server-side authorization, and use browser protections such as CSP, secure cookies, and same-origin boundaries.

Example

const message = document.createElement("p")
message.textContent = untrustedComment // never assign untrusted HTML
document.body.append(message)

textContent treats the value as text, preventing it from becoming executable markup.

Practical considerations

1. Choose the approach from the requirement and constraints, not from habit.
2. Include validation, error handling, and cleanup where the boundary requires them.
3. Verify the observable result with focused tests or measurement.

Follow-up prompts

• What failure mode would you expect if this were implemented incorrectly?
• How would you test this behaviour?
• What changes when the feature must scale to a larger application or team?

In practice

For this hard-level topic, make assumptions explicit, choose the smallest safe implementation, and verify the behavior at the relevant boundary.