Django-CSP-带有JS的AJAX请求被CSP阻止

问题描述

我有一个基于Django的D＆D-wiki网页，我在业余时间从事该网页，以用于了解有关Web开发的更多信息。我最近使用django-csp.实施了Content-Security-Policy，因为我只有20个左右的模板要处理，所以效果很好，切换也很轻松。这是我的CSP设置：

//Django settings.py
CSP_DEFAULT_SRC = ("'none'",)
CSP_STYLE_SRC = ("'self'",'stackpath.bootstrapcdn.com','fonts.googleapis.com',"'unsafe-inline'",'cdn.jsdelivr.net','cdnjs.cloudflare.com','rawcdn.githack.com','maxcdn.bootstrapcdn.com',)
CSP_SCRIPT_SRC = ("'self'",'localhost',"default-src",'code.jquery.com',)
CSP_IMG_SRC = ("'self'",'ipw3.org','data:','i.imgur.com',)
CSP_FONT_SRC = ("'self'",'fonts.gstatic.com',)
CSP_MEDIA_SRC = ("'self'",)
CSP_INCLUDE_NONCE_IN = ('style-src',)

最近，甚至开始学习有关AJAX请求的信息，并希望实现一个简单的POST请求。遗憾的是，我的CSP阻止了该请求，鉴于我在CSP_SCRIPT_SRC中允许了self和localhost，因此我认为应该允许该请求：

//JS Event Listener that creates and sends the AJAX request
    document.getElementById('create-timstamp').addEventListener('click',function(event){ 
        const isValid = validateForm();
        if (isValid){
            xhr = new XMLHttpRequest();
            xhr.open('POST',getCreateTimestampURL(),true);            
            xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded; charset=UTF-8');
            const csrf = document.querySelector('input[name="csrfmiddlewaretoken"]').value;
            xhr.setRequestHeader("X-CSRF-TOKEN",csrf);

            xhr.onload = function(){
                document.querySelector('.timestamp-create-box').remove();
            }

            const timestampForm = document.forms['timestamp-form'];
            const timestamp_seconds = toTimeInt(timestampForm['time'].value);
            const timestamp_name = timestampForm['name'].value;
            const data = `name=${timestamp_name}&time=${timestamp_seconds}`;

            xhr.send(data);
            
            return false;
        }


//For completion's sake here also the helper methods used by the event listener
function getCreateTimestampURL(){
    return document.querySelector('#add-timestamp').dataset.timestampcreateurl;
}

function toTimeInt(timestampString){
    const hours = parseInt(timestampString.substring(0,2));
    const minutes = parseInt(timestampString.substring(3,5));
    const seconds = parseInt(timestampString.substring(6,8));
    return 3600*hours + 60*minutes + seconds;
}

这是浏览器的响应：

//Webbrowser console output after triggering the event
Content Security Policy: The page’s settings blocked the loading of a resource at http://localhost:8002/files/timestamp/1/17/new (“default-src”).

所以我知道我做错了什么，但是我不确定是什么。我知道我需要以某种方式调整CSP设置，但是我已经允许localhost-scripts，还需要什么？

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

content-security-policy django javascript post