What is the best way to append CSRF token without using a form?

Question

I have built a plugin that simply makes requests to a 3rd party API. I am calling my plugin action via ajax.

I don't have a form on this page currently. Here is what I am using, but I am getting the error The CSRF token could not be verified.

I thought I could just put a hidden input field somewhere on my template:

twig

<input type="hidden" name="{{ craft.config.csrfTokenName }}" value="{{ craft.request.csrfToken }}">

Here is what my ajax call looks like...

jquery

var data = {
    'thing': value,
    'thing': value
};

data[window.csrfTokenName] = window.csrfTokenValue;

$.ajax({
    'type': 'post',
    'contentType': 'application/x-www-form-urlencoded; charset=UTF-8',
    'cache': false,
    'data': data,
    'url': 'myplugin/doAction',
    'dataType': 'json',
    'timeout': 50000
}).done(function (response) {
    callback(response);
}).fail(function (error) {
    // Total fail.
});

Later on in my site I will have a form that accepts user input, so I would like to keep CSRF enabled for the entire site. Perhaps I need to "skip" the CSRF token for these requests?

Answer 1

You need to pass the token and name into javascript. Easiest is to just have a script tag somewhere.

<script type="text/javascript">
    window.csrfTokenName = "{{ craft.config.csrfTokenName }}";
    window.csrfTokenValue = "{{ craft.request.csrfTokenValue }}";
</script>

Now they will be available to your ajax call.

Answer 2

This is the syntax for Craft 3:

<script type="text/javascript">
    window.csrfTokenName = "{{ craft.app.config.general.csrfTokenName }}";
    window.csrfTokenValue = "{{ craft.app.request.csrfToken }}";
</script>