Fix prototype keys causing crash in color parsing and invalid colors in color coercion expressions (#1036)

* Fix error thrown when validating certain color strings

parseCssColor checks `namedColors[input]` to see if the given color
string is a predetermined named color. If "__proto__" or any other key
found in Object.prototype was used, the evaluated value was truthy, and
the function attempted to destructure the returned value, which throws
an error.

This commit fixes that issue by using getOwn() to access only own
properties of the namedColors object.

* Fix color coercion expressions returning array of nulls

Color coercion (Coercion class) uses EvaluationContext.parseColor to
parse color strings. EvaluationContext has an internal cache for color
strings, which it checks before parsing to skip parsing the same value
multiple times.

If a color coercion expression was passed "__proto__" or some other key
present in Object.prototype, the parseColor function would skip parsing
altogether as this._parseColorCache["__proto__"] evaluated to a truthy
value, and thus parseColor thought the value was cached and returned the
evaluated value directly.

This caused the entire coercion expression to evaluate to the value of
Object.prototype, which in the end resulted in the color being
[null, null, null, null] somewhere in maplibre-gl-js.

Fixed by creating the cache with a null prototype, instead of an empty
object literal.

* Update CHANGELOG.md

* Group prototype key related fixes in CHANGELOG.md

* Use Map instead of an object in EvaluationContext's cache

Author: cxcorp

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