Answers.Body: <p>This is the syntax for Craft 3:</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
      window.csrfTokenName = "{{ craft.app.config.general.csrfTokenName }}";
      window.csrfTokenValue = "{{ craft.app.request.csrfToken }}";
  &lt;/script&gt;
  </code></pre>
  
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2018-06-28T19:12:31.753Z
Answers.LastActivityDate: 2018-06-28T19:12:31.753Z
Answers.UserDisplayName: Ryan
Answers.Body: <p>You need to pass the token and name into javascript. Easiest is to just have a script tag somewhere.</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
      window.csrfTokenName = "{{ craft.config.csrfTokenName }}";
      window.csrfTokenValue = "{{ craft.request.csrfTokenValue }}";
  &lt;/script&gt;
  </code></pre>
  
  <p>Now they will be available to your ajax call.</p>
  
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2015-11-20T19:02:52.773Z
Answers.Text: Thank you! I read that on the docs, but thought... well I can see that I am setting it so whats the big deal?
  
  I'd also like to point out to (anyone else) make sure that the above script needs to be placed above/before your ajax script is called.
Answers.UserDisplayName: Damon
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2015-11-20T19:04:29.120Z
Answers.Text: If your ajax call is triggered by a user event (such as click), it can go anywhere, just append the csrf stuff to your data inside the event handler.
Answers.UserDisplayName: megatrond
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2015-11-20T19:25:55.200Z
Answers.Text: Ah - you are right. It looks like I must of run into a cache issue. I was getting that the csrf config did not exist otherwise. All cool now - thank you again!
Answers.UserDisplayName: Damon
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2015-11-20T18:47:44.933Z
Answers.LastActivityDate: 2015-11-20T18:47:44.933Z
Answers.UserDisplayName: megatrond
Body: <p>I have built a plugin that simply makes requests to a 3rd party API. I am calling my plugin action via ajax.</p>
  
  <p>I don't have a form on this page currently. Here is what I am using, but I am getting the error <code>The CSRF token could not be verified.</code></p>
  
  <p>I thought I could just put a hidden input field somewhere on my template:</p>
  
  <p><strong>twig</strong></p>
  
  <pre><code>&lt;input type="hidden" name="{{ craft.config.csrfTokenName }}" value="{{ craft.request.csrfToken }}"&gt;
  </code></pre>
  
  <p>Here is what my ajax call looks like...</p>
  
  <p><strong>jquery</strong></p>
  
  <pre><code>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.
  });
  </code></pre>
  
  <p>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 <a href="https://craftcms.stackexchange.com/questions/4553/whats-the-best-way-to-skip-csrf-for-plugin-controllers">"skip" the CSRF token for these requests?</a></p>
  
Tags: <form><ajax><csrf>
Title: What is the best way to append CSRF token without using a form?
ThreadText: # What is the best way to append CSRF token without using a form?
  
  (Asked by: username_0 on 2015-11-20)
  
  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?](https://craftcms.stackexchange.com/questions/4553/whats-the-best-way-to-skip-csrf-for-plugin-controllers)
  
  **Tags:** form, ajax, csrf
  
  
  ---
  
  ## 2 answers
  
  ### Answer by username_2 on 2015-11-20. Score: 5 | Accepted answer
  
  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.
  
  > **Comments:**
  > **username_0**: Thank you! I read that on the docs, but thought... well I can see that I am setting it so whats the big deal?  I'd also like to point out to (anyone else) make sure that the above script needs to be placed above/before your ajax script is called.  
  > **username_2**: If your ajax call is triggered by a user event (such as click), it can go anywhere, just append the csrf stuff to your data inside the event handler.  
  > **username_0**: Ah - you are right. It looks like I must of run into a cache issue. I was getting that the csrf config did not exist otherwise. All cool now - thank you again!  
  
  ---
  
  ### Answer by username_1 on 2018-06-28. Score: 4
  
  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>
  
  ```
  
  
  ---
  
  