TokenMismatchException Laravel Contact Form

Question

I understand that you need a csrf_token() as posted in other questions/answers, but what if I was making calls from an external server that can't get the token?

First time building anything in Laravel. I am just building a simple ajax contact form to get familiarized with it.

Here's my JS (there will be some client side processing so I need individual values instead of just serializing it straight up)

$('#contact-form').on('submit', function(e){

    e.preventDefault();

    $.ajax({
        type: 'POST',
        url: 'forms/contact.php',
        dataType: "json",
        data: {

            name: encodeURIComponent($("#contact-name").val()),
            email: encodeURIComponent($("#contact-email").val()),
            phone: encodeURIComponent($("#contact-phone").val()),
            subject: encodeURIComponent($("#contact-subject").val()),
            message: encodeURIComponent($("#contact-message").val())


        },
        success: function(data) {

            alert(data.message);

        }

    });

});

Here is my Route (which is in web.php)

Route::post('forms/contact.php', 'ContactController@send'); 

And here is my Contact Controller's main public function "send"

public function send(Request $request){

    return response()->json([
        'result' => true,
        'message' => 'success'
    ]);
}

Main goal right now is to just get a successful message back to the form.

...and would anyone know how I would return validation back to the form using something like this?

    $this->validate($request, [
        'name' => 'required',
        'email' => 'required|email',
        'message' => 'required'
    ]);

I apologize, I picked up Laravel yesterday so I'm super noob

Answer 1

Laravel has a CRSF token that requires you to pass along a key to the POST call which is stored in the session. If this token does not match or does not exsist, it will refuse the request. You can read more about this here

How to fix:

        name: encodeURIComponent($("#contact-name").val()),
        email: encodeURIComponent($("#contact-email").val()),
        phone: encodeURIComponent($("#contact-phone").val()),
        subject: encodeURIComponent($("#contact-subject").val()),
        message: encodeURIComponent($("#contact-message").val()),
        _token: "{{ csrf_token() }}"

Answer 2

By default, Laravel will protect you agains CSRF attacks (when using the web middleware).

Read more about it here: https://laravel.com/docs/5.4/csrf

A simple approach, is to output the CSRF token in your page, then grab the token with your Javascript code and store it to a global variable.

In your mail html page template:

<script>
    window.Laravel = <?php echo json_encode([
        'csrfToken' => csrf_token(),
    ]); ?>
</script>

Then, send it in any post, put and patch requests, in a header value X-CSRF-TOKEN .

For example, in your post call using jQuery ajax:

$('#contact-form').on('submit', function(e){

    e.preventDefault();

    $.ajax({
        type: 'POST',
        beforeSend: function(request) {
          request.setRequestHeader("X-CSRF-TOKEN", Laravel.csrfToken);
        },
        url: 'forms/contact.php',
        dataType: "json",
        data: {

            name: encodeURIComponent($("#contact-name").val()),
            email: encodeURIComponent($("#contact-email").val()),
            phone: encodeURIComponent($("#contact-phone").val()),
            subject: encodeURIComponent($("#contact-subject").val()),
            message: encodeURIComponent($("#contact-message").val())


        },
        success: function(data) {

            alert(data.message);

        }

    });
});