添加Django CSP后Django-Smart-Selects失效的解决咨询

以下是针对CSP配置引发联动功能失效的具体修复方案：

1. 调整CSP的script-src规则 #

Django-Smart-Selects依赖内联JavaScript触发AJAX联动，同时需要加载自身静态JS文件，需在CSP配置中放开相关权限：

• 生产环境推荐：使用nonce
  在Settings.py的CSP配置中，为script-src添加'nonce-{{ request.csp_nonce }}'和'self'：

  CSP_DEFAULT_SRC = ("'self'",)
  CSP_SCRIPT_SRC = ("'self'", "'nonce-{{ request.csp_nonce }}'")
  

  同时确保模板加载django-smart-selects的JS时带上nonce属性：

  <script nonce="{{ request.csp_nonce }}" src="{% static 'smart-selects/js/chained.js' %}"></script>
  

• 开发环境临时方案：允许unsafe-inline（不建议生产环境使用）

  CSP_SCRIPT_SRC = ("'self'", "'unsafe-inline'")
  

2. 允许AJAX请求的连接源 #

联动功能需要通过AJAX请求后端接口获取筛选后的Plant数据，需在CSP的connect-src中允许当前域名：

CSP_CONNECT_SRC = ("'self'",)

3. 验证静态资源加载权限 #

确保CSP的style-src等规则不会影响django-smart-selects的样式加载，必要时添加'self'：

CSP_STYLE_SRC = ("'self'",)

4. 调试排查 #

• 打开浏览器开发者工具（F12），在Console标签查看CSP相关报错，根据提示调整对应规则。
• 切换到Network标签，确认AJAX请求是否被拦截，若拦截则针对性调整connect-src或script-src配置。

内容的提问来源于stack exchange，提问作者GM02