Rewrote CSRF JavaScript example without jQuery.

This commit is contained in:
Jon Dufresne 2019-12-12 07:34:03 -08:00 committed by Carlton Gibson
parent 9736137cdc
commit 3fe5d0128b
1 changed files with 13 additions and 23 deletions

View File

@ -137,39 +137,29 @@ and read the token from the DOM with JavaScript:
{% csrf_token %}
<script>
// using jQuery
var csrftoken = jQuery("[name=csrfmiddlewaretoken]").val();
var csrftoken = document.querySelector('[name=csrfmiddlewaretoken]').value;
</script>
Setting the token on the AJAX request
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Finally, you'll have to actually set the header on your AJAX request, while
protecting the CSRF token from being sent to other domains using
`settings.crossDomain <https://api.jquery.com/jQuery.ajax/>`_ in jQuery 1.5.1
and newer:
Finally, you'll need to set the header on your AJAX request. Using the
`fetch()`_ API:
.. code-block:: javascript
function csrfSafeMethod(method) {
// these HTTP methods do not require CSRF protection
return (/^(GET|HEAD|OPTIONS|TRACE)$/.test(method));
}
$.ajaxSetup({
beforeSend: function(xhr, settings) {
if (!csrfSafeMethod(settings.type) && !this.crossDomain) {
xhr.setRequestHeader("X-CSRFToken", csrftoken);
}
}
var request = new Request(
/* URL */,
{headers: {'X-CSRFToken': csrftoken}}
);
fetch(request, {
method: 'POST',
mode: 'same-origin' // Do not send CSRF token to another domain.
}).then(function(response) {
// ...
});
If you're using AngularJS 1.1.3 and newer, it's sufficient to configure the
``$http`` provider with the cookie and header names:
.. code-block:: javascript
$httpProvider.defaults.xsrfCookieName = 'csrftoken';
$httpProvider.defaults.xsrfHeaderName = 'X-CSRFToken';
.. _fetch(): https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/fetch
Using CSRF in Jinja2 templates
------------------------------