From 74645d55cb768fb4c3a57ec2fb80bd13f88e3183 Mon Sep 17 00:00:00 2001
From: Alexander Bliskovsky <abliskovsky@fusionbox.com>
Date: Wed, 10 Jan 2018 10:40:40 -0700
Subject: [PATCH] Make browsable API compatbile with strong CSP

---
 rest_framework/renderers.py                         |  8 ++++++--
 rest_framework/static/rest_framework/js/csrf.js     |  5 +++--
 .../static/rest_framework/js/load-ajax-form.js      |  3 +++
 rest_framework/templates/rest_framework/admin.html  | 13 +++----------
 rest_framework/templates/rest_framework/base.html   | 13 +++----------
 5 files changed, 18 insertions(+), 24 deletions(-)
 create mode 100644 rest_framework/static/rest_framework/js/load-ajax-form.js

diff --git a/rest_framework/renderers.py b/rest_framework/renderers.py
index a2db9f228..c38120de7 100644
--- a/rest_framework/renderers.py
+++ b/rest_framework/renderers.py
@@ -677,6 +677,11 @@ class BrowsableAPIRenderer(BaseRenderer):
             csrf_header_name = csrf_header_name[5:]
         csrf_header_name = csrf_header_name.replace('_', '-')
 
+        custom_csrf_params = json.dumps({
+            'csrf_cookie_name': csrf_cookie_name,
+            'csrf_header_name': csrf_header_name,
+        })
+
         context = {
             'content': self.get_content(renderer, data, accepted_media_type, renderer_context),
             'code_style': pygments_css(self.code_style),
@@ -708,8 +713,7 @@ class BrowsableAPIRenderer(BaseRenderer):
             'display_edit_forms': bool(response.status_code != 403),
 
             'api_settings': api_settings,
-            'csrf_cookie_name': csrf_cookie_name,
-            'csrf_header_name': csrf_header_name
+            'csrf_custom_params': custom_csrf_params,
         }
         return context
 
diff --git a/rest_framework/static/rest_framework/js/csrf.js b/rest_framework/static/rest_framework/js/csrf.js
index 97c8d0124..951ddfe72 100644
--- a/rest_framework/static/rest_framework/js/csrf.js
+++ b/rest_framework/static/rest_framework/js/csrf.js
@@ -38,7 +38,8 @@ function sameOrigin(url) {
     !(/^(\/\/|http:|https:).*/.test(url));
 }
 
-var csrftoken = getCookie(window.drf.csrfCookieName);
+var csrfParams = JSON.parse(document.getElementById('csrf-data').innerHTML);
+var csrftoken = getCookie(csrfParams.csrf_cookie_name);
 
 $.ajaxSetup({
   beforeSend: function(xhr, settings) {
@@ -46,7 +47,7 @@ $.ajaxSetup({
       // Send the token to same-origin, relative URLs only.
       // Send the token only if the method warrants CSRF protection
       // Using the CSRFToken value acquired earlier
-      xhr.setRequestHeader(window.drf.csrfHeaderName, csrftoken);
+      xhr.setRequestHeader(csrfParams.csrf_header_name, csrftoken);
     }
   }
 });
diff --git a/rest_framework/static/rest_framework/js/load-ajax-form.js b/rest_framework/static/rest_framework/js/load-ajax-form.js
new file mode 100644
index 000000000..09daf0888
--- /dev/null
+++ b/rest_framework/static/rest_framework/js/load-ajax-form.js
@@ -0,0 +1,3 @@
+$(document).ready(function() {
+  $('form').ajaxForm();
+});
diff --git a/rest_framework/templates/rest_framework/admin.html b/rest_framework/templates/rest_framework/admin.html
index de011cd09..90b0d0442 100644
--- a/rest_framework/templates/rest_framework/admin.html
+++ b/rest_framework/templates/rest_framework/admin.html
@@ -230,11 +230,8 @@
       {% endif %}
 
       {% block script %}
-        <script>
-          window.drf = {
-            csrfHeaderName: "{{ csrf_header_name|default:'X-CSRFToken' }}",
-            csrfCookieName: "{{ csrf_cookie_name|default:'csrftoken' }}"
-          };
+        <script id="csrf-data" type="application/json">
+          {{ csrf_custom_params }}
         </script>
         <script src="{% static "rest_framework/js/jquery-1.12.4.min.js" %}"></script>
         <script src="{% static "rest_framework/js/ajax-form.js" %}"></script>
@@ -242,11 +239,7 @@
         <script src="{% static "rest_framework/js/bootstrap.min.js" %}"></script>
         <script src="{% static "rest_framework/js/prettify-min.js" %}"></script>
         <script src="{% static "rest_framework/js/default.js" %}"></script>
-        <script>
-          $(document).ready(function() {
-            $('form').ajaxForm();
-          });
-        </script>
+        <script src="{% static "rest_framework/js/load-ajax-form.js" %}"></script>
       {% endblock %}
     </body>
   {% endblock %}
diff --git a/rest_framework/templates/rest_framework/base.html b/rest_framework/templates/rest_framework/base.html
index 14007aa52..5c4f97b8d 100644
--- a/rest_framework/templates/rest_framework/base.html
+++ b/rest_framework/templates/rest_framework/base.html
@@ -269,11 +269,8 @@
     {% endif %}
 
     {% block script %}
-      <script>
-        window.drf = {
-          csrfHeaderName: "{{ csrf_header_name|default:'X-CSRFToken' }}",
-          csrfCookieName: "{{ csrf_cookie_name|default:'csrftoken' }}"
-        };
+      <script id="csrf-data" type="application/json">
+        {{ csrf_custom_params }}
       </script>
       <script src="{% static "rest_framework/js/jquery-1.12.4.min.js" %}"></script>
       <script src="{% static "rest_framework/js/ajax-form.js" %}"></script>
@@ -281,11 +278,7 @@
       <script src="{% static "rest_framework/js/bootstrap.min.js" %}"></script>
       <script src="{% static "rest_framework/js/prettify-min.js" %}"></script>
       <script src="{% static "rest_framework/js/default.js" %}"></script>
-      <script>
-        $(document).ready(function() {
-          $('form').ajaxForm();
-        });
-      </script>
+      <script src="{% static "rest_framework/js/load-ajax-form.js" %}"></script>
     {% endblock %}
 
   </body>