Ajax Request an Backend Route wirft Fehler (400)

[agonyz]

Hallo Contao-Forum,

ich entwickel gerade eine Erweiterung und lasse mir in einem Service, den ich in den Controller meines Content-Elements injecte, ein RequestToken generieren (wie hier: https://docs.contao.org/dev/framewor...king-the-token)
Dieses übergebe ich dann an mein Twig-Template, wo ich es als hidden-Field ausgebe.

Danach versuche ich mit diesem Request Token einen Request an einen anderen Controller von mir zu machen.
Dies führt zu folgendem Fehler:

Invalid CSRF token. Please reload the page and try again.

Das Request-Token habe ich im Frontend überprüft. Hier funktioniert alles soweit bei der Generierung.
Der Controller funktioniert ebenfalls, da er mir eine gültige Antwort zurücksendet, wenn ich den token_check auf false setze.

Mein Ajax-Request sieht folgendermaßen aus:

<script>
    document.getElementById('sendBtn').addEventListener('click', sendRequest);
    var requestToken = document.getElementById('requestToken').value;

    var request =
    {
        'REQUEST_TOKEN': requestToken,
        'data': 'Some text and input'
    }

    function sendRequest() {
        fetch('/contao/agonyz/controller-route', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
            },
            body: JSON.stringify(request),
        })
        .then(response => response.json())
        .then(data => {
            console.log('Success:', data);
        })
        .catch((error) => {
            console.error('Error:', error);
        });
    }
</script> 

Kann mir vielleicht jemand helfen, wieso ich hier immer diesen Fehler erhalte?
Übergebe ich mein Request Token nicht richtig?

[Spooky]

In deinem JavasScript holst du dir den Request Token von einem HTML Element mit der ID "requestToken". Existiert so ein Element überhaupt? Wenn ja, hat dieses Element einen Request Token als "value"?

[agonyz]

In deinem JavasScript holst du dir den Request Token von einem HTML Element mit der ID "requestToken". Existiert so ein Element überhaupt? Wenn ja, hat dieses Element einen Request Token als "value"?

Hey Spooky, sorry hatte es mittlerweile hinbekommen.

Der Vollständigkeit wegen hier nochmal:

<script>
    document.getElementById('sendBtn').addEventListener('click', sendRequest);
    var requestToken = document.getElementById('requestToken').value;

    function sendRequest() {
        fetch('/contao/agonyz/controller-route', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/x-www-form-urlencoded',
            },
            body: "data="+ JSON.stringify(Object.assign({}, memeData)) +"&REQUEST_TOKEN="+requestToken,
        })
        .then(response => response.json())
        .then(data => {
            console.log('Success:', data);
        })
        .catch((error) => {
            console.error('Error:', error);
        });
    }
</script> 

Nach der Umstellung von

'Content-Type': 'application/json' 

auf

'Content-Type': 'application/x-www-form-urlencoded' 

und der Anpassung im body hat es dann funktioniert.

[Medi]

Ich hänge mich hier mal dran, da ich aktuell ein sehr ähnliches Problem habe.

Ich möchte einen Wert in der DB anpassen, ohne die Seite neu zu laden (zB. einem Mitglied "Likes" hinzufügen).
Dafür habe ich eine Route definiert:

#[Route('/_likes/toggle', name: LikesController::class, methods: ['POST'], defaults: ['_scope' => 'frontend'])]
class LikesController
{
    public function __construct(private readonly Security $security)
    {
    }
    
    public function __invoke(Request $request): Response
    {    
        $user = $this->security->getUser();
        
        // Check for front end user role
        if (!$user instanceof FrontendUser) {
            return new Response('FrontendUser not logged in.');
        }
... 

Und ein Javascript welches die Route per Fetch aufruft:

...
const memberId = memberElement.getAttribute('data-id');
const response = await fetch(route, {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json'
                    },
                    body: JSON.stringify({ 
                        memberId: memberId,
                        REQUEST_TOKEN: '<?php echo $csrfToken; ?>'
                        })
                });
                
                if (response.ok) { // if HTTP-status is 200-299
                  // Get the response body
                  let responseText = await response.text();
                  console.log(responseText);
                } else {
                  console.log("HTTP-Error: " + await response.status);
                };

Funktioniert ohne Token Prüfung, aber sobald diese aktiv wird, bekomme ich einen 400 Error. Wie kann ich den Token mitliefern? Ich habe in den Contao / Symfony Docs noch nichts dazu gefunden, in welchem Schema eigene Routen den Token haben wollen.

[Spooky]

Den Token bekommst du über den CSRF Token Manager.

Aber schickst du denn überhaupt User Daten über deinen AJAX Request? Der Code, den du gepostet hast, lässt das nämlich nicht vermuten.

[Medi]

Userdaten verschicke ich in diesem Beispiel nicht zwingend, ich wüsste aber dennoch gerne, wie man sich hier für zukünftige Features absichert.

Okay, so wie ich das verstehe ist hier beschrieben, wie ich den Token in's Template bekomme. Aber ich muss ihn doch immer noch in meinem fetch request übermitteln, oder? Muss ich die Daten als Formular versenden damit der Token innerhalb der Route erkannt wird? Falls ich die Daten als Json abschicken kann, weiß ich nicht wie der key lauten muss.

[Spooky]

Aber ich muss ihn doch immer noch in meinem fetch request übermitteln, oder?

Genau, über einen POST Parameter namens REQUEST_TOKEN.