RevereCRE/relay-nextjs

Usage with CSP

Closed this issue · 3 comments

FINDarkside commented

Have to start by thanking for this great library!

I'm wondering why this injects script tag in the head instead of putting the data inside __NEXT_DATA__? Only stumbled on this because our CSP blocks the inline script meaning that hydration fails.

Would you accept PR for one of the following:

  • Put state inside __NEXT_DATA__ instead of custom script tag
  • Use type="application/json" script tag instead, so it doesn't get blocked by CSP
  • Add optional nonce prop to WiredDocument.Script to make it possible to use safe CSP with this. Assuming that there's some reason for the current choices, this would likely be the best approach.
rrdelaney commented

We don't use CSP at Revere so this actually hasn't come up for us yet! I'd gladly accept a PR for a nonce prop to WiredDocument.Script, I think that's a pretty elegant solution 😄

Regarding __NEXT_DATA__, it's managed by Next.js and I'm not sure we can throw our own data in there.

FINDarkside commented

Yeah turns out this lib is already passing the required props to the script tags, it's just the interface that lacks the prop types. I'll make pr soon :)

Regarding NEXT_DATA, it's managed by Next.js and I'm not sure we can throw our own data in there.

I believe everything returned by getInitialProps is put in there automatically as long as it can be serialized to json.

rrdelaney commented

Ah yea this library doesn't use getInitialProps for the store state. We render first then extract records as-is and dump them into the global script. I'm not sure we could move the extraction into getInitialProps mostly just due to ordering of render and when props are available, but even if we did it would rely on the exact format of __NEXT_DATA__, which might change from under us.

  • 👍1