script

Ein String, der einen JavaScript-Ausdruck, eine Anweisung oder eine Sequenz von Anweisungen darstellt. Der Ausdruck kann Variablen und Eigenschaften bestehender Objekte enthalten. Er wird als Skript geparst, sodassimport-Deklarationen (die nur in Modulen existieren können) nicht erlaubt sind.

Der Abschlusswert der Auswertung des gegebenen Codes. Wenn der Abschlusswert leer ist, wirdundefined zurückgegeben. Wennscript kein String-Primitiv ist, gibteval() das Argument unverändert zurück.

Wirft jede Ausnahme, die während der Auswertung des Codes auftritt, einschließlichSyntaxError, wennscript nicht als Skript geparst werden kann.

eval() ist eine Funktions-Eigenschaft des globalen Objekts.

Das Argument dereval()-Funktion ist ein String. Er wird die Quell-Zeichenfolge als Skriptkörper auswerten, was bedeutet, dass sowohl Anweisungen als auch Ausdrücke erlaubt sind. Es gibt den Abschlusswert des Codes zurück. Für Ausdrücke 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 vonlet ist undefiniert), daher wird empfohlen, sich nicht auf Abschlusswerte von Anweisungen zu verlassen.

Im strikten Modus ist das Deklarieren einer Variablen namenseval oder das Neuzuweisen voneval einSyntaxError.

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

Wenn das Argument voneval() kein String ist, gibteval() das Argument unverändert zurück. Im folgenden Beispiel führt das Übergeben einesString-Objekts anstelle eines primitiven Strings dazu, dasseval() dasString-Objekt zurückgibt, anstatt die Zeichenfolge auszuwerten.

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, können Siedas Argument in einen String umwandeln, bevor Sie es aneval() übergeben.

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

Es gibt zwei Modi voneval()-Aufrufen:direkte eval undindirekte eval. Direkte eval bezieht sich darauf, die globaleeval-Funktiondirekt miteval(...) aufzurufen. Alles andere, einschließlich der Verwendung über eine aliasierte Variable, über einen Memberzugriff oder einen anderen Ausdruck oder über den Optional Chaining?.-Operator, ist indirekt.

// Direct calleval("x + y");// Indirect call using the comma operator to return eval(0, eval)("x + y");// Indirect call through optional chainingeval?.("x + y");// Indirect call using a variable to store and return evalconst myEval = eval;myEval("x + y");// Indirect call through member accessconst obj = { eval };obj.eval("x + y");

Indirekte eval kann so gesehen werden, als ob der Code in einem separaten<script>-Tag ausgewertet wird. Das bedeutet:

• Indirekte eval arbeitet im globalen Bereich statt im lokalen Bereich, und der ausgewertete 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}

• Indirekteseval erbt keine Striktheit des umgebenden Kontexts und ist nur imstrikten Modus, wenn die Quell-Zeichenfolge selbst eine"use strict"-Direktive enthält.

  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.141592653589793strictContext(); // Logs 3.141592653589793strictContextStrictEval(); // Uncaught SyntaxError: Strict mode code may not include a with statement

  Auf der anderen Seite erbt direktes 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.141592653589793strictContext(); // Uncaught SyntaxError: Strict mode code may not include a with statementstrictContextStrictEval(); // Uncaught SyntaxError: Strict mode code may not include a with statement

• var-deklarierte Variablen undFunktionsdeklarationen gehen in den umgebenden Bereich, wenn die Quell-Zeichenfolge nicht im strikten Modus interpretiert wird — bei indirektem eval werden sie zu globalen Variablen. Wenn es sich um ein direktes eval in einem strikten Moduskontext handelt, oder wenn dieeval-Quell-Zeichenfolge selbst im strikten Modus ist, dann "leaken"var und Funktionsdeklarationen nicht in den umgebenden Bereich.

  js

  // Neither context nor source string is strict,// so var creates a variable in the surrounding scopeeval("var a = 1;");console.log(a); // 1// Context is not strict, but eval source is strict,// so b is scoped to the evaluated scripteval("'use strict'; var b = 1;");console.log(b); // ReferenceError: b is not definedfunction 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); // 1console.log(d); // ReferenceError: d is not defined

  let undconst-Deklarationen innerhalb der ausgewerteten Zeichenfolge sind immer auf dieses Skript beschränkt.

• Direktes eval kann Zugriff auf zusätzliche kontextuelle Ausdrücke haben. Zum Beispiel in einem Funktionskörper kann mannew.target verwenden:

  js

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

Die Verwendung von direktereval() hat mehrere Probleme:

• eval() führt den übergebenen Code mit den Berechtigungen des Aufrufers aus. Wenn Sieeval() mit einem String ausführen, der von einer böswilligen Partei beeinflusst werden könnte, können Sie am Ende bösartigen Code auf dem Computer des Benutzers mit den Berechtigungen Ihrer Webseite / Erweiterung ausführen. Noch wichtiger ist, dass das Zulassen von Drittcode den Zugriff auf den Bereich, in demeval() aufgerufen wurde (wenn es sich um eine direkte eval handelt), führen kann, was zu möglichen Angriffen führen kann, die lokale Variablen lesen oder ändern.
• eval() ist langsamer als die Alternativen, da es den JavaScript-Interpreter aufrufen muss, während viele andere Konstrukte von modernen JS-Engines optimiert werden.
• Moderne JavaScript-Interpreter konvertieren JavaScript in Maschinencode. Das bedeutet, dass jegliches Konzept von Variablennamen zerstört wird. Daher zwingt jede Verwendung voneval() den Browser zu langen, teuren Variablennamenssuchen, um herauszufinden, wo die Variable im Maschinencode existiert und ihren Wert zu setzen. Zusätzlich können durcheval() neue Dinge in diese Variable eingefügt werden, wie etwa das Ändern des Variablentyps, was den Browser dazu zwingt, den gesamten erzeugten Maschinencode neu zu bewerten.
• Minifier geben jegliche Minifizierung auf, wenn der Bereich transitiv voneval() abhängt, daeval() sonst die richtige Variable zur Laufzeit nicht lesen kann.

Es gibt viele Fälle, in denen die Verwendung voneval() oder verwandten Methoden optimiert oder ganz vermieden werden kann.

Verwendung von indirektem eval()

Betrachten Sie diesen Code:

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

Einfach nur indirektes eval zu verwenden und den strikten Modus zu erzwingen, 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 Code-Snippets scheinen auf die gleiche Weise zu funktionieren, aber das tun sie nicht; das erstere, das direkte eval verwendet, leidet unter mehreren Problemen.

• Es ist erheblich langsamer aufgrund umfassenderer Bereichsprüfungen. Beachten Siec: new Map() in der ausgewerteten Zeichenfolge. In der indirekten eval-Version wird das Objekt im globalen Bereich ausgewertet, sodass es für den Interpreter sicher ist, anzunehmen, dassMap sich auf den globalenMap()-Konstruktor bezieht, anstatt auf eine lokale Variable namensMap. Im Code, der direkte eval verwendet, kann der Interpreter dies jedoch nicht annehmen. Zum Beispiel bezieht sich im folgenden CodeMap in der ausgewerteten Zeichenfolge nicht aufwindow.Map().

  js

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

  Daher wird imeval()-Version des Codes der Browser gezwungen, den teuren Lookup-Aufruf zu machen, um zu überprüfen, ob es lokale Variablen namensMap() gibt.

• Wenn kein strikter Modus verwendet wird, werdenvar-Deklarationen innerhalb dereval()-Quelle zu Variablen im umgebenden Bereich. Dies führt zu schwer zu debuggenden Problemen, wenn die Zeichenfolge aus externen Eingaben stammt, insbesondere wenn es bereits eine Variable mit demselben Namen gibt.

• Direktes eval kann Bindungen im umgebenden Bereich lesen und ändern, was dazu führen kann, dass externe Eingaben lokale Daten beschädigen.

• Bei der Verwendung von direktemeval, insbesondere wenn die eval-Quelle nicht im strikten Modus sichergestellt werden kann, müssen die Engine und die Build-Tools alle Optimierungen im Zusammenhang mit Inlinefunktionen deaktivieren, da dieeval()-Quelle von jedem Variablennamen im umgebenden Bereich abhängen kann.

Die Verwendung von indirektemeval() erlaubt jedoch nicht das Übergeben von zusätzlichen Bindungen außer den existierenden globalen Variablen, die die ausgewertete Quelle lesen kann. Wenn Sie zusätzliche Variablen angeben müssen, auf die die ausgewertete Quelle Zugriff haben sollte, sollten Sie denFunction()-Konstruktor in Betracht ziehen.

Verwendung des Function-Konstruktors

DerFunction()-Konstruktor ist dem oben genannten indirekten eval-Beispiel sehr ähnlich: Er wertet auch die übergebene JavaScript-Quelle im globalen Bereich aus, ohne lokale Bindungen zu lesen oder zu ändern, und erlaubt es daher den Engines, mehr Optimierungen durchzuführen als bei direktemeval().

Der Unterschied zwischeneval() undFunction() ist, dass die anFunction() übergebene Quell-Zeichenfolge als Funktionskörper und nicht als Skript geparst wird. Es gibt einige Nuancen — zum Beispiel können Siereturn-Anweisungen auf oberster Ebene eines Funktionskörpers verwenden, aber nicht in einem Skript.

DerFunction()-Konstruktor ist nützlich, wenn Sie lokale Bindungen innerhalb Ihrer eval-Quelle erstellen möchten, 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

Sowohleval() als auchFunction() werten implizit beliebigen Code aus und sind in striktenCSP-Einstellungen verboten. Es gibt auch zusätzliche sicherere (und schnellere!) Alternativen zueval() oderFunction() für häufige Anwendungsfälle.

Verwendung von Klammerzugriff

Sie sollteneval() nicht verwenden, um Eigenschaften dynamisch zuzugreifen. Betrachten Sie das folgende Beispiel, bei dem die Eigenschaft des Objekts, auf das zugegriffen werden soll, erst zur Ausführungszeit bekannt ist. Dies kann miteval() erfolgen:

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

Hier ist jedocheval() nicht notwendig — in der Tat ist es fehleranfälliger, da, wennpropName kein gültiger Bezeichner ist, es zu einem Syntaxfehler führt. Darüber hinaus, wenngetPropName keine Funktion ist, die Sie steuern, kann dies zur Ausführung von beliebigem Code führen. Verwenden Sie stattdessen dieEigenschafts-Zugriffsoperatoren, 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

Mit dieser Methode können Sie sogar auf untergeordnete Eigenschaften zugreifen. Miteval() würde dies folgendermaßen aussehen:

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

eval() hier zu vermeiden, könnte durch das Aufteilen des Eigenschaftspfads und das Schleifen durch die verschiedenen Eigenschaften erreicht werden:

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 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 die Verwendung von Klammerzugriffen mit unbeschränktem Input ebenfalls nicht sicher ist — es kann zuObjekt-Injection-Angriffen führen.

Verwendung von Rückrufen

JavaScript haterstklassige Funktionen, was bedeutet, dass Sie Funktionen als Argumente an andere APIs übergeben, sie in Variablen und Objekteigenschaften speichern und so weiter können. Viele DOM-APIs sind mit diesem Gedanken entworfen, sodass Sie (und sollten) Folgendes schreiben:

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

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

Verwendung von JSON

Wenn der String, den Sie miteval() aufrufen, Daten enthält (zum Beispiel ein Array:"[1, 2, 3]"), im Gegensatz zu Code, sollten Sie in Erwägung ziehen, aufJSON umzusteigen, das es der Zeichenfolge ermöglicht, ein Unterset aus JavaScript-Syntax zu verwenden, um Daten darzustellen.

Beachten Sie, dass die JSON-Syntax im Vergleich zur JavaScript-Syntax eingeschränkt ist, sodass viele gültige JavaScript-Literale nicht als JSON geparst werden. Zum Beispiel sind nachgestellte Kommas in JSON nicht erlaubt, und Eigenschaftsnamen (Schlüssel) in Objekt-Literalen müssen in Anführungszeichen eingeschlossen sein. Stellen Sie sicher, dass Sie einen JSON-Serializer verwenden, um Zeichenfolgen zu generieren, die später als JSON geparst werden.

Es ist im Allgemeinen eine gute Idee, vorsichtig eingeschränkte Daten anstelle von beliebigem Code zu übergeben. Zum Beispiel könnte eine Erweiterung, die Inhalte von Webseiten extrahiert, die Extraktionsregeln inXPath anstelle von JavaScript-Code definiert haben.

Im folgenden Code geben beide Anweisungen, dieeval() enthalten, 42 zurück.Die erste wertet die Zeichenfolge"x + y + 1" aus; die zweite wertet die Zeichenfolge"42" aus.

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

eval() gibt den Abschlusswert von Anweisungen zurück. Beiif ist es der letzte ausgewertete Ausdruck oder die Anweisung.

const str = "if (a) { 1 + 1 } else { 1 + 2 }";let a = true;let b = eval(str);console.log(`b is: ${b}`); // b is: 2a = false;b = eval(str);console.log(`b is: ${b}`); // b is: 3

Das folgende Beispiel verwendeteval(), um die Zeichenfolgestr auszuwerten. Diese Zeichenfolge besteht aus JavaScript-Anweisungen, diez einen Wert von 42 zuweisen, wennx fünf ist, und andernfalls 0 zuweisen. Wenn die zweite Anweisung ausgeführt wird, werden diese Anweisungen durcheval() ausgeführt und auch ausgewertet. Der Wert, derz zugewiesen wird, wird zurückgegeben, 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 zurückgegeben.

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

• Eigenschafts-Zugriffsoperatoren
• WebExtensions: Verwenden von eval in Inhalts-Skripten