Pitfall #1: Server-Side Rendering Attacker-Controlled Initial State

Pitfall #3: Misunderstanding What it Means to Dangerously Set

Pitfall #2: Sneaky Links

One option is to use the serialize-javascript NPM module to escape the rendered JSON.

This is risky because JSON.stringify() will blindly turn any data you give it into a string (so long as it is valid JSON) which will be rendered in the page. If { data } has fields that un-trusted users can edit like usernames or bios, they can inject something like this:

Sometimes when we render initial state, we dangerously generate a document variable from a JSON string. Vulnerable code looks like this:

Server-side rendering attacker-controlled initial state

攻击者提交恶意代码。

DOMPurify - a DOM-only, super-fast, uber-tolerant XSS sanitizer for HTML, MathML and SVG

In short: storing the token in HttpOnly cookies mitigates XSS being used to get the token, but opens you up to CSRF, while the reverse is true for storing the token in localStorage.

Remember that any Cross-Site Scripting (XSS) can be used to defeat all CSRF mitigation techniques!

That means if an attacker can inject some JavaScript code that runs on the web app’s domain, they can steal all the data in localStorage. The same is true for any third-party JavaScript libraries used by the web app. Indeed, any sensitive data stored in localStorage can be compromised by JavaScript. In particular, if an attacker is able to snag an API token, then they can access the API masquerading as an authenticated user.

But there’s a drawback that I didn’t like about this option: localStorage is vulnerable to Cross-site Scripting (XSS) attacks.

the majority of XSS attacks target theft of session cookies. A server could help mitigate this issue by setting the HttpOnly flag on a cookie it creates, indicating the cookie should not be accessible on the client.

Cross-site scripting (XSS) vulnerabilities (even in other applications running on the same domain) allow attackers to bypass essentially all CSRF preventions.

IFRAME element may be a security risk if any page on your site contains an XSS vulnerability which can be exploited

${JSON.stringify(state)}

XSS mitigation

跟跨网站脚本（XSS）相比，XSS 利用的是用户对指定网站的信任，CSRF 利用的是网站对用户网页浏览器的信任。