title: Trying to implement CSRF for a chrome extension with an ajax POST request
body: <p>I am trying to create a simple chrome extension that creates a user in a mongoDB database using an express server. I am making an ajax request to the server, but I am unable to set the CSRF value! I keep getting a 403 forbidden error.</p>
  
  <p>Here is my manifest.json file:</p>
  
  <pre><code>{
      "manifest_version": 2,
      "name": "Budget Manager",
      "version": "1.0",
      "description": "Tracking your spending",
      "icons": {
          "128": "icon128.png",
          "48": "icon48.png",
          "16": "icon16.png"
      },
      "browser_action": {
          "default_icon": "icon16.png",
          "default_popup": "popup.html"
      },
      "options_page": "options.html",
  
      "background": {
          "scripts": ["popup.js"],
          "persistent": false
      },
  
      "permissions": [
          "storage",
          "notifications",
          "contextMenus",
          "http://*/*",
          "https://*/*"
      ]
  }
  </code></pre>
  
  <p>Here is my popup.html file:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
      &lt;title&gt;Budget Manager&lt;/title&gt;
      &lt;!-- I added these later on --&gt;
      &lt;!-- &lt;meta name="_csrf" th:content="${_csrf.token}"/&gt;
      &lt;meta name="_csrf_header" th:content="${_csrf.headerName}"/&gt; --&gt; 
  &lt;/head&gt;
  &lt;body&gt;
      &lt;input type="text" id="create"&gt;
      &lt;input type="submit" id="createUser" name="createMe"&gt;
      &lt;script src="jquery-3.2.1.min.js"&gt;&lt;/script&gt;
      &lt;script src="popup.js"&gt;&lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Here is my popup.js file:</p>
  
  <pre><code>$(function() {
      // var token = $("meta[name='_csrf_header']").attr("content");
      // $.ajaxSetup({
   //     beforeSend: function() {
   //         'X-CSRF-Token': token
   //     }
      // });
  
      $("#createUser").click(function(e) {
          console.log(e);
          e.preventDefault();
          var id = $(this).find("#createUser").val();
          var csrf = $("meta[name='_csrf']").attr("content");
          $.ajax({
              method: "POST",
              url: "http://localhost:8080/createUser",
              data: {id:id, _csrf:csrf },
              dataType: 'json',
              contentType: 'application/json'
          }).done(function(err,json) {
              if (err) {console.log(err);}
              console.log("success");
              console.log(json);
          });
      });
  });
  </code></pre>
  
  <p>Here is the app.js file with the route defined:</p>
  
  <pre><code>.
  .
  .
  const express = require('express');
  const app = express();
  .
  .
  .
  const extensionController = require('./controllers/extension');
  app.post('/createUser', extensionController.createExtensionUser);
  </code></pre>
  
  <p>Here is the express method in the controller file:</p>
  
  <pre><code>exports.createExtensionUser = (req, res) =&gt; {
  
    const user = new Extension({
      name: req.body.name
    });
  
    Extension.findOne({ name: req.body.name }, (err) =&gt; {
      if (err) { req.flash('errors', { msg: 'Couldnt find that user :(!'}); }
      user.save((err,user) =&gt; {
        if (err) {
            console.log(err);
        }
        res.json(user);
      });
    });
  };
  </code></pre>
  
  <p>I saw a bunch of stack overflow links that told me to set a permission of http://<em>/</em> and that it would work then! However that didn't work out for me! Then I saw a few more posts where they tried to set the CSRF headers beforehand, and tried that out below as well (it's commented out). I also tried to give a meta tag to popup.html (another StackOverflow post) and get the CSRF value from that.</p>
  
  <p>So I want to know if this is the way to go about submitting a post request through the chrome extension or am I going about it totally wrong?</p>