Comments (7)
The only general solution is base64 (or some other safe serialisation). Otherwise e.g. strings that contain HTML will be rendered by the browser rather than treated as part of the JSON regardless of how the JS parses it.
from microsite.
The other solutions are viable.
The special token solution is used in multipart payloads (eg every time you submit an HTML form with file upload or open an HTML email, so ~every day for regular internet users), and the multiline string solution for most shells and many shell inspired languages.
Separating the markers from the props is just a hash map reference, the marker referencing a key in the hydration props payload. They all have tradeoffs. Base-64 has the most costly tradeoff but it’s the least impact to implement.
from microsite.
Another solution that’s probably a much bigger lift would be a huge win if possible: don’t mount with props at all. Effectively memoize on the server.
The big cost (for users) here is second render because you need a comparison algorithm that’s efficient, and JS doesn’t have one. The big cost (for devs) is accounting for that. But if you squint a little bit it’s actually not a big deal. Just mount noop on load and render on first lifecycle check and don’t worry about the diff. Or async trigger the second render on idle/visible. It’s the same expense with no payload at all.
And dang it feels good to be a gangsta check my own intuitions when they’re questioned.
from microsite.
Sorry I should have been more clear. I agree that the other solutions would work for the JSON parsing case, but my point is that it's worth doing the safe serialisation one because of a different problem (which the other methods can't solve):
The problem is that hydration props like:
{
"key": "<script>alert()</script>"
}
without safe serialisation will cause the script to be executed by the browser.
EDIT: Memoizing on the server effectively embeds the payload into JS, which also sidesteps this problem, so that's viable too.
from microsite.
That wouldn’t be a problem if the data is actually JSON treated as such, either:
- escaped in the way it already is
- serialized separately as a hashmap
- serialized with the component for async mount per my new suggestion
from microsite.
Actually you’re right there is a potential XSS (self own or not), JSON serialization doesn’t account for it. So some change in that regard is definitely warranted as well.
from microsite.
I think serializing into JS is the common theme here and regardless of the rest of the specifics it’s a clear win.
from microsite.
Related Issues (20)
- Remove defer from inline scripts HOT 3
- Move `microsite-templates` into this repo HOT 1
- Doesn't do the thing 🙃 HOT 3
- Partial hydration causes Preact to be fetched twice HOT 10
- production build fails when CSS module is imported on multiple pages HOT 2
- getStaticProps + node builtins + dev server fails HOT 1
- Preact import regex matches too much HOT 2
- Preact CDN lookup fails for non-hardcoded submodules HOT 1
- Enhancement: Support SSR-able components as props for hydrated components HOT 7
- getStaticPaths uses module’s path when returning params object HOT 1
- [RFC] Built-in Markdown/MDX Support HOT 2
- Dynamic routes won't work in dev mode HOT 4
- Hydrated component isn't initialized in prod builds when it is exported/imported under a name different from the name of the component it decorates HOT 6
- Make withHydrate a no-op when nested rather than an error
- Build fails with "Error: You must supply options.input to rollup"
- import.meta.env.SSR is true on the client HOT 1
- Preact modules are loaded with `modulepreload` even if they're not used
- dev server fails to load fetch HOT 1
- Add SCSS/SASS support?
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from microsite.