mapbox / mapbox/mapbox-gl-js

Using 'clusterProperties' can fail with 'can't serialize object of unregistered class' if created in an iframe

Open
#10,046 2 comments 3 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

bug :lady_beetle:
Dominant language
TypeScript
Stars
12.4k
Forks
2.4k
PR merge metrics
No merged PRs in 30d

Description

The following example will fail if called from a script which has been loaded in an iframe:
```
map.addSource('earthquakes', {
'type': 'geojson',
'data':
'https://docs.mapbox.com/mapbox-gl-js/assets/earthquakes.geojson',
'cluster': true,
'clusterRadius': 80,
'clusterProperties': {
'mag1': ['+', ['case', mag1, 1, 0]],
'mag2': ['+', ['case', mag2, 1, 0]],
'mag3': ['+', ['case', mag3, 1, 0]],
'mag4': ['+', ['case', mag4, 1, 0]],
'mag5': ['+', ['case', mag5, 1, 0]]
}
});
```
The error is thrown from [web_worker_transfer.js:60](https://github.com/mapbox/mapbox-gl-js/blob/v1.12.0/src/util/web_worker_transfer.js#L60) because the serialization code expects the property `_classRegistryKey` to be set on the `clusterProperties` object's prototype.

However, an object created in a different iframe has a completely different prototype, and so the `_classRegistryKey` is absent and the serialization routine fails.

# Workaround

The workaround is to add the following line to the JavaScript evaluated in different iframes that needs to interact with MapBox JS GL:

```
Object._classRegistryKey = 'Object';
```

As far as I know there isn't a reliable way to check for an object literal, so perhaps this could just be documented somewhere.

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start with src/util/web_worker_transfer.js around line 60 and reproduce the clusterProperties failure from an iframe using the example in the issue. Determine whether cross-iframe object serialization should be handled there or documented, then verify the chosen behavior against the reported error and workaround.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript, typescript
Domain
frontend, web-dev
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
38/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.