Answers.Body: <p>You can take a look at the guide <a href="https://craftcms.com/guides/enabling-csrf-protection#updating-your-javascript" rel="nofollow noreferrer">Enabling CSRF Protection</a> </p>
  
  <pre class="lang-JavaScript prettyprint-override"><code>&lt;script type="text/javascript"&gt;
      window.csrfTokenName = "{{ craft.app.config.general.csrfTokenName|e('js') }}";
      window.csrfTokenValue = "{{ craft.app.request.csrfToken|e('js') }}";
  &lt;/script&gt;
  </code></pre>
  
  <pre class="lang-js prettyprint-override"><code>var data = {
      // ...
  };
  
  // Add the CSRF Token
  data[csrfTokenName] = csrfTokenValue;
  
  $.post('/some/url', data, function(response, textStatus, jqXHR) {
      // ...
  });
  </code></pre>
  
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2019-02-21T11:23:43.280Z
Answers.Text: Thank you, just what I was looking for. Strange that I didn't came across these guides, is it just me or is the Craft documentation a bit all over the place?
Answers.UserDisplayName: dazz
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2019-02-21T11:26:37.537Z
Answers.Text: The Craft documentation became way better in the last month and when you know where you need to search you can get your information quite good. But the best place is still the source code
Answers.UserDisplayName: Robin Schambach
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2019-02-20T12:30:44.050Z
Answers.LastActivityDate: 2019-02-20T12:30:44.050Z
Answers.UserDisplayName: Robin Schambach
Body: <p>I'm trying to make a simple post request with ajax to a controller in plugin.
  The problem I'm having is that I always get a 400 Bad request because I don't send a valid CSRF Token.</p>
  
  <p>But I can't figure out how to get this in javascript. I found multiple examples saying you get it by calling</p>
  
  <pre><code>Craft.getCsrfInput();
  </code></pre>
  
  <p>but this only works in "CP mode", on the front-end the Craft object is not available. I also found that importing it is not a good idea.</p>
  
  <p>So anyone who can tell me how to do this?</p>
  
Tags: <plugin-development><craft3><ajax><javascript><csrf>
Title: Ajax post request front-end csrf token
ThreadText: # Ajax post request front-end csrf token
  
  (Asked by: username_0 on 2019-02-20)
  
  I'm trying to make a simple post request with ajax to a controller in plugin.
  The problem I'm having is that I always get a 400 Bad request because I don't send a valid CSRF Token.
  
  But I can't figure out how to get this in javascript. I found multiple examples saying you get it by calling
  
  ```
  Craft.getCsrfInput();
  
  ```
  
  but this only works in "CP mode", on the front-end the Craft object is not available. I also found that importing it is not a good idea.
  
  So anyone who can tell me how to do this?
  
  **Tags:** plugin-development, craft3, ajax, javascript, csrf
  
  
  ---
  
  ## 1 answers
  
  ### Answer by username_1 on 2019-02-20. Score: 3 | Accepted answer
  
  You can take a look at the guide [Enabling CSRF Protection](https://craftcms.com/guides/enabling-csrf-protection#updating-your-javascript)
  
  ```JavaScript
  <script type="text/javascript">
      window.csrfTokenName = "{{ craft.app.config.general.csrfTokenName|e('js') }}";
      window.csrfTokenValue = "{{ craft.app.request.csrfToken|e('js') }}";
  </script>
  
  ```
  
  ```js
  var data = {
      // ...
  };
  
  // Add the CSRF Token
  data[csrfTokenName] = csrfTokenValue;
  
  $.post('/some/url', data, function(response, textStatus, jqXHR) {
      // ...
  });
  
  ```
  
  > **Comments:**
  > **username_0**: Thank you, just what I was looking for. Strange that I didn't came across these guides, is it just me or is the Craft documentation a bit all over the place?  
  > **username_1**: The Craft documentation became way better in the last month and when you know where you need to search you can get your information quite good. But the best place is still the source code  
  
  ---
  
  