Django开发中配置CSS本地background-image遇integrity校验报错的解决咨询

这个拦截和你在CSS里设置本地图片背景没有直接关系，根源是静态资源的子资源完整性（SRI）校验不通过：浏览器检测到base.css的资源标签上写的integrity哈希值，和服务器实际返回的文件真实哈希值对不上，触发安全拦截，连CSS文件本身都加载失败，里面写的background-image规则自然不会生效。
控制台已经直接给出了当前base.css对应的正确SHA-256校验值：sha256-VamhLHC0Rd5RsK5ayIQbhNx167AvkjG9xrdEDZaSFoc=

1. 快速修复 #

打开项目模板里加载base.css的代码，正常带SRI校验的link标签写法是这样的：

<link rel="stylesheet" href="{% static 'css/base.css' %}" integrity="之前存的旧校验值" crossorigin="anonymous">

直接把integrity属性后面的旧值，换成控制台给的正确值就行：

<link rel="stylesheet" href="{% static 'css/base.css' %}" integrity="sha256-VamhLHC0Rd5RsK5ayIQbhNx167AvkjG9xrdEDZaSFoc=" crossorigin="anonymous">

改完刷新页面，CSS就能正常加载，你写的背景图也会显示出来。

2. 匹配Django工作流的根源处理 #

这种校验不匹配的情况，在Django项目里通常来自两类常见场景，对应处理就不会反复出问题：

• 如果是你手动在模板里写的integrity值：基本都是你修改了base.css的内容（比如这次新增了背景图的样式），但没同步更新对应的校验值，按上面的方法替换成当前文件的正确哈希就行。
• 如果你用了带自动SRI功能的Django第三方插件（比如django-sri、配置了SRI规则的静态存储插件）：
  • 删掉项目根目录下插件生成的哈希缓存文件（一般是.sri.json这类存所有静态文件校验值的映射文件）
  • 执行静态文件重置收集命令：python manage.py collectstatic --clear
  • 重启Django开发服务，插件会自动给修改过的静态文件重新生成匹配当前内容的校验值。

3. 本地开发的简化方案 #

如果只是在本地调试项目，没有上线的安全校验需求，直接把link标签上的integrity、crossorigin两个属性删掉就好。本地环境下这两个属性没什么实际安全作用，移除后浏览器不会对静态资源做哈希校验，从根源上不会再触发这类拦截。

等CSS能正常加载之后，记得检查CSS里写的本地图片路径是不是符合Django静态文件的目录规则——如果图片存在static目录下，要保证路径相对于CSS文件的位置正确，避免出现“CSS加载成功但背景图404”的问题。

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