Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

ThemeProvider: Fix theming with SSR with CSRF safe approach #1913

Merged
merged 6 commits into from
Mar 7, 2022

Conversation

siddharthkp
Copy link
Member

@siddharthkp siddharthkp commented Mar 1, 2022

Following up on #1868, the approach I chose relied on injecting an inline script to set a variable. This doesn't work in github/docs-internal because secure applications prevent executing inline scripts injected in the DOM 😇

Inspired by __NEXT_DATA__ from next.js, I've changed the implementation to inject a <script type="application/json"> instead of <script type="text/javascript">.

Tested with docs-internal, it works!

@siddharthkp siddharthkp requested review from a team and rezrah March 1, 2022 14:54
@changeset-bot
Copy link

changeset-bot bot commented Mar 1, 2022

🦋 Changeset detected

Latest commit: 49d2970

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package
Name Type
@primer/react Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

@siddharthkp siddharthkp self-assigned this Mar 1, 2022
@siddharthkp siddharthkp added bug Something isn't working react labels Mar 1, 2022
@siddharthkp siddharthkp changed the title move to application/json approach ThemeProvider with SSR: Move to json apporach Mar 1, 2022
@siddharthkp siddharthkp changed the title ThemeProvider with SSR: Move to json apporach Fix theming with SSR with CSRF safe approach Mar 1, 2022
@github-actions
Copy link
Contributor

github-actions bot commented Mar 1, 2022

size-limit report 📦

Path Size
dist/browser.esm.js 64.31 KB (+0.12% 🔺)
dist/browser.umd.js 64.67 KB (+0.11% 🔺)

src/ThemeProvider.tsx Outdated Show resolved Hide resolved
src/ThemeProvider.tsx Outdated Show resolved Hide resolved
Copy link
Contributor

@colebemis colebemis left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks good! This is a clever trick 😅

Co-authored-by: Cole Bemis <colebemis@github.com>
@siddharthkp siddharthkp changed the base branch from main to next-major March 7, 2022 11:58
@siddharthkp siddharthkp changed the base branch from next-major to main March 7, 2022 11:58
@siddharthkp siddharthkp merged commit 92a0237 into main Mar 7, 2022
@siddharthkp siddharthkp deleted the siddharth/safe-theming-ssr branch March 7, 2022 12:25
This was referenced Mar 7, 2022
@siddharthkp siddharthkp changed the title Fix theming with SSR with CSRF safe approach ThemeProvider: Fix theming with SSR with CSRF safe approach Jun 3, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working react
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants