Fix prototype keys causing crash in color parsing and invalid colors in color coercion expressions

src/expression/evaluation_context.ts

@@ -20,7 +20,9 @@ export class EvaluationContext {
         this.feature = null;
         this.featureState = null;
         this.formattedSection = null;
-        this._parseColorCache = {};
+        // the cache keys are user controlled (from the source JSON), so
+        // avoid prototype pollution by creating a record with a null prototype
+        this._parseColorCache = Object.create(null) as {[_: string]: Color};
         this.availableImages = null;
         this.canonical = null;
     }

src/expression/types/parse_css_color.test.ts

@@ -31,6 +31,8 @@ describe('parseCssColor', () => {
             expect(parse('aqua-marine')).toBeUndefined();
             expect(parse('aqua_marine')).toBeUndefined();
             expect(parse('aqua marine')).toBeUndefined();
+            expect(parse('__proto__')).toBeUndefined();
+            expect(parse('valueOf')).toBeUndefined();
         });
 
     });

src/expression/types/parse_css_color.ts

@@ -1,3 +1,4 @@
+import {getOwn} from '../../util/get_own';
 import {HSLColor, hslToRgb, RGBColor} from './color_spaces';
 
 /**
@@ -37,7 +38,7 @@ export function parseCssColor(input: string): RGBColor | undefined {
     }
 
     // 'white', 'black', 'blue'
-    const namedColorsMatch = namedColors[input];
+    const namedColorsMatch = getOwn(namedColors, input);
     if (namedColorsMatch) {
         const [r, g, b] = namedColorsMatch;
         return [r / 255, g / 255, b / 255, 1];

test/integration/expression/tests/to-color/basic/test.json

@@ -23,6 +23,14 @@
         }
       }
     ],
+    [
+      {},
+      {
+        "properties": {
+          "x": "__proto__"
+        }
+      }
+    ],
     [
       {},
       {
@@ -85,6 +93,9 @@
       {
         "error": "Could not parse color from value 'invalid'"
       },
+      {
+        "error": "Could not parse color from value '__proto__'"
+      },
       [
         0,
         1,

test/integration/style-spec/tests/bad-color.input.json

@@ -25,6 +25,22 @@
       "paint": {
         "fill-outline-color": ["darken", 10, "#FF0000"]
       }
+    },
+    {
+      "id": "prototype",
+      "type": "fill",
+      "source": "vector",
+      "source-layer": "layer",
+      "paint": {
+        "fill-color": "__proto__",
+        "fill-outline-color":  {
+          "property": "fill",
+          "stops": [
+            [{ "zoom": 10, "value": 10 }, "valueOf"],
+            [{ "zoom": 11, "value": 20 }, "__proto__"]
+          ]
+        }
+      }
     }
   ]
 }

test/integration/style-spec/tests/bad-color.output.json

@@ -10,5 +10,17 @@
   {
     "message": "layers[1].paint.fill-outline-color: color expected, array found",
     "line": 26
+  },
+  {
+    "message": "layers[2].paint.fill-color: color expected, \"__proto__\" found",
+    "line": 35
+  },
+  {
+    "message": "layers[2].paint.fill-outline-color.stops[0][1]: color expected, \"valueOf\" found",
+    "line": 39
+  },
+  {
+    "message": "layers[2].paint.fill-outline-color.stops[1][1]: color expected, \"__proto__\" found",
+    "line": 40
   }
 ]

test/integration/style-spec/tests/light-malformed-color.input.json

@@ -0,0 +1,16 @@
+{
+  "version": 8,
+  "sources": {
+    "vector": {
+      "type": "vector",
+      "url": "https://demotiles.maplibre.org/tiles/tiles.json"
+    }
+  },
+  "light": {
+    "anchor": "map",
+    "position": [1, 90, 90],
+    "color": "__proto__",
+    "intensity": 0.75
+  },
+  "layers": []
+}

test/integration/style-spec/tests/light-malformed-color.output.json

@@ -0,0 +1,6 @@
+[
+  {
+    "message": "color: color expected, \"__proto__\" found",
+    "line": 12
+  }
+]