Uncaught EvalError:Refused to evaluate a string as JavaScript解決
問題發(fā)生
環(huán)境:操作系統(tǒng)win10,瀏覽器Google Chrome 版本 103.0.5060.134(正式版本) (64 位)
我想要通過調(diào)用Function構(gòu)造函數(shù),來創(chuàng)建一個(gè)完成加法功能的函數(shù),代碼如下:
var sum = new Function('a', 'b', 'return a + b');
在瀏覽器控制臺運(yùn)行,結(jié)果報(bào)錯(cuò)
大概意思是說:拒絕將字符串評估(解析)為JavaScript代碼,因?yàn)樵谝韵聝?nèi)容安全策略指令中,'unsafe-eval’不是一個(gè)允許的腳本源:
通過Function構(gòu)造 函數(shù),創(chuàng)建一個(gè)功能函數(shù),代碼如下:
function defineGetter(prop, data) { return Object.defineProperty(this, prop, { get: new Function(`return ${JSON.stringify(data)};`) }); }
報(bào)如下錯(cuò)誤:
tools.ts:239 Uncaught 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'".
問題分析
1. 內(nèi)容安全策略
(Content Security Policy,CSP) 是一個(gè)額外的安全層,用于檢測并削弱某些特定類型的攻擊。
CSP 的主要目標(biāo)是減少跨站腳本(Cross-Site Scripting XSS) 的攻擊 。XSS 攻擊利用了瀏覽器對于從服務(wù)器所獲取的內(nèi)容的信任。即使有的時(shí)候這些腳本并非來自于它本該來的地方,由于瀏覽器信任其內(nèi)容來源,使得惡意腳本在受害者的瀏覽器中得以運(yùn)行。
2. 配置內(nèi)容安全策略
一個(gè)策略由一系列策略指令所組成,每個(gè)策略指令都描述了一個(gè)特定資源類型以及生效范圍(信任的來源)
<meta> 元素可以用來配置該策略(Http響應(yīng)頭也可以配置)
<meta http-equiv="Content-Security-Policy" content="default-src 'self'; img-src https://*; child-src 'none';">
content屬性的內(nèi)容格式:多個(gè)資源類型用英文分號分隔,類型和來源、多個(gè)來源之間用空格分隔,來源加英文單引號,如下所示
資源類型A ‘來源1’ ‘來源2’ … ; 資源類型A ‘來源1’ ’來源2’…
3.內(nèi)容安全策略指令
default-src,當(dāng)沒有顯示的為資源配置生效范圍,默認(rèn)使用default-src的值作為生效范圍。
例如,沒有配置script-src,其默認(rèn)值就是self
script-src,表示資源類型為腳本文件(以下取值表示不同的來源)
- self 表示允許腳本來源于當(dāng)前網(wǎng)站(當(dāng)前域名,例如:https://www.xxxx.com/,腳本文件路徑的前綴和所在的html文件一致)
- unsafe-inline 表示允許腳本來源于<script></script> 標(biāo)簽對
- unsafe-eval 表示允許腳本來源于字符串
還有樣式等各種各樣的資源,在文章不是重點(diǎn),感興趣可以通過“資源類型”查看
The ‘unsafe-eval’ source expression controls several script execution methods that create code from strings. If ‘unsafe-eval’ isn’t specified with the script-src directive, the following methods are blocked and won’t have any effect:【 'unsafe-eval’控制幾個(gè)從字符串創(chuàng)建腳本代碼的方法。如果’unsafe-eval’沒有在script-src指令中指定,以下方法將被阻塞,并且不會產(chǎn)生任何影響:】
eval()
Function()
When passing a string literal like to methods like: window.setTimeout(“alert(“Hello World!”);”, 500);
setTimeout()
setInterval()
window.setImmediate
window.execScript() Non-Standard (IE < 11 only)
解決方法
簡單來說,eval()、Function()等函數(shù)會從字符串中“解析”腳本代碼,必須在內(nèi)容安全策略中添加信任字符串來源的腳本的策略指令,該來源的腳本才可以正常運(yùn)行。
<head> <meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self' 'unsafe-eval';"> </head>
如果是在開發(fā)谷歌插件可以配置manifest.json里的content_security_policy屬性,添加策略的規(guī)則相同。
如果是在使用eval()函數(shù),或者Function()函數(shù),大概率你是隨意打開了一個(gè)網(wǎng)頁,F(xiàn)12進(jìn)入了控制臺。但是,別人的網(wǎng)站為了安全,不允許字符串來源的腳本。我嘗試修改別人的網(wǎng)頁,在head元素中添加meta元素,配置內(nèi)容安全策略,無效。這也是可以理解的,如果可以通過在別人的網(wǎng)頁中添加meta元素,配置策略,那就可以隨意攻擊別人的網(wǎng)站了。自己創(chuàng)建一個(gè)html網(wǎng)頁,練習(xí)eval()函數(shù)、Function() 函數(shù)的使用。
另外,也許報(bào)錯(cuò)是"because ‘unsafe-inline’ is not an allowed source",那么只需要把unsafe-inline添加到策略指令script-src中即可
以上就是Uncaught EvalError:Refused to evaluate a string as JavaScript解決的詳細(xì)內(nèi)容,更多關(guān)于Uncaught EvalError解決的資料請關(guān)注腳本之家其它相關(guān)文章!
- JS函數(shù)報(bào)錯(cuò)Uncaught ReferenceError: XX is not defined問題及解決
- JS報(bào)錯(cuò)Uncaught?TypeError:?XXX?is?not?a?function的解決方法
- js控制臺報(bào)錯(cuò)Uncaught TypeError: Cannot read properties of undefined (reading ‘a(chǎn)ppendChild‘)的解決
- javascript函數(shù)報(bào)Uncaught?ReferenceError:?XXX?is?not?defined
- JS提示:Uncaught SyntaxError: Unexpected token ILLEGAL錯(cuò)誤的解決方法
- JS提示:Uncaught SyntaxError:Unexpected token ) 錯(cuò)誤的解決方法
- JavaScript錯(cuò)誤處理之分析 Uncaught(in promise) error的原因及解決方案
相關(guān)文章
JS前端使用canvas實(shí)現(xiàn)物體的點(diǎn)選示例
這篇文章主要為大家介紹了JS前端使用canvas實(shí)現(xiàn)物體的點(diǎn)選示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-08-08本地存儲localStorage設(shè)置過期時(shí)間示例詳解
這篇文章主要為大家介紹了本地存儲localStorage設(shè)置過期時(shí)間示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-01-01微信小程序 開發(fā)之快遞查詢功能的實(shí)現(xiàn)
這篇文章主要介紹了微信小程序 開發(fā)之快遞查詢功能的實(shí)現(xiàn)的相關(guān)資料,這里實(shí)現(xiàn)微信小程序查詢快遞的功能,需要的朋友可以參考下2017-01-01JS前端模擬Excel條件格式實(shí)現(xiàn)數(shù)據(jù)條效果
這篇文章主要為大家介紹了JS前端模擬Excel條件格式實(shí)現(xiàn)數(shù)據(jù)條效果,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-02-02JavaScript策略模式利用對象鍵值的映射關(guān)系詳解
這篇文章主要為大家介紹了JavaScript策略模式利用對象鍵值的映射關(guān)系詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-12-12Wireshark基本介紹和學(xué)習(xí)TCP三次握手
本文主要介紹Wireshark基本介紹和學(xué)習(xí)TCP三次握手,這里詳細(xì)整理了相關(guān)資料,并給出詳細(xì)流程,有需要的小伙伴可以參考下2016-08-08