[DataGrid] Fix eval blocked by CSP

packages/grid/x-data-grid/src/hooks/features/filter/gridFilterUtils.ts

@@ -25,6 +25,14 @@ import {
   gridVisibleColumnFieldsSelector,
 } from '../columns';
 
+let hasEval: boolean;
+try {
+  // eslint-disable-next-line no-eval
+  hasEval = eval('true');
+} catch (_: unknown) {
+  hasEval = false;
+}
+
 type GridFilterItemApplier =
   | {
       v7: false;
@@ -240,21 +248,23 @@ export const buildAggregatedFilterItemsApplier = (
     return null;
   }
 
-  // Original logic:
-  // return (row, shouldApplyFilter) => {
-  //   const resultPerItemId: GridFilterItemResult = {};
-  //
-  //   for (let i = 0; i < appliers.length; i += 1) {
-  //     const applier = appliers[i];
-  //     if (!shouldApplyFilter || shouldApplyFilter(applier.item.field)) {
-  //       resultPerItemId[applier.item.id!] = applier.v7
-  //         ? applier.fn(row)
-  //         : applier.fn(getRowId ? getRowId(row) : row.id);
-  //     }
-  //   }
-  //
-  //   return resultPerItemId;
-  // };
+  if (!hasEval) {
+    // This is the original logic, which is used if `eval()` is not supported (aka prevented by CSP).
+    return (row, shouldApplyFilter) => {
+      const resultPerItemId: GridFilterItemResult = {};
+
+      for (let i = 0; i < appliers.length; i += 1) {
+        const applier = appliers[i];
+        if (!shouldApplyFilter || shouldApplyFilter(applier.item.field)) {
+          resultPerItemId[applier.item.id!] = applier.v7
+            ? applier.fn(row)
+            : applier.fn(getRowId ? getRowId(row) : row.id);
+        }
+      }
+
+      return resultPerItemId;
+    };
+  }
 
   // We generate a new function with `eval()` to avoid expensive patterns for JS engines
   // such as a dynamic object assignment, e.g. `{ [dynamicKey]: value }`.

test/e2e/fixtures/DataGrid/FilterEval.tsx

@@ -0,0 +1,49 @@
+/*
+ * NOTE: This test requires that a CSP preventing `eval()` be present to be useful.
+ * See ../template.html for the CSP meta tag.
+ */
+
+import * as React from 'react';
+import { DataGrid } from '@mui/x-data-grid';
+
+const baselineProps = {
+  rows: [
+    {
+      id: 0,
+      brand: 'Nike',
+      year: 1990,
+    },
+    {
+      id: 1,
+      brand: 'Adidas',
+      year: 1995,
+    },
+    {
+      id: 2,
+      brand: 'Puma',
+      year: 1993,
+    },
+    {
+      id: 3,
+      brand: 'Gucci',
+      year: 1996,
+    },
+  ],
+  columns: [
+    { field: 'brand', width: 120 },
+    { field: 'year', width: 120 },
+  ],
+};
+
+export default function FilterEval() {
+  return (
+    <div style={{ width: 400, height: 200 }}>
+      <DataGrid
+        {...baselineProps}
+        filterModel={{
+          items: [{ field: 'brand', operator: 'contains', value: 'Nike' }],
+        }}
+      />
+    </div>
+  );
+}

test/e2e/template.html

@@ -4,6 +4,7 @@
     <title>Playwright end-to-end test</title>
     <meta charset="utf-8" />
     <meta name="viewport" content="minimum-scale=1, initial-scale=1, width=device-width" />
+    <meta http-equiv="Content-Security-Policy" content="default-src 'self'; img-src *">
     <style>
       body {
         background-color: white;