发现问题
在知乎点击修改头像,上传图片时发现一片空白。凭着程序员的直觉,第一反应时看下控制台是否有报错。果然发现如下:
Refused to load the image 'data:image/jpeg;base64...' because it violates the following Content Security Policy directive: "default-src *". Note that 'img-src' was not explicitly set, so 'default-src' is used as a fallback.
第一次发现此类报错,果断google之。发现为抵御XSS攻击,配置了响应参数CSP(Content Security Policy)引起的。
HTML页面的响应参数如下:
Content-Security-Policy:default-src *; frame-src *.zhihu.com getpocket.com note.youdao.com; script-src *.zhihu.com *.google-analytics.com zhstatic.zhihu.com 'unsafe-eval'; style-src *.zhihu.com 'unsafe-inline'
错误提示的大概意思是由于没有配置img-src,所以默认采用default-src的配置。
但是default-src配置为*,所以理论上应该是不会报错的。查看了 https://developer.mozilla.org/en-US/docs/Web/Security/CSP/CSP_policy_directives#default-src文档如下
误打误撞解决问题
所以我只能先认定只配置*是存在问题的,突然想着本地代理映射文件然后修改响应参数去验证,于是保存HTMl文件,并用charles映射到本地。
神奇的事情突然发生了,竟然能上传成功。
突然为程序员的自己感到自豪。
后记
虽然解决了上传问题,但是还有好多疑问。
- 对default-src配置*是否有效还需要进一步确认。
- 通过代理本地文件就能绕后CSP,是否存在安全问题。
- 有没有代理可以修改响应参数的。