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.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

View File

@ -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);
}
}
});

View File

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

View File

@ -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 %}

View File

@ -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>