how to pass a csrf token between django and javascript

Question

I know very little about javascript.

I have a GeoDjango project, and am adding a map view of some of the data using Leaflet. There is a lot of data so I am using a Leaflet uGeoJSON Layer to display the data (this allows leaflet to post a bounding box so Django can filter results and only pass visible data).

I am adding leaflet to a django view.

I have this working with a function based view in django which I decorate with @csrf_exempt, but would like to pass the proper csrf headers so I can use the generic class based django views.

The documentation for [Leaflet uGeoJSON Layer][1] suggests:

var headers = {};

  // CSRF headers
  var token = jQuery("meta[name='_csrf']").attr("content");
  var header = jQuery("meta[name='_csrf_header']").attr("content");
  if (header) {
    headers[header]= token;
  }

  var customers = new L.uGeoJSONLayer({
    endpoint : "/layers/customers",
    headers: headers
  }).addTo(map);

I added this to my javascript but token and header are always null.

Here is my javascript.

map.js

var headers = {};

  // CSRF headers
  var token = jQuery("meta[name='_csrf']").attr("content");
  var header = jQuery("meta[name='_csrf_header']").attr("content");
  if (header) {
    headers[header]= token;
  }

// Point Styles
var 
  DmseJobStyle = {
  fillColor: "#FFFFE0",
  color: "#FFFF00",
  opacity: 1,
  fillOpacity: 0.8
}

var
... 
  DmseJobData = new L.uGeoJSONLayer({endpoint: "data.jobs/",
    usebbox: true,
    headers: headers,
    pointToLayer: function (feature, latlng) {
            return L.circleMarker(latlng, DmseJobStyle)
    },
    onEachFeature:function(feature, layer) {
        layer.bindPopup('Job: ' + feature.properties.num + '</br>Desc: ' + feature.properties.desc);
    } 
  }),


var map = L.map('map', {
    center: [45.75, -64.99],
    zoom: 10,
    layers: [osm]
});

var overlayMaps = {
    ...
    "DMSE Jobs": DmseJobData,
};

This is in a file map.js which is loaded in my django template using:

<script src="{% static 'core\map.js' %}"></script>

If I add a breakpoint, token and header will both be null when loading the map. If I allow it to keep going, I get a POST ... 403 error

Tyler2P · Accepted Answer · 2022-09-04 16:19:36Z

2

In my project I use:

var csrf_token = $('input[name="csrfmiddlewaretoken"]').val();

edited Sep 4, 2022 at 16:19

Tyler2P

2,37030 gold badges26 silver badges34 bronze badges

answered Aug 31, 2022 at 0:50

kuk4si

212 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Andrew Toole Over a year ago

This definitly got me part way. I now have something in the "headers" variable but django still gives a 403 error. I tried renaming it to "csrf_token" but still a 403 error. Is there something special I need to enable on the django side to read this? I have normal django authentication and permissions in place.

kuk4si Over a year ago

403 is a standard HTTP response code that sends that access to a private resource is denied. Put {% csrf_token %} in your hmtl code to create a token.

Andrew Toole Over a year ago

I am still getting a 403 error. I added the {% csrf_token %} to my template page. I can add a breakpoint in the javascript and see the header in the variable being passed to django. Is there a way to debug this on the django side to see where it is failing? Sorry, this is all new to me and my searches are not helping much.

Collectives™ on Stack Overflow

how to pass a csrf token between django and javascript

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related