Django CSRF token failure risk

On our production server, periodically we suffer from many CSRF token failures. The site does work fine for the rest, and I am aware CSRF failures may be user-side errors. However, for example this morning we received a flood of new failures, so we want to exclude any other possibilities.

An example failure mail today:

{
   "GET": {},
   "COOKIES": {},
   "ERROR": "Referer checking failed - no Referer.",
   "USER": "AnonymousUser",
   "META": {
       "REMOTE_ADDR": "127.0.0.1",
       "mod_wsgi.version": "(4, 5, 20)",
       "DOCUMENT_ROOT": "/usr/local/apache2/htdocs",
       "SERVER_ADDR": "127.0.0.1",
       "HTTP_ACCEPT_ENCODING": "gzip, deflate, br",
       "wsgi.multithread": "True",
       "HTTP_FORWARDED_REQUEST_URI": "/",
       "CONTEXT_DOCUMENT_ROOT": "/usr/local/apache2/htdocs",
       "wsgi.file_wrapper": "",
       "mod_wsgi.path_info": "/",
       "HTTP_ORIGIN": "chrome-extension://aegnopegbbhjeeiganiajffnalhlkkjb",
       (...)
   },
   "POST": {}
}

Especially the HTTP_ORIGIN looks “interesting”: why is this Chrome extension scraping/bullying us?

So essentially: Do we need to be worried about this?

Thanks!

chrome extension post request to other web page

I am a newb here, I am trying to make a chrome extension which will work alongside my rails app. It is a bookmarking app, so Id like a user to be able to browse on other sites, then to bookmark a page by clicking the chrome extension icon, and it would make the post request and add it to the users homepage.

Currently I can only get this to work from the users home page, but not from any other, which is not very useful. The issue I think is in the csrf token, which when set is set to the page of the current tab, but I think it would need to be the csrf token for the users home page in order for the request to go through? I have tried simply not including it, but this does not work, as it is required.

manifest.json :

    {
  "manifest_version": 2,
  "name": "My Cool Extension",
  "version": "0.1",
  "permissions" : [
    "tabs", 
    "", 
    "https://*/",
    "http://*/"
  ],
  "browser_action": {
    "default_icon": "icon.png"
  },
  "content_scripts": [
    {
      "matches": [""],
      "js": ["content.js", "html2canvas.js"]
    }
  ],
  "background": {
    "scripts": ["background.js"]
  }
}

background.js

    //Called when the user clicks on the browser action.
chrome.browserAction.onClicked.addListener(function(tab) {
  // Send a message to the active tab
  chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
    var activeTab = tabs[0];
    chrome.tabs.sendMessage(activeTab.id, {"message": "clicked_browser_action"});
  });
});

content.js

savePage = () => {
  console.log('save page called');
  var token = document.querySelector('meta[name="csrf- 
    token"]').getAttribute('content');
  var data = {"url":window.location.href, "screenshot":'tempScreen.png', 
    "user_id": 2, "title":document.title};

  var xhr = new XMLHttpRequest();
  xhr.open('POST', 'https://hidden-bastion-43962.herokuapp.com/bookmarks');
  xhr.withCredentials = true;
  xhr.setRequestHeader('Content-Type', 'application/json');
  xhr.setRequestHeader('X-CSRF-Token', token);
  xhr.send(JSON.stringify(data));
}

chrome.runtime.onMessage.addListener(
  function(request, sender, sendResponse) {
    if( request.message === "clicked_browser_action" ) {
      var firstHref = window.location.href;
      console.log(firstHref);
      takeScreenshot();
    }
  }
);

Ajax post request from google chrome extension to Laravel 5.5 app

I’m new to web dev.
I’m developing a laravel app with a google chrome extension to send a post request to laravel app using jquery ajax.

When I comment this line AppHttpMiddlewareVerifyCsrfToken::class, in AppHttpKernel.php

My form get posted and I hit Status Code: 200.

But if I uncomment that line I get Status Code: 419.

Here is my popup.html code:

  


    


    
    

     
    




    

Here is my popup.js code:

 taburl = "";
chrome.tabs.query(
{
    active: true,
    lastFocusedWindow: true
}, 
function(tabs) {
    // and use that tab to fill in out title and url
    var tab = tabs[0];
    var  link = tab.url;
    $("#input").val(link);
    var str = tab.title;
    var res = str.substring(0,20);
    $('.title').html(res+ '...');

    taburl = link;
}
);


$(document).ready(function() {
$.ajaxSetup({
headers: {
    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
}
});
$("#button").on("click", ajaxCall);

});

$("#input").val(taburl);

function ajaxCall(element) {
$.ajax({
        url : "https://app.test/",
        data : {
            "_token":"{{ csrf_token() }}",
            "url" : taburl,
            },
        method : "POST",
        success : function(data) {
            alert("sent url = " + taburl);
        }
});
}



 Here is the screenshot of the network tab:

Here is screenshot of the response header

Trying to implement CSRF for a chrome extension with an ajax POST request

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.

Here is my manifest.json file:

{
    "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://*/*"
    ]
}

Here is my popup.html file:




    Budget Manager
    
     


    
    
    
    


Here is my popup.js file:

$(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);
        });
    });
});

Here is the app.js file with the route defined:

.
.
.
const express = require('express');
const app = express();
.
.
.
const extensionController = require('./controllers/extension');
app.post('/createUser', extensionController.createExtensionUser);

Here is the express method in the controller file:

exports.createExtensionUser = (req, res) => {

  const user = new Extension({
    name: req.body.name
  });

  Extension.findOne({ name: req.body.name }, (err) => {
    if (err) { req.flash('errors', { msg: 'Couldnt find that user :(!'}); }
    user.save((err,user) => {
      if (err) {
          console.log(err);
      }
      res.json(user);
    });
  });
};

I saw a bunch of stack overflow links that told me to set a permission of http:/// 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.

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?