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,10 +244,12 @@ <h4 class="modal-title" id="myModalLabel">{{ error_title }}</h4>
       {% endif %}
 
       {% block script %}
+        <script type="text/plain" id="drf_csrf_header_name">{{ csrf_header_name|default:'X-CSRFToken' }}</script>
+        <script type="text/plain" id="drf_csrf_token">{{ csrf_token }}</script>
         <script>
           window.drf = {
-            csrfHeaderName: "{{ csrf_header_name|default:'X-CSRFToken' }}",
-            csrfToken: "{{ csrf_token }}"
+            csrfHeaderName: document.getElementById('drf_csrf_header_name').textContent,
+            csrfToken: document.getElementById('drf_csrf_token').textContent
           };
         </script>
         <script src="{% static "rest_framework/js/jquery-3.4.1.min.js" %}"></script>

rest_framework/templates/rest_framework/base.html

@@ -287,10 +287,13 @@ <h1>{{ name }}</h1>
     {% endif %}
 
     {% block script %}
+
+      <script type="text/plain" id="drf_csrf_header_name">{{ csrf_header_name|default:'X-CSRFToken' }}</script>
+      <script type="text/plain" id="drf_csrf_token">{% if request %}{{ csrf_token }}{% endif %}</script>
       <script>
         window.drf = {
-          csrfHeaderName: "{{ csrf_header_name|default:'X-CSRFToken' }}",
-          csrfToken: "{% if request %}{{ csrf_token }}{% endif %}"
+          csrfHeaderName: document.getElementById('drf_csrf_header_name').textContent,
+          csrfToken: document.getElementById('drf_csrf_token').textContent
         };
       </script>
       <script src="{% static "rest_framework/js/jquery-3.4.1.min.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'\bid="drf_csrf_token">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'\bid="drf_csrf_token"><', result.content.decode())