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

CHANGELOG.md

@@ -5,8 +5,11 @@
 
 ### 🐞 Bug fixes
 - Fix RuntimeError class, make it inherited from Error ([#983](https://github.com/maplibre/maplibre-style-spec/issues/983))
-- Fix `validate_object` crashing when object prototype keys used in style's objects ([#1028](https://github.com/maplibre/maplibre-style-spec/pull/1028))
-- Validate that `layers` array items are objects instead of throwing an error if not ([!1026](https://github.com/maplibre/maplibre-style-spec/pull/1026))
+- Validate that `layers` array items are objects instead of throwing an error if not ([#1026](https://github.com/maplibre/maplibre-style-spec/pull/1026))
+- Multiple fixes related to validating and parsing of strings containing object prototype keys
+   - Fix `validate_object` crashing when object prototype keys used in style's objects ([#1028](https://github.com/maplibre/maplibre-style-spec/pull/1028))
+   - Fix `validate_color` crashing when object prototype keys used as color strings ([#1036](https://github.com/maplibre/maplibre-style-spec/pull/1036))
+   - Fix color coercion in expressions (e.g. `to_color`) producing invalid colors when object prototype keys used as color strings ([#1036](https://github.com/maplibre/maplibre-style-spec/pull/1036))
 
 ## 23.1.0
 

src/expression/evaluation_context.ts

@@ -13,14 +13,14 @@ export class EvaluationContext {
     availableImages: Array<string>;
     canonical: ICanonicalTileID;
 
-    _parseColorCache: {[_: string]: Color};
+    _parseColorCache: Map<string, Color>;
 
     constructor() {
         this.globals = null;
         this.feature = null;
         this.featureState = null;
         this.formattedSection = null;
-        this._parseColorCache = {};
+        this._parseColorCache = new Map<string, Color>();
         this.availableImages = null;
         this.canonical = null;
     }
@@ -46,9 +46,10 @@ export class EvaluationContext {
     }
 
     parseColor(input: string): Color {
-        let cached = this._parseColorCache[input];
+        let cached = this._parseColorCache.get(input);
         if (!cached) {
-            cached = this._parseColorCache[input] = Color.parse(input);
+            cached = Color.parse(input);
+            this._parseColorCache.set(input, cached);
         }
         return cached;
     }

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
+  }
+]