eval()

Probieren Sie es aus

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

Syntax

eval(script)

Parameter

script

Eine TrustedScript-Instanz oder ein String, der einen JavaScript-Ausdruck, eine Anweisung oder eine Abfolge von Anweisungen darstellt. Der Ausdruck kann Variablen und Eigenschaften vorhandener Objekte enthalten. Er wird als Skript geparst, daher sind import-Deklarationen (die nur in Modulen existieren knnen) nicht erlaubt.

Rckgabewert

Der Abschlusswert der Auswertung des gegebenen Codes. Wenn der Abschlusswert leer ist, wird undefined zurckgegeben. Wenn script nicht ein TrustedScript oder ein primitivierter String ist, gibt eval() das Argument unverndert zurck.

Ausnahmen

SyntaxError

Das script-Parameter kann nicht als Skript geparst werden.

TypeError

script ist ein String, wenn Trusted Types durch eine CSP erzwungen werden und keine Standardrichtlinie definiert ist.

Die Methode wirft auch jede Ausnahme, die bei der Auswertung des Codes auftritt.

Beschreibung

eval() ist eine Funktionseigenschaft des globalen Objekts.

Das Argument der eval() Funktion ist ein String. Er wird den Quellstring als Skriptkrper auswerten, was bedeutet, dass sowohl Anweisungen als auch Ausdrcke erlaubt sind. Es gibt den Abschlusswert des Codes zurck. Bei Ausdrcken ist es der Wert, zu dem der Ausdruck ausgewertet wird. Viele Anweisungen und Deklarationen haben ebenfalls Abschlusswerte, aber das Ergebnis kann berraschend sein (zum Beispiel ist der Abschlusswert einer Zuweisung der zugewiesene Wert, aber der Abschlusswert von let ist undefined), daher wird empfohlen, sich nicht auf Abschlusswerte von Anweisungen zu verlassen.

Im strikten Modus fhrt die Deklaration einer Variablen mit dem Namen eval oder die Neuvergabe von eval zu einem SyntaxError.

"use strict";

const eval = 1; // SyntaxError: Unexpected eval or arguments in strict mode

Wenn das Argument von eval() nicht ein TrustedScript oder ein String ist, gibt eval() das Argument unverndert zurck. Im folgenden Beispiel fhrt das bergeben eines String-Objekts anstelle eines Primitiven dazu, dass eval() das String-Objekt anstelle der Auswertung des Strings zurckgibt.

eval(new String("2 + 2")); // returns a String object containing "2 + 2"
eval("2 + 2"); // returns 4

Um das Problem auf generische Weise zu umgehen, knnen Sie das Argument selbst in einen String umwandeln, bevor Sie es an eval() bergeben.

const expression = new String("2 + 2");
eval(String(expression)); // returns 4

Direkte und indirekte eval

Es gibt zwei Modi von eval()-Aufrufen: direkte eval und indirekte eval. Direkte eval bedeutet, dass die globale eval-Funktion direkt mit eval(...) aufgerufen wird. Alles andere, einschlielich des Aufrufs ber eine aliasierte Variable, ber einen Memberzugriff oder andere Ausdrcke oder durch den optionalen Verkettungsoperator ?., ist indirekt.

// Direct call
eval("x + y");

// Indirect call using the comma operator to return eval
(0, eval)("x + y");

// Indirect call through optional chaining
eval?.("x + y");

// Indirect call using a variable to store and return eval
const myEval = eval;
myEval("x + y");

// Indirect call through member access
const obj = { eval };
obj.eval("x + y");

Indirekte eval kann betrachtet werden, als ob der Code innerhalb eines separaten <script>-Tags ausgewertet wird. Das bedeutet:

• Indirekte eval funktioniert im globalen Bereich statt im lokalen Bereich, und der auszufhrende Code hat keinen Zugriff auf lokale Variablen innerhalb des Bereichs, in dem er aufgerufen wird.

  js

  function test() {
    const x = 2;
    const y = 4;
    // Direct call, uses local scope
    console.log(eval("x + y")); // Result is 6
    // Indirect call, uses global scope
    console.log(eval?.("x + y")); // Throws because x is not defined in global scope
  }
  

• Indirekte eval erbt nicht die Striktheit des umgebenden Kontexts und ist nur im strikten Modus, wenn der Quellstring selbst eine "use strict"-Anweisung hat.

  js

  function nonStrictContext() {
    eval?.(`with (Math) console.log(PI);`);
  }
  function strictContext() {
    "use strict";
    eval?.(`with (Math) console.log(PI);`);
  }
  function strictContextStrictEval() {
    "use strict";
    eval?.(`"use strict"; with (Math) console.log(PI);`);
  }
  nonStrictContext(); // Logs 3.141592653589793
  strictContext(); // Logs 3.141592653589793
  strictContextStrictEval(); // Uncaught SyntaxError: Strict mode code may not include a with statement
  

  Auf der anderen Seite erbt direkte eval die Striktheit des aufrufenden Kontexts.

  js

  function nonStrictContext() {
    eval(`with (Math) console.log(PI);`);
  }
  function strictContext() {
    "use strict";
    eval(`with (Math) console.log(PI);`);
  }
  function strictContextStrictEval() {
    "use strict";
    eval(`"use strict"; with (Math) console.log(PI);`);
  }
  nonStrictContext(); // Logs 3.141592653589793
  strictContext(); // Uncaught SyntaxError: Strict mode code may not include a with statement
  strictContextStrictEval(); // Uncaught SyntaxError: Strict mode code may not include a with statement
  

• Variablen, die mit var deklariert wurden, und Funktionsdeklarationen wrden in den umgebenden Bereich gehen, wenn der Quellstring nicht im strikten Modus interpretiert wird fr indirekte eval werden sie zu globalen Variablen. Wenn es eine direkte eval in einem strikten Modus-Kontext ist, oder wenn der eval-Quellstring selbst im strikten Modus ist, dann "lecken" var- und Funktionsdeklarationen nicht in den umgebenden Bereich.

  js

  // Neither context nor source string is strict,
  // so var creates a variable in the surrounding scope
  eval("var a = 1;");
  console.log(a); // 1
  // Context is not strict, but eval source is strict,
  // so b is scoped to the evaluated script
  eval("'use strict'; var b = 1;");
  console.log(b); // ReferenceError: b is not defined
  
  function strictContext() {
    "use strict";
    // Context is strict, but this is indirect and the source
    // string is not strict, so c is still global
    eval?.("var c = 1;");
    // Direct eval in a strict context, so d is scoped
    eval("var d = 1;");
  }
  strictContext();
  console.log(c); // 1
  console.log(d); // ReferenceError: d is not defined
  

  let und const Deklarationen innerhalb des ausgewerteten Strings sind immer auf dieses Skript beschrnkt.

• Direkte eval kann Zugriff auf zustzliche kontextuelle Ausdrcke haben. Zum Beispiel kann man im Krper einer Funktion new.target verwenden:

  js

  function Ctor() {
    eval("console.log(new.target)");
  }
  new Ctor(); // [Function: Ctor]
  

Verwenden Sie niemals direkte eval()!

Die Verwendung von direkter eval() hat mehrere Nachteile:

• eval() fhrt den bergebenen Code mit den Berechtigungen des Aufrufers aus. Wenn Sie eval() mit einem String ausfhren, der von einer bsartigen Partei beeinflusst werden knnte, laufen Sie Gefahr, bsartigen Code auf dem Computer des Benutzers mit den Berechtigungen Ihrer Webseite / Erweiterung auszufhren. Wichtiger ist, dass der Drittanbieter-Code Zugang zum Bereich, in dem eval() aufgerufen wurde (wenn es eine direkte eval ist), bekommen kann, was zu mglichen Angriffen fhren kann, die lokale Variablen lesen oder ndern. Siehe Sicherheitsberlegungen fr Anstze, die diese Risiken mindern.
• eval() ist langsamer als die Alternativen, da es den JavaScript-Interpreter aufrufen muss, whrend viele andere Konstrukte von modernen JS-Engines optimiert werden.
• Moderne JavaScript-Interpreter konvertieren JavaScript in Maschinencode. Das bedeutet, dass jedes Konzept der Variablennamen eliminiert wird. Daher wird jede Verwendung von eval() den Browser dazu zwingen, lange und teure Variablennamensauflsungen durchzufhren, um herauszufinden, wo die Variable im Maschinencode existiert und ihren Wert festzulegen. Darber hinaus knnen neue Dinge durch eval() in diese Variable eingefhrt werden, wie zum Beispiel die nderung des Typs dieser Variable, was den Browser zwingt, den gesamten generierten Maschinencode neu zu bewerten, um dies zu kompensieren.
• Minifizierer geben jede Minifizierung auf, wenn der Bereich transitiv von eval() abhngt, weil eval() sonst nicht die korrekte Variable zur Laufzeit lesen kann.

Es gibt viele Flle, in denen die Verwendung von eval() oder hnlichen Methoden optimiert oder vollstndig vermieden werden kann.

Verwenden von indirekter eval()

Betrachten Sie diesen Code:

function looseJsonParse(obj) {
  return eval(`(${obj})`);
}
console.log(looseJsonParse("{ a: 4 - 1, b: function () {}, c: new Map() }"));

Das einfache Verwenden von indirekter eval und das Erzwingen des strikten Modus kann den Code erheblich verbessern:

function looseJsonParse(obj) {
  return eval?.(`"use strict";(${obj})`);
}
console.log(looseJsonParse("{ a: 4 - 1, b: function () {}, c: new Map() }"));

Die beiden obigen Codebeispiele scheinen auf die gleiche Weise zu funktionieren, tun es aber nicht; das erste Beispiel mit direkter eval leidet unter mehreren Problemen.

• Es ist erheblich langsamer, aufgrund mehrerer Bereichsinspektionen. Beachten Sie c: new Map() im ausgewerteten String. In der Version mit indirekter eval wird das Objekt im globalen Bereich ausgewertet, daher kann der Interpreter sicher annehmen, dass sich Map auf den globalen Map()-Konstruktor statt auf eine lokale Variable namens Map bezieht. Im Code, der direkte eval verwendet, kann der Interpreter dies nicht annehmen. Zum Beispiel bezieht sich im folgenden Code Map im ausgewerteten String nicht auf window.Map().

  js

  function looseJsonParse(obj) {
    class Map {}
    return eval(`(${obj})`);
  }
  console.log(looseJsonParse(`{ a: 4 - 1, b: function () {}, c: new Map() }`));
  

  Somit ist der Browser in der eval()-Version des Codes gezwungen, den teuren Lookup-Aufruf zu machen, um zu berprfen, ob es lokale Variablen mit dem Namen Map() gibt.

• Wenn der strikte Modus nicht verwendet wird, werden var-Deklarationen innerhalb des eval()-Quelltextes zu Variablen im umgebenden Bereich. Dies fhrt zu schwer zu diagnostizierenden Problemen, wenn der String aus externen Eingaben stammt, insbesondere wenn es bereits eine Variable mit demselben Namen gibt.

• Direkte eval kann Bindungen im umgebenden Bereich lesen und mutieren, was dazu fhren kann, dass externe Eingaben lokale Daten korrumpieren.

• Bei der Verwendung von direkter eval, insbesondere wenn der eval-Quelltext nicht nachweislich im strikten Modus ist, mssen die Engine und die Build-Tools alle Optimierungen im Zusammenhang mit dem Inline-Verfahren deaktivieren, weil der eval()-Quelltext von jedem Variablennamen im umgebenden Bereich abhngen kann.

Die Verwendung von indirekter eval() erlaubt jedoch nicht das bergeben zustzlicher Bindungen auer vorhandenen globalen Variablen, die von der ausgewerteten Quelle gelesen werden knnen. Wenn Sie zustzliche Variablen angeben mssen, auf die die ausgewertete Quelle Zugriff haben soll, sollten Sie den Function()-Konstruktor verwenden.

Verwenden des Function()-Konstruktors

Der Function() Konstruktor hnelt stark dem indirekten eval-Beispiel oben: Er wertet auch die bergebene JavaScript-Quelle im globalen Bereich aus, ohne lokale Bindungen zu lesen oder zu ndern, und erlaubt somit den Engines, mehr Optimierungen durchzufhren als direktes eval().

Der Unterschied zwischen eval() und Function() besteht darin, dass der an Function() bergebene Quelltext als Funktionskrper geparst wird, nicht als Skript. Es gibt einige Nuancen - zum Beispiel knnen return-Anweisungen auf der obersten Ebene eines Funktionskrpers, aber nicht in einem Skript verwendet werden.

Der Function()-Konstruktor ist ntzlich, wenn Sie lokale Bindungen innerhalb Ihres eval-Quelltextes erstellen mchten, indem Sie die Variablen als Parameterbindungen bergeben.

function add(a, b) {
  return a + b;
}
function runCodeWithAddFunction(obj) {
  return Function("add", `"use strict";return (${obj});`)(add);
}
console.log(runCodeWithAddFunction("add(5, 7)")); // 12

Sowohl eval() als auch Function() werten implizit beliebigen Code aus und sind in strengen CSP-Einstellungen verboten. Es gibt auch zustzliche sicherere (und schnellere!) Alternativen zu eval() oder Function() fr hufige Anwendungsflle.

Verwenden von Klammerzugriffen

Sie sollten eval() nicht verwenden, um Eigenschaften dynamisch zuzugreifen. Betrachten Sie das folgende Beispiel, bei dem die Eigenschaft des Objekts, auf das zugegriffen werden soll, erst bekannt ist, wenn der Code ausgefhrt wird. Dies kann mit eval() durchgefhrt werden:

const obj = { a: 20, b: 30 };
const propName = getPropName(); // returns "a" or "b"

const result = eval(`obj.${propName}`);

Jedoch ist eval() hier nicht notwendig tatschlich ist es fehleranflliger, da propName, wenn es kein gltiger Bezeichner ist, zu einem Syntaxfehler fhrt. Auerdem kann dies, wenn getPropName keine von Ihnen kontrollierte Funktion ist, zur Ausfhrung von beliebigem Code fhren. Verwenden Sie stattdessen die Eigenschaftszugriffsoperatoren, die viel schneller und sicherer sind:

const obj = { a: 20, b: 30 };
const propName = getPropName(); // returns "a" or "b"
const result = obj[propName]; // obj["a"] is the same as obj.a

Sie knnen diese Methode sogar verwenden, um auf untergeordnete Eigenschaften zuzugreifen. Mit eval() wrde dies folgendermaen aussehen:

const obj = { a: { b: { c: 0 } } };
const propPath = getPropPath(); // suppose it returns "a.b.c"

const result = eval(`obj.${propPath}`); // 0

Vermeiden Sie eval() hier, indem Sie den Eigenschaftenpfad aufteilen und durch die verschiedenen Eigenschaften iterieren:

function getDescendantProp(obj, desc) {
  const arr = desc.split(".");
  while (arr.length) {
    obj = obj[arr.shift()];
  }
  return obj;
}

const obj = { a: { b: { c: 0 } } };
const propPath = getPropPath(); // suppose it returns "a.b.c"
const result = getDescendantProp(obj, propPath); // 0

Das Einstellen einer Eigenschaft auf diese Weise funktioniert hnlich:

function setDescendantProp(obj, desc, value) {
  const arr = desc.split(".");
  while (arr.length > 1) {
    obj = obj[arr.shift()];
  }
  return (obj[arr[0]] = value);
}

const obj = { a: { b: { c: 0 } } };
const propPath = getPropPath(); // suppose it returns "a.b.c"
const result = setDescendantProp(obj, propPath, 1); // obj.a.b.c is now 1

Beachten Sie jedoch, dass das Verwenden von Klammern-Zugriffen mit unkontrollierten Eingaben ebenfalls unsicher ist dies kann zu Objektinjektionsangriffen fhren.

Verwenden von Callback-Funktionen

JavaScript hat First-Class-Funktionen, was bedeutet, dass Sie Funktionen als Argumente an andere APIs bergeben, sie in Variablen und den Eigenschaften von Objekten speichern und so weiter knnen. Viele DOM-APIs sind mit diesem Prinzip im Hinterkopf konzipiert, daher knnen (und sollten) Sie schreiben:

// Instead of setTimeout("", 1000) use:
setTimeout(() => {
  // 
}, 1000);

// Instead of elt.setAttribute("onclick", "") use:
elt.addEventListener("click", () => {
  // 
});

Abschlsse sind ebenfalls hilfreich als Mglichkeit, parametrisierte Funktionen ohne das Verkettung von Strings zu erstellen.

Verwenden von JSON

Wenn der String, auf den Sie eval() anwenden, Daten enthlt (zum Beispiel ein Array: "[1, 2, 3]"), anstatt Code, sollten Sie den Wechsel zu JSON in Betracht ziehen, das es dem String erlaubt, einen Unterbereich der JavaScript-Syntax zu verwenden, um Daten darzustellen.

Da die JSON-Syntax im Vergleich zur JavaScript-Syntax eingeschrnkt ist, knnen viele gltige JavaScript-Literale nicht als JSON geparst werden. Beispielsweise sind abschlieende Kommata in JSON nicht erlaubt, und Eigenschaftsnamen (Schlssel) in Objektliteralen mssen in Anfhrungszeichen eingeschlossen sein. Verwenden Sie unbedingt einen JSON-Serializer, um Strings zu generieren, die spter als JSON geparst werden.

Das bertragen von sorgfltig eingeschrnkten Daten anstelle von beliebigem Code ist generell eine gute Idee. Zum Beispiel knnte eine Erweiterung, die darauf ausgelegt ist, Inhalte von Webseiten zu extrahieren, die Extraktionsregeln in XPath statt in JavaScript-Code definiert haben.

Sicherheitsberlegungen

Die Methode kann verwendet werden, um beliebige Eingaben mit den Berechtigungen des Aufrufers auszufhren. Wenn die Eingabe ein potenziell unsicherer String ist, der von einem Benutzer bereitgestellt wurde, ist dies ein mglicher Vektor fr Cross-Site-Scripting (XSS)-Angriffe.

Zum Beispiel zeigt der folgende Code, wie eval() mglicherweise untrustedCode ausfhrt, das von einem Benutzer bereitgestellt wurde:

const untrustedCode = "alert('Potentially evil code!');";
const adder = eval(untrustedCode);

Webseiten mit einer Content Security Policy (CSP), die script-src oder default-src spezifiziert, werden standardmig verhindern, dass solcher Code ausgefhrt wird. Wenn Sie erlauben mssen, dass die Skripte ber eval() ausgefhrt werden, knnen Sie die Risiken mildern, indem Sie immer eine TrustedScript-Instanz anstelle eines Strings zuweisen und vertrauenswrdige Typen erzwingen mit der CSP-Direktive require-trusted-types-for. Dies stellt sicher, dass die Eingabe durch eine Transformationsfunktion geleitet wird.

Um eval() auszufhren, mssen Sie zustzlich das trusted-types-eval Schlsselwort in Ihrer CSP script-src-Direktive angeben. Das unsafe-eval Schlsselwort erlaubt ebenfalls eval(), ist jedoch viel weniger sicher als trusted-types-eval, da es auch auf Browsern, die vertrauenswrdige Typen nicht untersttzen, die Ausfhrung erlauben wrde.

Zum Beispiel knnte die erforderliche CSP fr Ihre Seite folgendermaen aussehen:

Content-Security-Policy: require-trusted-types-for 'script'; script-src '<your_allowlist>' 'trusted-types-eval'

Das Verhalten der Transformationsfunktion, die in Ihrer Trusted Types-Richtlinie implementiert ist, hngt vom spezifischen Anwendungsfall ab, der ein benutzerdefiniertes Skript erfordert. Wenn mglich, sollten Sie die erlaubten Skripte genau auf den Code beschrnken, dem Sie vertrauen, dass er ausgefhrt wird. Wenn das nicht mglich ist, knnten Sie die Nutzung bestimmter Funktionen innerhalb der bereitgestellten Eingabe erlauben oder blockieren.

Beispiele

Beachten Sie, dass das erste Beispiel zeigt, wie die Methode mit vertrauenswrdigen Typen verwendet wird. Die anderen Beispiele lassen diesen Schritt zur Krze aus.

Verwendung von TrustedScript

Um das Risiko von XSS zu mindern, sollten wir immer TrustedScript-Instanzen an den script-Parameter bergeben. Wir mssen dies auch tun, wenn wir vertrauenswrdige Typen aus anderen Grnden erzwingen und einige erlaubte Skriptquellen zulassen mchten (durch CSP: script-src).

Vertrauenswrdige Typen werden noch nicht in allen Browsern untersttzt, daher definieren wir zuerst das trusted types tinyfill. Dies wirkt als transparenter Ersatz fr die Trusted Types-JavaScript-API:

if (typeof trustedTypes === "undefined")
  trustedTypes = { createPolicy: (n, rules) => rules };

Als Nchstes erstellen wir eine TrustedTypePolicy, die eine createScript()-Methode zur Transformation von Eingabestrings in TrustedScript-Instanzen definiert.

Fr das Beispiel nehmen wir an, dass wir eine Funktion transformedScript() haben, die unsere Transformations-/Filterlogik definiert.

const policy = trustedTypes.createPolicy("script-policy", {
  createScript(input) {
    const transformed = transformedScript(input); // Our filter method
    return transformed;
  },
});

Dann verwenden wir das policy-Objekt, um ein TrustedScript-Objekt aus einem potenziell unsicheren Eingabestring zu erstellen:

// The potentially malicious string
const untrustedScript = "alert('Potentially evil code!');";

// Create a TrustedScriptURL instance using the policy
const trustedScript = policy.createScript(untrustedScript);

Das TrustedScript-Objekt kann jetzt an eval() bergeben werden:

eval(trustedScript);

Verwendung von eval()

Im folgenden Code geben beide Aussagen mit eval() 42 zurck. Die erste wertet den String "x + y + 1" aus; die zweite den String "42".

const x = 2;
const y = 39;
const z = "42";
eval("x + y + 1"); // 42
eval(z); // 42

eval() gibt den Abschlusswert von Anweisungen zurck

eval() gibt den Abschlusswert von Anweisungen zurck. Bei if wre es die letzte bewertete Anweisung oder der letzte Ausdruck.

const str = "if (a) { 1 + 1 } else { 1 + 2 }";
let a = true;
let b = eval(str);

console.log(`b is: ${b}`); // b is: 2

a = false;
b = eval(str);

console.log(`b is: ${b}`); // b is: 3

Im folgenden Beispiel wird eval() verwendet, um den String str auszuwerten. Dieser String besteht aus JavaScript-Anweisungen, die z einen Wert von 42 zuweisen, wenn x fnf ist, und ansonsten 0. Wenn die zweite Anweisung ausgefhrt wird, fhrt eval() dazu, dass diese Anweisungen ausgefhrt werden, und es wird die Menge der Anweisungen ausgewertet und der Wert zurckgegeben, der auf z zugewiesen wird, da der Abschlusswert einer Zuweisung der zugewiesene Wert ist.

const x = 5;
const str = `if (x === 5) {
  console.log("z is 42");
  z = 42;
} else {
  z = 0;
}`;

console.log("z is ", eval(str)); // z is 42  z is 42

Wenn Sie mehrere Werte zuweisen, wird der letzte Wert zurckgegeben.

let x = 5;
const str = `if (x === 5) {
  console.log("z is 42");
  z = 42;
  x = 420;
} else {
  z = 0;
}`;

console.log("x is", eval(str)); // z is 42  x is 420

eval() als String, der Funktion definiert, erfordert "(" und ")" als Prfix und Suffix

// This is a function declaration
const fctStr1 = "function a() {}";
// This is a function expression
const fctStr2 = "(function b() {})";
const fct1 = eval(fctStr1); // return undefined, but `a` is available as a global function now
const fct2 = eval(fctStr2); // return the function `b`

Spezifikationen

Browser-Kompatibilitt

Siehe auch

• Eigenschaftszugriffsoperatoren
• WebExtensions: Using eval in content scripts