前言最近用 Google Sheets 提供的 App Script 幫朋友寫了個小爬蟲，來自動化搬運跟整理網頁上資訊，發現 HTML Source 裡 的資訊無法直接被讀取，在問 ChatGPT 時，它突然給了我一個有用到 eval 的實作，之前只知道不要用它，這次決定來認真理解一下 什麼時候可能用到 ， 為什麼不要用 ，以及 有什麼替代方案 。
這篇文章會簡單介紹 eval 後，並帶上一個使用情境跟一個面試考題。
eval 基本介紹eval(script); 是一個 JavaScript 內建函數。
它可以將傳入的 script String 視為 JavaScript 表達式（Expression）或語句（Statement）來執行。
使用情境：「你信任你要執行的 script 以及 想把 String 當 JS Code 來執行」
Return value若參數為 String，則會回應 JS 實際執行的結果，如果該 String 不是可執行的 JS Code，則回傳 Error: {script} is not defined
若參數不是 String，則直接回傳參數。
console.log(eval('2 + 2'));
// Expected output: 4
console.log(eval(new String('2 + 2')));
// Expected output: 2 + 2
console.log(eval('2 + 2') === eval('4'));
// Expected output: true
console.log(eval('2 + 2') === eval(new String('2 + 2')));
// Expected output: false
console.log(eval(123));
// Expected output: 123
Never use eval()!可以直接把字串拿來當 JS 執行聽起來就很不妙，可以看到 MDN 在 Never use eval()! 中指出了使用 eval 可能有的四個原因：
1. Security Risks只要攻擊者能有辦法置換傳入的 script 參數就能透過它執行惡意程式（取得你本地的資料、透過你發請求等等）。
2. Performance Impact它會直接呼叫 JS 直譯器，所以無法使用現代 JS engines 在讀取 JS 時做的各種優化。
3. Variable Name Lookups雖然 JS 是直譯語言，但任何語言要讓機器（ex: 電腦）來執行時，依然還是要轉成機器語言（machine code），電腦才能讀得懂並執行。
但因為 eval 可能會宣告變數(Variable) ，所以如果在瀏覽器上執行的話，瀏覽器會需要去檢視 JS 直譯器轉譯 JavaScript 得出的機器語言（machine code）中的變數名稱有沒有存在、重疊或改變。
這個過程非常耗效能。
4. Minification IssuesMinifiers 是一個可以縮小 JS Code 的工具。 當我們在寫程式時會為了可讀性放很多空格、標點符號或是好讀的變數名稱，但電腦要執行的話，這些都是不需要的，透過 Minifiers 就能讓 JS Code 極簡化，節省空間。
因為 eval 一定是在 runtime 讀到才能執行， Minifiers 這種工具通常是在 build time 打包程式碼時進行處理。
所以如果 eval(script) 的 script 很大一包就會浪費很多空間，無法進行優化。
使用情境1. App Script 爬蟲時讀取 的內容只要填入「 YouTuber 網址」，再去 App Script 上按執行就可以自動填入 YouTuber 的「頻道名稱」和「訂閱人數」。
雖然 App scripts 不能模擬出瀏覽器，但可以讀取 HTML source，而就算 JS 再怎麼 uglify，要顯示的 String 一定還會是原狀，所以只需要找一下想要的資料在整包 HTML 裡面位於哪個地方就好。
在 YouTuber 的 about 頁面點右鍵再選取「View Page Source」，可以找到「頻道名稱」和「訂閱人數」是在以下這段 script 裡面的 ytInitialData：
在 App Script 中，可以用 UrlFetchApp.fetch 去 GET 一個 url，並用 getContentText 取得該頁面所有的 HTML Code。
再根據先前對於 HTML 結構的觀察，我們可以再透過正則表達式取得我們想要的程式碼段落。
let response = UrlFetchApp.fetch(youtubeUrl);
let pageSource = response.getContentText();
let jsCodeMatch = pageSource.match(/var ytInitialData = (\{[^]+?\});/);
接下來是不是只要再寫一次正則來 match 就可以取得我們要的資料了呢？
let titleMatch = pageSource.match(/title: '([^']+)'/);
let subscriberCountMatch = pageSource.match(/simpleText: '([^']+)'/);
很可惜地不行！
從上面的的 raw data 可以看到它是被包在 裡面，而 HTML source 裡面的 雖然我們看得到，但對程式來說其實是 visible 的，無法直接讀取。
透過 eval 執行 HTML Source 的 並取得底下變數這時候 eval 就登場啦，eval 可以執行作為 String 被傳入的 JS Code，而我們若把找到的那段 script 丟進去 eval 執行，ytInitialData 就會在此被宣告跟建立，因此我們也就可以直接去存取 ytInitialData 取得它底下 Property 啦！
// Use eval to execute the script to declare the `ytInitialData` variable inside script
let jsCodeMatch = pageSource.match(/var ytInitialData = \{[^]+?\};/);
if (jsCodeMatch && jsCodeMatch.length >= 1) {
// Extract the JavaScript code block
let jsCode = jsCodeMatch[0];
// Execute the JavaScript code using eval()
eval(jsCode);
// ytInitialData is declared.
let title = ytInitialData.header.c4TabbedHeaderRenderer.title;
let subscriberCount = ytInitialData.header.c4TabbedHeaderRenderer.subscriberCountText.simpleText;
}
到這邊功能就已經做完了，但其實 eval 如上所述有很多問題，基本上不建議使用。
替代方案 JSON.parse可以呼叫 JSON.parse() 來把那段 script 解析出來，並且一樣可以直接存取解析出來的 JSON data，這樣就不用像是開後門一樣使用 eval 執行外部的程式碼了！
// Use regular expressions to find the JavaScript code block
let jsCodeMatch = pageSource.match(/var ytInitialData = (\{[^]+?\});/);
if (jsCodeMatch && jsCodeMatch.length >= 2) {
// Extract the JavaScript code block containing JSON data
let jsCode = jsCodeMatch[1];
// Parse the JSON data
let jsonData = JSON.parse(jsCode);
// Access the extracted data
if (jsonData.header && jsonData.header.c4TabbedHeaderRenderer) {
let title = jsonData.header.c4TabbedHeaderRenderer.title;
let subscriberCount =
jsonData.header.c4TabbedHeaderRenderer.subscriberCountText.simpleText.replace(
'subscribers',
''
);
}
}
2. 面試題：取得 JS 計算結果在 const a = '1 + 2 + 3'; 中，a 是一個包含 JavaScript Expression 的 String
該如何取得 a 變數運算完的結果？
這題是來自於：是 Ray 不是 Array 的文章。
透過 eval 可以很快地得到結果，但它有如上所述的問題，有沒有更萬無一失的作法？
const a = '1 + 2 + 3';
eval(a); // 6
String 轉 Array 並用 Array 操作來運算如果是 String 的話，還有一種常見的作法就是把它轉成 Array，接著就可以使用 Array 很多方便的 methods 來執行了。
const a = '1 + 2 + 3';
const b = a.split(' + '); // [ "1", "2", "3" ]，將字串依照內容切割成陣列
const c = b.map(Number); // [ 1, 2, 3 ]，將裡面的陣列轉換成數字
const total = c.reduce((acc, cur) => acc + cur); // 6，使用 reduce 來做相加
3. Vue devtools在 Vue devtools 中其實有一個很方便的功能「Open component in editor」，可以直接在輯器上打開對應的 Component Source Code。
而這個功能的執行就有使用到 eval：
export function openInEditor(file) {
// Console display
const fileName = file.replace(/\\/g, '\\\\');
const src = `fetch('${SharedData.openInEditorHost}__open-in-editor?file=${encodeURI(
file
)}').then(response => {
if (response.ok) {
console.log('File ${fileName} opened in editor')
} else {
const msg = 'Opening component ${fileName} failed'
const target = typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : {}
if (target.__VUE_DEVTOOLS_TOAST__) {
target.__VUE_DEVTOOLS_TOAST__(msg, 'error')
} else {
console.log('%c' + msg, 'color:red')
}
console.log('Check the setup of your project, see https://devtools.vuejs.org/guide/open-in-editor.html')
}
})`;
if (isChrome) {
target.chrome.devtools.inspectedWindow.eval(src);
} else {
// eslint-disable-next-line no-eval
eval(src); // <---
}
}
點我看 Source Code
簡單分析一下這段程式碼：
處理反斜線，確保 filename 是正確路徑對 {your_localhost}/_open-in-editor?file=/path/to/xxx.vue 發送一個 GET Request，這個 request 會去呼叫 launch-editor 這個套件來打開編輯及對應文件。更多細節可參考 Vue Devtools 的『Open component in editor』功能是如何实现的？Log 成功或失敗的訊息在 Browser Console其中 2. 跟 3. 的步驟都在包成字串再用 eval 去執行的。
這邊使用 eval 的原因是要在不同環境執行同一段程式碼，所以先把這段 JS code 用 string 存起來，再根據環境（Chrome 或 非 Chrome）決定使用原生 eval 還是 Chrome API 提供的 chrome.devtools.inspectedWindow.eval。
4. Angular i18n這是 Angular 之前再處理 i18n 的數字符號跟貨幣符號時，可以透過 eval(content.toString()) 執行後可以讓傳入的 content 中的變數被宣告跟存取。
function extractNumberSymbols(content, localeInfo, currencySymbols) {
//eval script in the current context so that we get access to all the symbols
// eslint-disable-next-line no-eval
eval(content.toString());
for (var propName in goog.i18n) {
var localeID = findLocaleId(propName, 'num');
if (localeID) {
var info = getInfoForLocale(localeInfo, localeID);
info.NUMBER_FORMATS = converter.convertNumberData(goog.i18n[propName], currencySymbols);
}
}
}
由於要詳細解釋完比較複雜，所以就先點到這邊，其餘可以進行去 Source Code 上看！
當你不信任 eval 要執行的 script 時在 JavaScript 本身的以及不同的執行環境（Node.js 和 瀏覽器 ）都有對應的解決方法，但大致上都是與原本的執行環境進行隔離。
1. JavaScript： ShadowRealm（提案中）ShadowRealm 是一個獨特的全域環境，擁有自己的全域對象，其中包含自己的內在函數和內建函數（未綁定 到全域變數的標準對象，例如 Object.prototype 的初始值）。
有望能解決 JavaScript 中 eval 和 new Function 等方法可能引發的安全問題，使得不信任的程式碼無法訪問主應用程式的內部變數或資源，提供更安全的程式碼隔離機制。
由於 ShadowRealm 還在提案中，尚未被所有瀏覽器完全實現，這邊也就先點到為止，有興趣的人可以去深究。
2. 瀏覽器： iframe + sandbox + srcdoc建一個帶有 sandbox 屬性的