Separate CSRF data from executed javascript code to support CSP

By moving dynamic data into a safe non-executed block and keeping
scripts static, developers can add sha256 hash to CSP exceptions.

Author: lukaw3d

rest_framework/templates/rest_framework/admin.html

@@ -244,11 +244,14 @@ <h4 class="modal-title" id="myModalLabel">{{ error_title }}</h4>
       {% endif %}
 
       {% block script %}
+        <script type="application/json" id="drf_csrf">{{
+          {
+            "csrfHeaderName": csrf_header_name|default:'X-CSRFToken',
+            "csrfToken": csrfToken
+          } | tojson
+        }}</script>
         <script>
-          window.drf = {
-            csrfHeaderName: "{{ csrf_header_name|default:'X-CSRFToken' }}",
-            csrfToken: "{{ csrf_token }}"
-          };
+          window.drf = JSON.parse(document.getElementById('drf_csrf').innerHTML);
         </script>
         <script src="{% static "rest_framework/js/jquery-3.4.1.min.js" %}"></script>
         <script src="{% static "rest_framework/js/ajax-form.js" %}"></script>

rest_framework/templates/rest_framework/base.html

@@ -287,11 +287,14 @@ <h1>{{ name }}</h1>
     {% endif %}
 
     {% block script %}
+      <script type="application/json" id="drf_csrf">{{
+        {
+          "csrfHeaderName": csrf_header_name|default:'X-CSRFToken',
+          "csrfToken": csrfToken if request else None
+        } | tojson
+      }}</script>
       <script>
-        window.drf = {
-          csrfHeaderName: "{{ csrf_header_name|default:'X-CSRFToken' }}",
-          csrfToken: "{% if request %}{{ csrf_token }}{% endif %}"
-        };
+        window.drf = JSON.parse(document.getElementById('drf_csrf').innerHTML);
       </script>
       <script src="{% static "rest_framework/js/jquery-3.4.1.min.js" %}"></script>
       <script src="{% static "rest_framework/js/ajax-form.js" %}"></script>

tests/test_templates.py

@@ -6,12 +6,12 @@
 def test_base_template_with_context():
     context = {'request': True, 'csrf_token': 'TOKEN'}
     result = render({}, 'rest_framework/base.html', context=context)
-    assert re.search(r'\bcsrfToken: "TOKEN"', result.content.decode())
+    assert re.search(r'\b"csrfToken": "TOKEN"', result.content.decode())
 
 
 def test_base_template_with_no_context():
     # base.html should be renderable with no context,
     # so it can be easily extended.
     result = render({}, 'rest_framework/base.html')
     # note that this response will not include a valid CSRF token
-    assert re.search(r'\bcsrfToken: ""', result.content.decode())
+    assert re.search(r'\b"csrfToken": ""', result.content.decode())