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

Add nonce support #1566

Merged
merged 4 commits into from
Mar 23, 2022
Merged

Add nonce support #1566

merged 4 commits into from
Mar 23, 2022

Conversation

Okhoshi
Copy link
Contributor

@Okhoshi Okhoshi commented Apr 3, 2021

Redoc is broken if the page where it loads has CSP, in particular style-src directives. If inline styles are forbidden by the CSPs, the browser will refuse to load them, and Styled-Components won't work at all.

Styled-components already support CSPs by reading a nonce from __webpack_nonce__ to apply it on every injected style tag. However, there's no way to configure this nonce with Redoc.

This is what I added in this PR. The nonce can either be filled in the HTML with a nonce attribute (similarly to other HTML elements like script or styles) or provided in the options object.

Copy link
Member

@RomanHotsiy RomanHotsiy left a comment

Choose a reason for hiding this comment

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

Looks great!

Could you please resolve a few minor comments? Thanks!

README.md Outdated Show resolved Hide resolved
@@ -43,6 +45,10 @@ export class RedocStandalone extends React.PureComponent<RedocStandaloneProps> {

const normalizedOpts = new RedocNormalizedOptions(options);

if (normalizedOpts.nonce !== undefined) {
__webpack_nonce__ = normalizedOpts.nonce;
Copy link
Member

Choose a reason for hiding this comment

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

It may crash with ReferenceError in non-webpack env, e.g. when used by redoc-cli. We should add a check if the __webpack_nonce__ is defined.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

I had to use try/catch because __webpack_nonce__ is initially set to undefined making disambiguation between variable being declared but not set and not being declared at all very hard.

If you have a better way, I'm open to suggestion.

src/components/RedocStandalone.tsx Show resolved Hide resolved
@Okhoshi Okhoshi force-pushed the add-nonce-support branch 2 times, most recently from fe94fe6 to 56f3f46 Compare April 30, 2021 20:37
@Okhoshi
Copy link
Contributor Author

Okhoshi commented Apr 30, 2021

@RomanHotsiy Thanks for the review ! I made the requested changes.

@Okhoshi
Copy link
Contributor Author

Okhoshi commented Aug 10, 2021

ping @RomanHotsiy

README.md Outdated Show resolved Hide resolved
Signed-off-by: Quentin Devos <4972091+Okhoshi@users.noreply.github.com>
Signed-off-by: Quentin Devos <4972091+Okhoshi@users.noreply.github.com>
Signed-off-by: Quentin Devos <4972091+Okhoshi@users.noreply.github.com>
@AlexVarchuk AlexVarchuk requested review from RomanHotsiy and removed request for RomanHotsiy March 23, 2022 15:58
@Oprysk Oprysk dismissed RomanHotsiy’s stale review March 23, 2022 15:59

already reviewed

@AlexVarchuk AlexVarchuk merged commit c75ac9c into Redocly:master Mar 23, 2022
@Okhoshi Okhoshi deleted the add-nonce-support branch March 23, 2022 16:04
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants