5

After looking around I could not find a solution to this. I am getting error below ONLY when submitting thru Ajax. Meaning that I have beforehand submitted the form in the regular Symfony fashion without an issue.

The CSRF token is invalid. Please try to resubmit the form.

What works:

  • the regular form submission, ie, without Ajax
  • with Ajax I checked that $_POST is correctly populated, including the CSFR token, just before the submission on the controller side, as follows:

$form->submit($request->request->get($form->getName('user')));

As requested, see below output of

var_dump($request->request->get($form->getName('user')));

array(8) { 
["name"]=> string(9) "fafdffafa" 
["avatar"]=> string(9) "dfafffafa" 
["cityId"]=> string(1) "6" 
["phone"]=> string(14) "33434343434344" 
["email"]=> array(2) { 
      ["first"]=> string(22) "[email protected]" 
      ["second"]=> string(22) "[email protected]" } 
["plainPassword"]=> array(2) { 
      ["first"]=> string(8) "senha444" 
      ["second"]=> string(8) "senha444" } 
["blogSubs"]=> string(1) "1" 
["_token"]=> string(43) "hLhyoRxVYmJ_FWK0FqXmiiEYZMZ77fDAWvxCZMXCtxw" }

Just to confirm that if I just comment out the javascript below the submission will work and the entity will be persisted.

This is the same var_dump, this time for when things work.

array(9) { 
["name"]=> string(12) "dfdfdfdfafaf" 
["avatar"]=> string(13) "dfdfdfdafdafa" 
["cityId"]=> string(1) "8" 
["phone"]=> string(16) "3343434343343343" 
["email"]=> array(2) { 
    ["first"]=> string(22) "[email protected]" 
    ["second"]=> string(22) "[email protected]" }
["plainPassword"]=> array(2) { 
    ["first"]=> string(8) "senha444" 
    ["second"]=> string(8) "senha444" } 
["blogSubs"]=> string(1) "1" 
["save"]=> string(0) "" 
["_token"]=> string(43) "hLhyoRxVYmJ_FWK0FqXmiiEYZMZ77fDAWvxCZMXCtxw" }

This is the submit button generated by Symfony, but not captured by js serialization.

<button type="submit" id="user_save" name="user[save]" class="btn-default btn">Créer mon compte</button>

The form ( I am skipping the form $builder as it seems unnecessary )

app/Resources/views/common/register.html.twig

{{ form_start(form, { 'attr': { 'id': 'signup_form' }}) }}
    <div class="contact input-group">
        {{ form_widget(form.name) }}
    </div>
    <div class="contact input-group">
        {{ form_widget(form.avatar) }}
        <span class="input-group-addon" id="info_avatar">
            <i class="fa fa-info"></i>
        </span>       
    </div>
    <div class="contact input-group">
        {{ form_widget(form.cityId) }}
    </div>
    <div class="contact input-group">
        {{ form_widget(form.phone) }}           
    </div>
    <div class="contact input-group">
        {{ form_widget(form.email) }}
    </div>
    <div class="contact input-group">
        {{ form_widget(form.plainPassword) }}
    </div>
    <div class="contact">
        {{ form_widget(form.blogSubs) }}
    </div>
    <div class="contact form-group ">
        {{ form_widget(form.save) }}
    </div>
{{ form_end(form) }} 

The javascript on the same file:

<script>
    $('body').on('submit','#signup_form',function(event) {
        event.preventDefault();
        var str = $("#signup_form").serialize();
        $.ajax({
            url: "/inscription",
            type: "POST",
            dataType:"json",
            data: str,
            success: function (data) {
                            alert(data);
            }   
        });
    });
  </script>

And the controller ( the getErrorMessages() method was found on SO.)

/src/UsedBundle/Controller/RegistrationController.php

namespace UsedBundle\Controller;

use UsedBundle\Form\UserType;
use UsedBundle\Entity\User;
use Sensio\Bundle\FrameworkExtraBundle\Configuration\Route;
use Symfony\Bundle\FrameworkBundle\Controller\Controller;
use Symfony\Component\HttpFoundation\Request;
use Symfony\Component\Security\Core\Encoder\UserPasswordEncoderInterface;
use Doctrine\ORM\EntityManagerInterface;
use Symfony\Component\HttpFoundation\JsonResponse;

class RegistrationController extends Controller
{
/**
 * @Route("/inscription", name="inscription")
 */
public function registerAction(Request $request)
{
    $user = new User();
    $form = $this->createForm(UserType::class, $user);

    if ($request->isMethod('POST')) {
        var_dump($_POST);
        $form->submit($request->request->get($form->getName('user')));
        if(!$form->isValid()){ 
            $errors = $this->getErrorMessages($form);
            var_dump($errors);
        }
        if ($form->isSubmitted() && $form->isValid()) {
            $password = $this->get('security.password_encoder')
                ->encodePassword($user, $user->getPlainPassword());
            $user->setPassword($password);
            $email = $user->getEmail();
            $user->setUserKey( $email );
            $user->setUserKeyTime();
            $user->setDateReg();
            $em = $this->getDoctrine()->getManager('used');
            $em->persist($user);
            $em->flush();
            return new JsonResponse(array('message' => 'Success!'));
        }
    }else{
        return $this->render(
            'common/register.html.twig',
            array('form' => $form->createView())
        );           
    }
}

protected function getErrorMessages($form) 
{
    $errors = array();
    foreach ($form->getErrors() as $key => $error) {
        $errors[] = $error->getMessage();
    }

    foreach ($form->all() as $child) {
        if (!$child->isValid()) {
            $errors[$child->getName()] = $this->getErrorMessages($child);
        }
    }

    return $errors;
} 
}
20
  • Does $("#signup_form").serialize(); have the CSRF token ? Jun 22, 2017 at 21:04
  • var_dump($request->request->get($form->getName('user'))); ?
    – Max P.
    Jun 22, 2017 at 21:06
  • @OluwafemiSule, yes, as you can see I have a var_dump($_POST) just before submission on the controller to verify that.
    – BernardA
    Jun 22, 2017 at 21:06
  • @MaxP. fresh from the oven:array(8) { ["name"]=> string(9) "fafdffafa" ["avatar"]=> string(9) "dfafffafa" ["cityId"]=> string(1) "6" ["phone"]=> string(14) "33434343434344" ["email"]=> array(2) { ["first"]=> string(22) "[email protected]" ["second"]=> string(22) "[email protected]" } ["plainPassword"]=> array(2) { ["first"]=> string(8) "senha444" ["second"]=> string(8) "senha444" } ["blogSubs"]=> string(1) "1" ["_token"]=> string(43) "hLhyoRxVYmJ_FWK0FqXmiiEYZMZ77fDAWvxCZMXCtxw" }
    – BernardA
    Jun 22, 2017 at 21:09
  • @Bernard, you may wish to format it and post it in your question as an update, as it looks jumbled-up in the comment
    – Dennis
    Jun 22, 2017 at 21:31

1 Answer 1

0

As discussed in the comments, the cause of your issue is related to different environments. If you are using the standard Symfony project with the app_dev.php frontend controller your forms will be rendered with a valid csrf token for the dev environment. Your javascript code

$.ajax({
    url: "/inscription",
    type: "POST",
    dataType:"json",
    data: str,
    success: function (data) {
                    alert(data);
    }   
});

is not aware of the Symfony environment so the url /location points to the prod environment, resulting in the error message that the CSRF token is not valid.

To solve this issue you can either make your frontend code aware of the Symfony routing, e.g. by using the FOSJsRoutingBundle. Or you can disable the CSRF protection for the dev environment:

# app/config/config_dev.yml
framework:
    csrf_protection: false

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.