因为在使用以下方法前更新了一下 ASF,导致 main.xxxxxx.bundle.js 名称更改,一段时间内又能正常显示了,所以以下方法只是理论上可行(对症下药罢了)
环境
- Debian 11
- Nginx 反代 ASF
- Cloudflare CDN
症状
ASF 更新后,隔一段时间就会出现 IPC 的 Web 页面无征兆地变得空白,无法访问任何页面,但 ASF 后台还在正常运行
ASF 根目录的 www 目录下文件无短缺,并且浏览器能够查看页面源代码
打开浏览器 Console 查看错误信息,显示
Failed to find a valid digest in the 'integrity' attribute for resource 'https://xxxx.xxx/scripts/main.xxxxxxx.bundle.js' with computed SHA-256 integrity xxxxxx''. The resource has been blocked.
做出了以下尝试:
- 重启 ASF,无果
- 重启时 ASF 显示 IPC 已就绪
- 更改 ASF 配置文件,重启 ASF,无果
- Cloudflare 清除了所有 ASF 域名下的缓存,无果
- 回退 ASF 版本,有效,但是隔段时间后依然会显示空白页面
原因
不太了解 Vue 和 Cloudflare 具体的优化机制,以下为不负责任的推断,不正确之处请指正
ASF-ui 会在 script 标签添加 integrity 和 crossorigin 属性(在添加 js 脚本时会对 main.xxxxxxx.bundle.js 做校验)
浏览器会进行 SRI(子资源完整性)检查,在执行 main.xxxxxxx.bundle.js 前会对脚本做 Hash 校验,拿校验结果与 integrity 属性的值作比较,如果验证失败就不运行这个脚本
不运行 main.xxxxxxx.bundle.js,ASF Web 界面就无法正常渲染
可能是因为接入 Cloudflare CDN 后开启了 CSS/JS Minify,对 main.xxxxxxx.bundle.js 进行了压缩/缓存,导致 Hash 变更
更新 ASF 版本后由于 main.xxxxxxx.bundle.js 名称变更,Cloudflare 还未对其进行压缩优化,所以可以正常加载
解决方法
方法一 - 不更改 Cloudflare 设置
因 Cloudflare 下还托管了其他网站,无法全局关闭 JS Minify,只好更改一下 ASF-ui 的代码(虽然不建议直接更改程序代码)可以将 ASF 单独排除,见方法二
进入 ASF 根目录下的 www 目录,编辑 index.html
删除第一行中 script 标签的 integrity 和 crossorigin 属性,如下图
之后重启 ASF
方法二 - 添加 Cloudflare 页面规则
从 Cloudflare Dashboard 进入 规则 - 创建页面规则,将 ASF 域名从 Auto Minify 和缓存中排除,见下图