Voraussetzungen

Dieses Tutorial folgt auf meinen vorherigen Beitrag über Rails API Authentifizierung mit React Frontend.

Wie es funktioniert

• Nach dem Login speichert der Browser ein sicheres Cookie, das automatisch jeder Client-Anfrage beigefügt wird.
• Die Website eines Angreifers kann Anfragen im Namen des Benutzers fälschen, und diese werden authentifiziert.

Warum CORS CSRF nicht stoppt

• CORS (Cross-Origin Resource Sharing) kontrolliert, wer Antworten von Cross-Origin-Anfragen lesen kann.
• Es verhindert nicht, dass der Browser die Anfrage sendet.
• CSRF verlässt sich nicht auf das Lesen der Antwort – es braucht nur den Browser, um eine gültige Anfrage mit Cookies zu senden.

Lösung: Einen weiteren Validierungsvektor hinzufügen

• Erzeugen eines CSRF-Tokens auf dem Server.
• Rückgabe bei der Authentifizierung.
• Einbeziehung des CSRF-Tokens in den Anfragetext oder einen benutzerdefinierten Header für jede statusändernde Anfrage.

Rails 8 + React: Implementierung

1. CSRF-Token auf dem Server generieren

Konfigurieren Sie Rails so, dass ein CSRF-Token generiert und in einem Cookie gesendet wird.

In app/controllers/application_controller.rb:

class ApplicationController < ActionController::API
  include ActionController::Cookies
  include ActionController::RequestForgeryProtection

  protect_from_forgery with: :exception
  before_action :set_csrf_cookie

  private

  def set_csrf_cookie
    cookies["CSRF-TOKEN"] = form_authenticity_token
  end
end

2. CSRF-Token in React verwenden

Konfigurieren Sie Axios-Defaults in src/axios.ts:

import axios from "axios";

axios.defaults.xsrfCookieName = "CSRF-TOKEN";
axios.defaults.xsrfHeaderName = "X-CSRF-Token";
axios.defaults.withCredentials = true;

export default axios;

Dann in Ihrer Komponente:

import axios from "../axios";

export default function Register() {
  useEffect(() => {
    axios.get("api/csrf-token");
  }, []);

  function handleRegistration() {
    axios.post("api/users", { email, password });
  }

  return (
    // Ihr Formular-TSX
  );
}

Fazit

Sie haben gelernt, wie CSRF funktioniert, warum CORS allein es nicht verhindert und wie man CSRF-Schutz in Rails 8 mit einem React-Frontend implementiert.