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 eine Zeichenfolge, die einen JavaScript-Ausdruck, eine Anweisung oder eine Folge 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 vorkommen knnen, nicht zulssig.

Rckgabewert

Der Abschlusswert der Auswertung des angegebenen Codes. Ist der Abschlusswert leer, wird undefined zurckgegeben. Wenn script weder ein TrustedScript noch eine primitive Zeichenfolge ist, gibt eval() das Argument unverndert zurck.

Ausnahmen

SyntaxError

Der Parameter script kann nicht als Skript geparst werden.

TypeError

script ist eine Zeichenfolge, whrend Trusted Types durch eine CSP erzwungen werden und keine Standardrichtlinie definiert ist.

Die Methode lst auerdem jede Ausnahme aus, die bei der Auswertung des Codes auftritt.

Beschreibung

eval() ist eine Funktionseigenschaft des globalen Objekts.

Das Argument der Funktion eval() ist eine Zeichenfolge. Die Funktion wertet die Quellzeichenfolge als Skriptkrper aus; sowohl Anweisungen als auch Ausdrcke sind daher zulssig. Sie gibt den Abschlusswert des Codes zurck. Bei Ausdrcken ist dies der Wert, zu dem der Ausdruck ausgewertet wird. Auch viele Anweisungen und Deklarationen haben Abschlusswerte, doch das Ergebnis kann berraschend sein: Beispielsweise ist der Abschlusswert einer Zuweisung der zugewiesene Wert, whrend der Abschlusswert von let undefined ist. Daher sollten Sie sich nicht auf die Abschlusswerte von Anweisungen verlassen.

Im strikten Modus fhrt die Deklaration einer Variablen namens eval oder eine erneute Zuweisung an eval zu einem SyntaxError.

"use strict";

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

Wenn das Argument von eval() weder ein TrustedScript noch eine Zeichenfolge ist, gibt eval() das Argument unverndert zurck. Im folgenden Beispiel fhrt die bergabe eines String-Objekts statt eines primitiven Werts dazu, dass eval() das String-Objekt zurckgibt, anstatt die Zeichenfolge auszuwerten.

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

Um dieses Problem allgemein zu umgehen, knnen Sie das Argument selbst in eine Zeichenfolge umwandeln, bevor Sie es an eval() bergeben.

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

Direkte und indirekte Auswertung mit eval

Es gibt zwei Arten von eval()-Aufrufen: direkte und indirekte Aufrufe. Bei einem direkten Aufruf wird die globale Funktion eval, wie der Name nahelegt, direkt mit eval(...) aufgerufen. Alle anderen Aufrufe sind indirekt. Dazu gehren Aufrufe ber eine Aliasvariable, ber einen Eigenschaftszugriff oder einen anderen Ausdruck sowie ber den Operator ?. fr optionale Verkettung.

// 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");

Eine indirekte Auswertung mit eval lsst sich so betrachten, als wrde der Code innerhalb eines separaten <script>-Tags ausgewertet. Das bedeutet:

• Die indirekte Auswertung erfolgt im globalen statt im lokalen Gltigkeitsbereich. Der ausgewertete Code hat keinen Zugriff auf lokale Variablen des Gltigkeitsbereichs, aus 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
  }
  

• Eine indirekte Auswertung mit eval bernimmt den strikten Modus des umgebenden Kontexts nicht. Sie erfolgt nur dann im strikten Modus, wenn die Quellzeichenfolge selbst eine "use strict"-Direktive enthlt.

  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
  

  Eine direkte Auswertung bernimmt dagegen den strikten Modus 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
  

• Mit var deklarierte Variablen und Funktionsdeklarationen gelangen in den umgebenden Gltigkeitsbereich, wenn die Quellzeichenfolge nicht im strikten Modus interpretiert wird. Bei einer indirekten Auswertung werden sie somit zu globalen Variablen. Erfolgt eine direkte Auswertung in einem Kontext mit striktem Modus oder befindet sich die eval-Quellzeichenfolge selbst im strikten Modus, dringen var- und Funktionsdeklarationen nicht in den umgebenden Gltigkeitsbereich vor.

  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 der ausgewerteten Zeichenfolge sind immer auf dieses Skript beschrnkt.

• Eine direkte Auswertung kann auf zustzliche kontextabhngige Ausdrcke zugreifen. Im Krper einer Funktion lsst sich beispielsweise new.target verwenden:

  js

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

Verwenden Sie niemals eine direkte Auswertung mit eval()!

Die direkte Verwendung von eval() bringt mehrere Probleme mit sich:

• eval() fhrt den bergebenen Code mit den Berechtigungen des Aufrufers aus. Wenn Sie eval() mit einer Zeichenfolge aufrufen, die von bswilligen Dritten beeinflusst werden knnte, fhren Sie mglicherweise schdlichen Code auf dem Gert des Benutzers mit den Berechtigungen Ihrer Webseite oder Erweiterung aus. Vor allem kann es zu Angriffen fhren, bei denen lokale Variablen gelesen oder verndert werden, wenn Code von Dritten auf den Gltigkeitsbereich zugreifen kann, in dem eval() aufgerufen wurde (bei einer direkten Auswertung). Unter Sicherheitsaspekte finden Sie Anstze zur Verringerung dieser Risiken.
• eval() ist langsamer als die Alternativen, da der JavaScript-Interpreter aufgerufen werden muss, whrend moderne JS-Engines viele andere Konstrukte optimieren.
• Moderne JavaScript-Interpreter wandeln JavaScript in Maschinencode um. Dabei gehen Informationen ber Variablennamen verloren. Jede Verwendung von eval() zwingt den Browser deshalb zu aufwendigen Suchvorgngen nach Variablennamen, um festzustellen, wo sich eine Variable im Maschinencode befindet, und ihren Wert zu setzen. Darber hinaus kann eval() neue Eigenschaften einer Variablen einfhren, etwa ihren Typ ndern. Dadurch muss der Browser den gesamten erzeugten Maschinencode erneut auswerten, um die nderung zu bercksichtigen.
• Minifier verzichten auf jegliche Minifizierung, wenn ein Gltigkeitsbereich mittelbar von eval() abhngt, da eval() andernfalls zur Laufzeit nicht die richtige Variable lesen knnte.

In vielen Fllen lsst sich die Verwendung von eval() oder verwandten Methoden optimieren oder ganz vermeiden.

Indirekte Auswertung mit eval()

Betrachten Sie diesen Code:

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

Allein die indirekte Auswertung und das Erzwingen des strikten Modus knnen 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 Codeausschnitte scheinen mglicherweise gleich zu funktionieren, tun es aber nicht. Der erste verwendet eine direkte Auswertung und hat mehrere Nachteile.

• Er ist deutlich langsamer, weil mehr Gltigkeitsbereiche durchsucht werden mssen. Beachten Sie c: new Map() in der ausgewerteten Zeichenfolge. Bei der indirekten Auswertung wird das Objekt im globalen Gltigkeitsbereich ausgewertet. Der Interpreter kann daher davon ausgehen, dass Map auf den globalen Map()-Konstruktor und nicht auf eine lokale Variable namens Map verweist. Bei einer direkten Auswertung kann der Interpreter diese Annahme nicht treffen. Im folgenden Code verweist Map in der ausgewerteten Zeichenfolge beispielsweise nicht auf window.Map().

  js

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

  Bei der eval()-Variante muss der Browser daher aufwendig prfen, ob lokale Variablen namens Map() vorhanden sind.

• Ohne strikten Modus werden var-Deklarationen im eval()-Quelltext zu Variablen im umgebenden Gltigkeitsbereich. Das kann zu schwer zu debuggenden Problemen fhren, wenn die Zeichenfolge aus externen Eingaben stammt insbesondere, wenn bereits eine Variable mit demselben Namen existiert.

• Eine direkte Auswertung kann Bindungen im umgebenden Gltigkeitsbereich lesen und verndern. Dadurch knnen externe Eingaben lokale Daten beschdigen.

• Bei der direkten Verwendung von eval mssen die Engine und Build-Tools alle Optimierungen fr das Inlining deaktivieren, insbesondere wenn nicht nachgewiesen werden kann, dass der ausgewertete Quelltext im strikten Modus ausgefhrt wird. Der eval()-Quelltext kann nmlich von jedem Variablennamen in seinem umgebenden Gltigkeitsbereich abhngen.

Bei einer indirekten Auswertung mit eval() knnen Sie dem ausgewerteten Quelltext allerdings keine zustzlichen Bindungen auer bereits vorhandenen globalen Variablen zur Verfgung stellen. Wenn der ausgewertete Quelltext Zugriff auf weitere Variablen bentigt, sollten Sie den Function()-Konstruktor verwenden.

Verwendung des Function()-Konstruktors

Der Function()-Konstruktor hnelt dem obigen Beispiel einer indirekten Auswertung: Er wertet den bergebenen JavaScript-Quelltext ebenfalls im globalen Gltigkeitsbereich aus, ohne lokale Bindungen zu lesen oder zu verndern. Daher knnen Engines mehr Optimierungen vornehmen als bei einer direkten Auswertung mit eval().

Der Unterschied zwischen eval() und Function() besteht darin, dass die an Function() bergebene Quellzeichenfolge als Funktionskrper und nicht als Skript geparst wird. Daraus ergeben sich einige Besonderheiten: So knnen Sie beispielsweise return-Anweisungen auf der obersten Ebene eines Funktionskrpers verwenden, nicht aber in einem Skript.

Der Function()-Konstruktor ist ntzlich, wenn Sie innerhalb des auszuwertenden Quelltexts lokale Bindungen erstellen mchten, indem Sie 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 bei strengen CSP-Einstellungen verboten. Fr hufige Anwendungsflle gibt es auerdem weitere sicherere (und schnellere!) Alternativen zu eval() und Function().

Verwendung des Zugriffs mit eckigen Klammern

Sie sollten eval() nicht verwenden, um dynamisch auf Eigenschaften zuzugreifen. Im folgenden Beispiel ist die Eigenschaft des Objekts, auf die zugegriffen werden soll, erst bei der Ausfhrung des Codes bekannt. Der Zugriff lsst sich mit eval() umsetzen:

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

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

Hier ist eval() jedoch nicht erforderlich. Tatschlich ist es fehleranflliger: Wenn propName kein gltiger Bezeichner ist, fhrt dies zu einem Syntaxfehler. Wenn getPropName keine Funktion ist, die Sie kontrollieren, kann zudem beliebiger Code ausgefhrt werden. Verwenden Sie stattdessen den Eigenschaftszugriff, der wesentlich schneller und sicherer ist:

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

Mit dieser Methode knnen Sie sogar auf verschachtelte Eigenschaften zugreifen. Mit eval() she das so aus:

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

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

Um eval() hier zu vermeiden, knnen Sie den Eigenschaftspfad aufteilen und die einzelnen Eigenschaften nacheinander durchlaufen:

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 Setzen einer Eigenschaft funktioniert auf hnliche Weise:

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 auch der Zugriff mit eckigen Klammern bei uneingeschrnkten Eingaben nicht sicher ist. Er kann zu Object-Injection-Angriffen fhren.

Verwendung von Callbacks

In JavaScript sind Funktionen First-Class-Objekte. Das bedeutet, dass Sie Funktionen als Argumente an andere APIs bergeben oder in Variablen und Objekteigenschaften speichern knnen. Viele DOM-APIs sind darauf ausgelegt. Sie knnen (und sollten) daher Folgendes schreiben:

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

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

Auch Closures sind hilfreich, um parametrisierte Funktionen zu erstellen, ohne Zeichenfolgen zu verketten.

Verwendung von JSON

Wenn die Zeichenfolge, mit der Sie eval() aufrufen, Daten statt Code enthlt beispielsweise ein Array wie "[1, 2, 3]" , sollten Sie JSON verwenden. Damit kann die Zeichenfolge Daten mithilfe einer Teilmenge der JavaScript-Syntax darstellen.

Beachten Sie, dass die JSON-Syntax gegenber der JavaScript-Syntax eingeschrnkt ist. Viele gltige JavaScript-Literale lassen sich daher nicht als JSON parsen. Beispielsweise sind nachgestellte Kommas in JSON nicht zulssig, und Eigenschaftsnamen (Schlssel) in Objektliteralen mssen in Anfhrungszeichen stehen. Verwenden Sie unbedingt einen JSON-Serializer, um Zeichenfolgen zu erzeugen, die spter als JSON geparst werden sollen.

Sorgfltig eingeschrnkte Daten statt beliebigen Codes zu bergeben, ist generell sinnvoll. Beispielsweise knnten die Regeln einer Erweiterung zum Extrahieren von Inhalten aus Webseiten in XPath statt in JavaScript-Code definiert werden.

Sicherheitsaspekte

Mit der Methode knnen beliebige Eingaben mit den Berechtigungen des Aufrufers ausgefhrt werden. Stammt die Eingabe aus einer potenziell unsicheren, von einem Benutzer bereitgestellten Zeichenfolge, kann dies einen Angriffsvektor fr Cross-Site-Scripting-Angriffe (XSS) darstellen.

Der folgende Code zeigt beispielsweise, wie eval() den von einem Benutzer bereitgestellten Wert untrustedCode ausfhren knnte:

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

Websites mit einer Content Security Policy (CSP), die script-src oder default-src festlegt, verhindern standardmig die Ausfhrung solchen Codes. Wenn Sie die Ausfhrung von Skripten ber eval() zulassen mssen, knnen Sie die Risiken verringern, indem Sie immer eine TrustedScript-Instanz statt einer Zeichenfolge zuweisen und Trusted Types mithilfe der CSP-Direktive require-trusted-types-for erzwingen. So wird sichergestellt, dass die Eingabe eine Transformationsfunktion durchluft.

Damit eval() ausgefhrt werden kann, mssen Sie zustzlich das Schlsselwort trusted-types-eval in der script-src-Direktive Ihrer CSP angeben. Das Schlsselwort unsafe-eval erlaubt eval() ebenfalls, ist aber deutlich weniger sicher als trusted-types-eval, da es die Ausfhrung auch in Browsern zulsst, die Trusted Types nicht untersttzen.

Die erforderliche CSP fr Ihre Website knnte beispielsweise so aussehen:

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

Das Verhalten der Transformationsfunktion in Ihrer Trusted-Types-Richtlinie hngt vom konkreten Anwendungsfall ab, fr den ein vom Benutzer bereitgestelltes Skript bentigt wird. Wenn mglich, sollten Sie die zulssigen Skripte auf genau den Code beschrnken, dessen Ausfhrung Sie vertrauen. Ist das nicht mglich, knnen Sie die Verwendung bestimmter Funktionen innerhalb der bereitgestellten Eingabe erlauben oder blockieren.

Beispiele

Das erste Beispiel zeigt die Verwendung der Methode mit Trusted Types. In den anderen Beispielen wird dieser Schritt der Krze halber ausgelassen.

Verwendung von TrustedScript

Um das XSS-Risiko zu verringern, sollten wir dem Parameter script immer TrustedScript-Instanzen zuweisen. Dies ist auch erforderlich, wenn wir Trusted Types aus anderen Grnden erzwingen und bestimmte Skriptquellen zulassen mchten, die durch CSP: script-src erlaubt wurden.

Trusted Types werden noch nicht von allen Browsern untersttzt. Deshalb definieren wir zunchst den Trusted-Types-Tinyfill. Er dient als transparenter Ersatz fr die Trusted Types JavaScript API:

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

Anschlieend erstellen wir eine TrustedTypePolicy, die eine Methode createScript() definiert, um Eingabezeichenfolgen in TrustedScript-Instanzen umzuwandeln.

Fr dieses Beispiel nehmen wir an, dass eine Funktion transformedScript() unsere Transformations- und Filterlogik definiert.

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

Dann verwenden wir das Objekt policy, um aus einer potenziell unsicheren Eingabezeichenfolge ein TrustedScript-Objekt 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 nun an eval() bergeben werden:

eval(trustedScript);

Verwendung von eval()

Im folgenden Code geben beide Anweisungen, die eval() enthalten, den Wert 42 zurck. Die erste wertet die Zeichenfolge "x + y + 1" aus, die zweite die Zeichenfolge "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 ist dies der zuletzt ausgewertete Ausdruck oder die zuletzt ausgewertete Anweisung.

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 wertet eval() die Zeichenfolge str aus. Sie besteht aus JavaScript-Anweisungen, die z den Wert 42 zuweisen, wenn x gleich fnf ist, und andernfalls z den Wert 0 zuweisen. Bei der Ausfhrung der zweiten Anweisung fhrt eval() diese Anweisungen aus, wertet die Anweisungsfolge aus und gibt den Wert zurck, der z zugewiesen wurde. Das liegt daran, dass 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

Bei eval() bentigt eine Zeichenfolge, die eine Funktion definiert, ( 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

• Eigenschaftszugriff
• WebExtensions: Verwendung von eval in Content Scripts