TokenMismatchException in VerifyCsrfToken.php

I am using x-editable as my "edit in place" however I am using bootstrap tabs on the same page and each tab has the same CSRF. Do they need to be different?

Blade:

  <input name="__RequestVerificationToken" type="hidden" value="{{ csrf_token() }}" />

JS:

$.fn.editable.defaults.params = function (params) {
    params._token = $("#_token").data("token");
    return params;

mehany

10 years ago

Level 13

No, you should just have one csrf token on the page and check the ajax params for the token, make sure it gets submitted

jzmwebdevelopment

10 years ago

Level 1

@mehany

My HTML is like this on each tab - do I only need the token on one?

input name="__RequestVerificationToken" type="hidden" value="{{ csrf_token() }}" />
    <div class="box-body">
      <div class="form-group">
        <label class="col-sm-2 control-label" for="siteName">Website Name</label>

        <div class="col-sm-3">
          <div class="input-group">
            <input class="form-control updateField" data-url="{{ route('generalDataSubmit', 1)}}" data-title="Website Name" name="siteName" placeholder="Email" type="input" value="{{ old('siteName', $siteSettingsData->siteName)}}"> <span class="input-group-btn"><button class="btn btn-default edit" type="button"><span class="glyphicon glyphicon glyphicon-pencil"></span></button></span>
          </div>
        </div>
      </div>

Snapey

10 years ago

Level 122

You need the token submitted with each post. If you have a seperate form on each tab then yes, you should include the csrf_field() in each tab but more accurately, you need it per form.

Use the networks tab in browser tools to check what gets posted each time.

mehany

10 years ago

Level 13

@Snappy I don't think the per form thing is possible in this case. x-editable appends forms on the fly to allow editing of the area in concern. Additionally, according to the docs, csrf tokens are tied to the session and not the form, so having a valid csrf token in the ajax request is sufficient for Laravel to verify that it is not a bad request.

Edit: I couldn't use the x-editable ajax config function, but jQuery ajax events should do the trick

Please or to participate in this conversation.