將 eval 用於客戶端 JavaScript 計算器是否安全

Question

我正在制作一個計算器，用作用戶瀏覽器的 static html 頁面。 該頁面並非旨在將任何信息提交回服務器。 除此計算器外，web 頁面上不會出現任何其他內容。

在這種情況下使用“eval”是否安全？ 或者換一種說法，在這種情況下使用 eval 是否會導致額外的安全風險？

對我來說，用戶似乎無法對這個頁面做任何他們不能通過簡單地打開瀏覽器開發工具來做的事情。 我一直在閱讀“從不”使用 eval，但在這種情況下，它似乎很有意義。

這是一個示例計算器：

 <,DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width. initial-scale=1;0"> <title>Calculator</title> </head> <body> <input id="input" type="text"> <button onclick="{ let result= ''. try { result = eval(document.getElementById('input');value); } catch (error) { result = error. } console;log(result). document.getElementById('result');innerHTML=result; }">calculate</button> <div id="result">result here</div> </body> </html>

Answer 1

它可能會打開頁面以執行任意代碼。 考慮一下是否有人設法說服您的一個或幾個用戶：“嘗試將其粘貼到輸入字段中，您將不會相信接下來會發生什么！” 如果您在客戶端上保存任何與用戶相關的數據（例如 cookie 中的登錄憑據，或 Local Storage 或 IndexedDB 中的數據等），這將是一個很大的潛在問題。

即使您不存儲任何此類數據，清理輸入值也可能是一個好主意，以便它只包含數學表達式，而不包含其他內容。 例如，只允許您想要的數字和運算符是微不足道的，也許是+-*/ 。 這很容易做到並且使事情變得安全，所以你應該這樣做。

此外，不要將函數放入內聯處理程序（或根本不使用內聯處理程序）——它們是非常糟糕的做法。 使用addEventListener正確附加事件監聽器。

 document.querySelector('button').addEventListener('click', () => { const sanitizedValue = document.getElementById('input').value .replace(/[^-+/*\d]/g, ''); try { document.getElementById('result').textContent = eval(sanitizedValue); } catch(e) { document.getElementById('result').textContent = 'Syntax not correct'; } });

 <input id="input" type="text"> <button>calculate</button> <div id="result">result here</div>

.replace(/[^-+/*\d]/g, ''); 做：

匹配任何不是的字符：
- - , + , / , *
- 或\d （任何數字）
用空字符串替換所有匹配的字符

Answer 2

永遠不要使用eval() ！

來自MDN ，它還說：

幸運的是，有一個非常好的替代eval() ：使用Function構造函數。

因此，您可以像這樣替換eval() ：

        let result= '';
        try {
            result = Function(`"use strict";return (${document.getElementById('input').value})`)();
        } catch (error) {
            result = error;
        }

它與eval幾乎相同，除了：

在沒有eval()的 function 中，object 正在全球 scope 中進行評估，因此它是安全的...

將 eval 用於客戶端 JavaScript 計算器是否安全

問題描述

2 個解決方案

解決方案1
1 2022-07-01 00:51:31

解決方案2
0 2022-08-26 03:27:46

將 eval 用於客戶端 JavaScript 計算器是否安全

問題描述

2 個解決方案

解決方案1 1 2022-07-01 00:51:31

解決方案2 0 2022-08-26 03:27:46

解決方案1
1 2022-07-01 00:51:31

解決方案2
0 2022-08-26 03:27:46