Make browsable API compatbile with strong CSP

This commit is contained in:
Alexander Bliskovsky 2018-01-10 10:40:40 -07:00
parent ffe3dbb1b1
commit 74645d55cb
5 changed files with 18 additions and 24 deletions

View File

@ -677,6 +677,11 @@ class BrowsableAPIRenderer(BaseRenderer):
csrf_header_name = csrf_header_name[5:] csrf_header_name = csrf_header_name[5:]
csrf_header_name = csrf_header_name.replace('_', '-') 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 = { context = {
'content': self.get_content(renderer, data, accepted_media_type, renderer_context), 'content': self.get_content(renderer, data, accepted_media_type, renderer_context),
'code_style': pygments_css(self.code_style), 'code_style': pygments_css(self.code_style),
@ -708,8 +713,7 @@ class BrowsableAPIRenderer(BaseRenderer):
'display_edit_forms': bool(response.status_code != 403), 'display_edit_forms': bool(response.status_code != 403),
'api_settings': api_settings, 'api_settings': api_settings,
'csrf_cookie_name': csrf_cookie_name, 'csrf_custom_params': custom_csrf_params,
'csrf_header_name': csrf_header_name
} }
return context return context

View File

@ -38,7 +38,8 @@ function sameOrigin(url) {
!(/^(\/\/|http:|https:).*/.test(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({ $.ajaxSetup({
beforeSend: function(xhr, settings) { beforeSend: function(xhr, settings) {
@ -46,7 +47,7 @@ $.ajaxSetup({
// Send the token to same-origin, relative URLs only. // Send the token to same-origin, relative URLs only.
// Send the token only if the method warrants CSRF protection // Send the token only if the method warrants CSRF protection
// Using the CSRFToken value acquired earlier // Using the CSRFToken value acquired earlier
xhr.setRequestHeader(window.drf.csrfHeaderName, csrftoken); xhr.setRequestHeader(csrfParams.csrf_header_name, csrftoken);
} }
} }
}); });

View File

@ -0,0 +1,3 @@
$(document).ready(function() {
$('form').ajaxForm();
});

View File

@ -230,11 +230,8 @@
{% endif %} {% endif %}
{% block script %} {% block script %}
<script> <script id="csrf-data" type="application/json">
window.drf = { {{ csrf_custom_params }}
csrfHeaderName: "{{ csrf_header_name|default:'X-CSRFToken' }}",
csrfCookieName: "{{ csrf_cookie_name|default:'csrftoken' }}"
};
</script> </script>
<script src="{% static "rest_framework/js/jquery-1.12.4.min.js" %}"></script> <script src="{% static "rest_framework/js/jquery-1.12.4.min.js" %}"></script>
<script src="{% static "rest_framework/js/ajax-form.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/bootstrap.min.js" %}"></script>
<script src="{% static "rest_framework/js/prettify-min.js" %}"></script> <script src="{% static "rest_framework/js/prettify-min.js" %}"></script>
<script src="{% static "rest_framework/js/default.js" %}"></script> <script src="{% static "rest_framework/js/default.js" %}"></script>
<script> <script src="{% static "rest_framework/js/load-ajax-form.js" %}"></script>
$(document).ready(function() {
$('form').ajaxForm();
});
</script>
{% endblock %} {% endblock %}
</body> </body>
{% endblock %} {% endblock %}

View File

@ -269,11 +269,8 @@
{% endif %} {% endif %}
{% block script %} {% block script %}
<script> <script id="csrf-data" type="application/json">
window.drf = { {{ csrf_custom_params }}
csrfHeaderName: "{{ csrf_header_name|default:'X-CSRFToken' }}",
csrfCookieName: "{{ csrf_cookie_name|default:'csrftoken' }}"
};
</script> </script>
<script src="{% static "rest_framework/js/jquery-1.12.4.min.js" %}"></script> <script src="{% static "rest_framework/js/jquery-1.12.4.min.js" %}"></script>
<script src="{% static "rest_framework/js/ajax-form.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/bootstrap.min.js" %}"></script>
<script src="{% static "rest_framework/js/prettify-min.js" %}"></script> <script src="{% static "rest_framework/js/prettify-min.js" %}"></script>
<script src="{% static "rest_framework/js/default.js" %}"></script> <script src="{% static "rest_framework/js/default.js" %}"></script>
<script> <script src="{% static "rest_framework/js/load-ajax-form.js" %}"></script>
$(document).ready(function() {
$('form').ajaxForm();
});
</script>
{% endblock %} {% endblock %}
</body> </body>