ember-fastboot / ember-fastboot/ember-cli-fastboot

Shoebox.put/retrieve fail for invalid CSS selectors

Open
#846 0 comments 0 reactions 0 assignees View on GitHub
Dominant language
JavaScript
Stars
850
Forks
161
Avg merge
17h 45m
Merged PRs (30d)
19

Description

When using fastboot shoebox to load initial data for a detail route, if the key value includes invalid css, shoebox.put() will fail due to the underlying querySelect not recognizing the characters.

For example, one way to add shoebox to a model route is to include it in an adapter such as [shown here](https://github.com/ember-fastboot/ember-cli-fastboot#solution-application-adapter).

When a user navigates to `mysite.com/myroute/abc`, where the route uses `store.findRecord('modelname', param_id)`, the adapter will check shoebox and/or put the fetched item into it for future retrieval.

The problem arises when a user attempts to navigate to an invalid model id such as `mysite.com/myroute/%3Cabc`

`%3C` is invalid css and so `document.querySelector()` will fail.

Whereas we want the site to gracefully recognize that a record doesn't exist for that id, and render a 404, instead fastboot will crash due to [L41 here](https://github.com/ember-fastboot/ember-cli-fastboot/blob/master/packages/ember-cli-fastboot/addon/services/fastboot.js#L41).

To fix this issue we need to CSS escape the key prior to inserting it into the shoebox store, and likewise unescape it when we pull it out.

Unfortunately node doesn't have a CSS.escape() natively, so we could use a shim based off the mozilla shim, or use the mozilla shim directly.
https://developer.mozilla.org/en-US/docs/Web/API/CSS/escape
https://github.com/mathiasbynens/CSS.escape/blob/master/css.escape.js
https://gist.github.com/burritoIand/440f537e057768b93d038665482b1ae8

The working solution then becomes:
```
key = CSSShim.escape(param_id);
...
this.fastboot.shoebox.put(key, result);
this.fastboot.shoebox.retrieve(CSSShim.escape(key));
```

If we added this to L41 above then there would be no need for handling it in userland.

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.