Cross-Site Request Forgery (CSRF) attacks pose a significant threat to the security of web applications. To protect against these attacks, developers must ensure proper CSRF protection is implemented in their JavaScript code. In this blog post, we will explore real-world examples of successful CSRF protection implementations in JavaScript, to provide insights into best practices and help you strengthen the security of your web applications.

Example 1: Synchronizer Token Pattern

One widely used CSRF protection pattern is the Synchronizer Token Pattern. In this approach, a unique token is generated and associated with each user session. This token is then included in all requests that modify server-side state or perform actions with side effects.

// Server-side code (e.g., in Express.js)
app.use((req, res, next) => {
  const token = generateToken(); // generate a secure random token

  // Store the token in the user's session
  req.session.csrfToken = token;

  // Send the token to the client as a cookie or in the response body

  next();
});

// Client-side code (e.g., in a form submission)
const form = document.getElementById('myForm');

form.addEventListener('submit', (event) => {
  event.preventDefault();

  // Include the token as a hidden field in the form
  const token = document.createElement('input');
  token.type = 'hidden';
  token.name = 'csrfToken';
  token.value = getCSRFToken();

  form.appendChild(token);
  form.submit();
});

In this example, the server generates a unique token and stores it in the user’s session. The token is then included as a cookie or in the response body. On the client-side, the token is added as a hidden field in forms before submitting.

Example 2: Double-Submit Cookie Pattern

Another effective CSRF protection technique is the Double-Submit Cookie Pattern. In this approach, a cookie containing a secure random value is set when the user logs in. This value is also included in a custom header or as a parameter in each subsequent request.

// Server-side code (e.g., in Express.js)
app.use((req, res, next) => {
  if (req.method === 'POST') {
    const csrfCookie = req.cookies.csrfToken;
    const csrfHeader = req.header('X-CSRF-Token');
    const csrfParam = req.body.csrfToken;

    if (csrfCookie !== csrfHeader || csrfCookie !== csrfParam) {
      return res.status(403).send('Invalid CSRF token');
    }
  }

  next();
});

// Client-side code (e.g., using Axios)
axios.interceptors.request.use((config) => {
  const csrfToken = getCSRFToken();

  if (csrfToken) {
    config.headers['X-CSRF-Token'] = csrfToken;
  }

  return config;
});

In this example, the server checks if the value of the CSRF token received via the cookie, custom header, or request parameter matches. If not, the server responds with a 403 Forbidden error. On the client-side, the token is included in the headers of each request using an interceptor.

Conclusion

Implementing robust CSRF protection is crucial to safeguarding the security of your web applications. By following established patterns like the Synchronizer Token Pattern or the Double-Submit Cookie Pattern, you can significantly reduce the risk of CSRF attacks. Remember to generate secure random tokens, store them securely, and verify their correctness on the server-side.

#javascript #CSRFprotection