【tips】unsafe-eval线上页面突然空白
EvalError: Refused to evaluate a string as JavaScript because ‘unsafe-eval’ is not an allowed source of script in the following Content Security Policy directive: “script-src ‘self’ ‘unsafe-inline’”.
导致页面无法展示。
CSP (Content Security Policy) 错误
违反了内容安全策略中的 unsafe-eval 限制。
原因是最近后端在做安全方面的修改。看了下接口返回的Content Security Policy:
default-src ‘self’; script-src ‘self’ ‘unsafe-inline’; style-src ‘self’ ‘unsafe-inline’; img-src ‘self’ data: https://xxxxxxx(我的域名); font-src ‘self’; object-src ‘none’; frame-ancestors ‘self’; form-action ‘self’; base-uri ‘self’; upgrade-insecure-requests;
nginx配置修改后Content Security Policy的
script-src ‘self’ ‘unsafe-inline’ ‘unsafe-eval’
恢复正常
还有一个未经验证的方法,因为我的代码里面有一段Echarts的代码
areaStyle: {color: new Function('return ' + `{type: 'linear',x: 0,y: 0,x2: 0,y2: 1,colorStops: [{offset: 0,color: 'rgba(23,119,255,0.3)' // 渐变起始颜色}, {offset: 1,color: 'rgba(23,119,255,0.05)' // 渐变结束颜色}]}`)()},
这里用了new Function 违反了一开始报错的csp,nginx配置不改的话,可以试下修改js