<p>Here's how you can pass in the CSRF token via JavaScript: <a href="http://buildwithcraft.com/help/csrf-protection#updating-your-javascript" rel="nofollow">http://buildwithcraft.com/help/csrf-protection#updating-your-javascript</a></p>

CC BY-SA 3.0
2015-04-17T22:54:41.530Z
HOW DID I NOT FIND THIS!? Thank you!!
Damon
CC BY-SA 3.0
2015-04-17T22:04:16.940Z
2015-04-17T22:04:16.940Z
Brad Bell
<p>I have been staring <a href="https://craftcms.stackexchange.com/questions/6580/how-can-i-use-csrf-protection-with-ajax-routes">at this SE post on deleting using ajax</a> and it's just not clicking.</p>

<p>For example, I have a plugin with a list of users. Each user has a delete icon next to it.</p>

<p><strong>template</strong></p>

<pre><code>....
&lt;td class="thin"&gt;&lt;a class="delete delete-usericon" title="Delete" role="button" data-id="{{user.id}}" data-name={{user.name}}&gt;&lt;/a&gt;&lt;/td&gt;
....
</code></pre>

<p>To get my javascript, I am using the <code>init</code> method in my main plugin class.</p>

<p><strong>MyPlugin.php</strong></p>

<pre><code>if (craft-&gt;request-&gt;isCpRequeset() &amp;&amp; craft()-&gt;userSession-&gt;isLoggedIn())
{
    craft-&gt;template-&gt;includeJsResource('path/to/script.js');
}
</code></pre>

<p>So far, so good.</p>

<p><strong>script.js</strong></p>

<pre><code>....
$('.delete-user').click(function(event){
    var data = {
        'id': event.currentTarget.dataset.id,
        'csrfToken': // this is where i'm stuck
    };

    $.ajax({
        'type': 'post',
        'contentType': 'application/x-www-form-urlencoded; charset=utf-8',
        'cache': false,
        'url': 'path/to/deleteUser',
        'data': data,
        'dataType': 'json',
         'timeout': 5000
    }).done(function(status){
        console.log(status);
    }).fail(function(error){
        console.log(error);
    })
});
....
</code></pre>

<p><strong>UserController.php</strong></p>

<pre><code>....
actionDeleteUser() {
    $this-&gt;requireAjaxRequest();
    error_log(__FUNCTION__); // to just test im getting this far.
}
</code></pre>

<p>As you can imagine, I'm getting a <code>400 Bad Request The CSRF token could not be verified.</code></p>

<p>I can put a hidden text field on my users "home page" using <code>{{getCsrfInput}}</code> and then grab that value no problem. </p>

<p>If I log out my <code>data</code> object, I can see it's got the correct <code>id</code> and <code>csrfToken</code> but I will still get the 400. </p>

<p>I'm not sure how to pass the token along with the data to the controller just yet it seems.</p>

<p>Thank you for your time!</p>

<p><strong>EDIT</strong></p>

<p>Well, I believe I see my error, but I'm confident there is a better way (at least I think there could be)</p>

<p>I wasn't passing the correct name/key.</p>

<p><strong>script.js</strong></p>

<pre><code>var data = {
     'id': event.currentTarget.dataset.id,
     'CRAFT_CSRF_TOKEN': $('[name="CRAFT_CSRF_TOKEN"]).val()
}
</code></pre>

<p>I'm getting a 404 back now - great. I can figure that out. What i'm curious about is: Is there a better way?</p>

<p>I've put the <code>{{getCsrfInput}}</code> on my "home" page of my plugin that lists the users. I feel like i've just done a nice hack-job on my plugin.</p>

<plugin-development><ajax>
Delete plugin record via ajax
# Delete plugin record via ajax

(Asked by: username_0 on 2015-04-17)

I have been staring at this SE post on deleting using ajax and it's just not clicking.
For example, I have a plugin with a list of users. Each user has a delete icon next to it.
template
....

....

To get my javascript, I am using the init method in my main plugin class.
MyPlugin.php
if (craft->request->isCpRequeset() && craft()->userSession->isLoggedIn())
{
    craft->template->includeJsResource('path/to/script.js');
}

So far, so good.
script.js
....
$('.delete-user').click(function(event){
    var data = {
        'id': event.currentTarget.dataset.id,
        'csrfToken': // this is where i'm stuck
    };

    $.ajax({
        'type': 'post',
        'contentType': 'application/x-www-form-urlencoded; charset=utf-8',
        'cache': false,
        'url': 'path/to/deleteUser',
        'data': data,
        'dataType': 'json',
         'timeout': 5000
    }).done(function(status){
        console.log(status);
    }).fail(function(error){
        console.log(error);
    })
});
....

UserController.php
....
actionDeleteUser() {
    $this->requireAjaxRequest();
    error_log(__FUNCTION__); // to just test im getting this far.
}

As you can imagine, I'm getting a 400 Bad Request The CSRF token could not be verified.
I can put a hidden text field on my users "home page" using {{getCsrfInput}} and then grab that value no problem. 
If I log out my data object, I can see it's got the correct id and csrfToken but I will still get the 400. 
I'm not sure how to pass the token along with the data to the controller just yet it seems.
Thank you for your time!
EDIT
Well, I believe I see my error, but I'm confident there is a better way (at least I think there could be)
I wasn't passing the correct name/key.
script.js
var data = {
     'id': event.currentTarget.dataset.id,
     'CRAFT_CSRF_TOKEN': $('[name="CRAFT_CSRF_TOKEN"]).val()
}

I'm getting a 404 back now - great. I can figure that out. What i'm curious about is: Is there a better way?
I've put the {{getCsrfInput}} on my "home" page of my plugin that lists the users. I feel like i've just done a nice hack-job on my plugin.

**Tags:** plugin-development, ajax

---

## 1 answers

### Answer by username_1 on 2015-04-17. Score: 3 | Accepted answer

Here's how you can pass in the CSRF token via JavaScript: <http://buildwithcraft.com/help/csrf-protection#updating-your-javascript>

> **Comments:**
> **username_0**: HOW DID I NOT FIND THIS!? Thank you!!  

---

