Skip to content

Commit 9e2b9d8

Browse files
compulimcompulim
authored
Support nonce in Content Security Policy (#62)
* Move to emotion and add nonce * Update doc for nonce * Add nonce * Add CSP directive * Add emotion key * Update entry * Update entry
1 parent 4cb6437 commit 9e2b9d8

34 files changed

+1439
-1748
lines changed

‎CHANGELOG.md

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,14 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
77

88
## [Unreleased]
99

10+
### Added
11+
12+
- Support `nonce` prop for [Content Security Policy](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy), in PR [#62](https://github.com/compulim/react-scroll-to-bottom/pull/62)
13+
14+
### Changed
15+
16+
- Moved from `glamor@2.20.40` to `create-emotion@10.0.27`, in PR [#62](https://github.com/compulim/react-scroll-to-bottom/pull/62)
17+
1018
## [3.0.0] - 2020-06-21
1119

1220
### Breaking changes

‎README.md

Lines changed: 81 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -15,9 +15,9 @@ Try out the demo at [https://compulim.github.io/react-scroll-to-bottom/](https:/
1515
## [3.0.0] - 2020-06-21
1616

1717
- `scrollToBottom`/`scrollToEnd`/`scrollToStart`/`scrollToTop` now accept an option `{ behavior: 'auto' | 'smooth' }`
18-
- Without the option, it is by default to artificial smooth scrolling (`smooth`), to keep existing behavior
19-
- This behavior may change in the future, by defaulting to discrete scrolling (`auto`), to better align with HTML `DOMElement.scrollIntoView` standard
20-
- During the transition, please always pass `{ behavior: 'smooth' }` to keep existing behavior
18+
- Without the option, it is by default to artificial smooth scrolling (`smooth`), to keep existing behavior
19+
- This behavior may change in the future, by defaulting to discrete scrolling (`auto`), to better align with HTML `DOMElement.scrollIntoView` standard
20+
- During the transition, please always pass `{ behavior: 'smooth' }` to keep existing behavior
2121

2222
## [2.0.0] - 2020-05-07
2323

@@ -26,34 +26,51 @@ Try out the demo at [https://compulim.github.io/react-scroll-to-bottom/](https:/
2626
# Sample code
2727

2828
```jsx
29-
import { css } from 'glamor';
29+
import { css } from 'emotion';
3030
import ScrollToBottom from 'react-scroll-to-bottom';
3131

3232
const ROOT_CSS = css({
3333
height: 600,
3434
width: 400
3535
});
3636

37-
export default props =>
38-
<ScrollToBottom className={ ROOT_CSS }>
39-
<p>Nostrud nisi duis veniam ex esse laboris consectetur officia et. Velit cillum est veniam culpa magna sit exercitation excepteur consectetur ea proident. Minim pariatur nisi dolore Lorem ipsum adipisicing do. Ea cupidatat Lorem sunt fugiat. Irure est sunt nostrud commodo sint.</p>
40-
<p>Duis consectetur ad in fugiat et aliquip esse adipisicing occaecat et sunt ea occaecat ad. Tempor anim consequat commodo veniam nostrud sunt deserunt adipisicing Lorem Lorem magna irure. Eu ut ipsum magna nulla sunt duis Lorem officia pariatur. Nostrud nisi anim nostrud ea est do nostrud cupidatat occaecat dolor labore do anim. Laborum quis veniam ipsum ullamco voluptate sit ea qui adipisicing aliqua sunt dolor nulla. Nulla consequat sunt qui amet. Pariatur esse pariatur veniam non fugiat laboris eu nulla incididunt.</p>
41-
<p>Laboris duis do consectetur aliquip non aliquip ad ad quis minim. Aute magna tempor occaecat magna fugiat culpa. Commodo id eiusmod ea pariatur consequat fugiat minim est anim. Ipsum amet ipsum eu nisi. Exercitation minim amet incididunt tempor do ut id in officia eu sit est. Dolor qui laboris laboris tempor sunt velit eiusmod non ipsum exercitation ut sint ipsum officia.</p>
37+
export default props => (
38+
<ScrollToBottom className={ROOT_CSS}>
39+
<p>
40+
Nostrud nisi duis veniam ex esse laboris consectetur officia et. Velit cillum est veniam culpa magna sit
41+
exercitation excepteur consectetur ea proident. Minim pariatur nisi dolore Lorem ipsum adipisicing do. Ea
42+
cupidatat Lorem sunt fugiat. Irure est sunt nostrud commodo sint.
43+
</p>
44+
<p>
45+
Duis consectetur ad in fugiat et aliquip esse adipisicing occaecat et sunt ea occaecat ad. Tempor anim consequat
46+
commodo veniam nostrud sunt deserunt adipisicing Lorem Lorem magna irure. Eu ut ipsum magna nulla sunt duis Lorem
47+
officia pariatur. Nostrud nisi anim nostrud ea est do nostrud cupidatat occaecat dolor labore do anim. Laborum
48+
quis veniam ipsum ullamco voluptate sit ea qui adipisicing aliqua sunt dolor nulla. Nulla consequat sunt qui amet.
49+
Pariatur esse pariatur veniam non fugiat laboris eu nulla incididunt.
50+
</p>
51+
<p>
52+
Laboris duis do consectetur aliquip non aliquip ad ad quis minim. Aute magna tempor occaecat magna fugiat culpa.
53+
Commodo id eiusmod ea pariatur consequat fugiat minim est anim. Ipsum amet ipsum eu nisi. Exercitation minim amet
54+
incididunt tempor do ut id in officia eu sit est. Dolor qui laboris laboris tempor sunt velit eiusmod non ipsum
55+
exercitation ut sint ipsum officia.
56+
</p>
4257
</ScrollToBottom>
58+
);
4359
```
4460

4561
> We use [`glamor`](https://github.com/threepointone/glamor/) for component styles. It is not required, but we don't support `style` props for performance reason.
4662
4763
## Props
4864

49-
| Name | Type | Default | Description |
50-
|-------------------------|----------|------------|------------------------------------------------------------------------------|
51-
| `checkInterval` | `number` | 150 | Recurring interval of stickiness check, in milliseconds (minimum is 17 ms) |
52-
| `className` | `string` | | Set the class name for the root element |
53-
| `debounce` | `number` | `17` | Set the debounce for tracking the `onScroll` event |
54-
| `followButtonClassName` | `string` | | Set the class name for the follow button |
55-
| `mode` | `string` | `"bottom"` | Set it to `"bottom"` for scroll-to-bottom, `"top"` for scroll-to-top |
56-
| `scrollViewClassName` | `string` | | Set the class name for the container element that house all `props.children` |
65+
| Name | Type | Default | Description |
66+
| ----------------------- | -------- | ---------- | ------------------------------------------------------------------------------------------------------------------------------ |
67+
| `checkInterval` | `number` | 150 | Recurring interval of stickiness check, in milliseconds (minimum is 17 ms) |
68+
| `className` | `string` | | Set the class name for the root element |
69+
| `debounce` | `number` | `17` | Set the debounce for tracking the `onScroll` event |
70+
| `followButtonClassName` | `string` | | Set the class name for the follow button |
71+
| `mode` | `string` | `"bottom"` | Set it to `"bottom"` for scroll-to-bottom, `"top"` for scroll-to-top |
72+
| `nonce` | `string` | | Set the nonce for [Content Security Policy](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy) |
73+
| `scrollViewClassName` | `string` | | Set the class name for the container element that house all `props.children` |
5774

5875
## Hooks
5976

@@ -173,19 +190,33 @@ const Content = () => {
173190

174191
return (
175192
<React.Fragment>
176-
<p>Labore commodo consectetur commodo et Lorem mollit voluptate velit adipisicing proident sit. Dolor consequat nostrud aliquip ea anim enim. Culpa quis tempor et quis esse proident cupidatat reprehenderit laborum ullamco.</p>
177-
<p>Incididunt labore nulla cupidatat occaecat elit esse occaecat culpa irure et nisi excepteur. Duis Lorem labore consectetur nostrud et voluptate culpa consequat enim reprehenderit. Id voluptate occaecat anim consequat id ea eiusmod laborum proident irure veniam esse. Aliquip nostrud culpa nostrud laborum cillum adipisicing dolore. Est tempor labore Lorem ad cupidatat reprehenderit exercitation pariatur officia ex adipisicing cupidatat exercitation.</p>
178-
<p>Est labore cupidatat exercitation est laboris et tempor Lorem irure velit ea commodo sint officia. Ullamco exercitation cillum est fugiat do. Enim qui eu veniam nostrud tempor elit. Duis elit mollit ut reprehenderit sit adipisicing proident culpa veniam sint veniam consectetur fugiat Lorem. Sint dolor proident commodo proident non cupidatat labore.</p>
193+
<p>
194+
Labore commodo consectetur commodo et Lorem mollit voluptate velit adipisicing proident sit. Dolor consequat
195+
nostrud aliquip ea anim enim. Culpa quis tempor et quis esse proident cupidatat reprehenderit laborum ullamco.
196+
</p>
197+
<p>
198+
Incididunt labore nulla cupidatat occaecat elit esse occaecat culpa irure et nisi excepteur. Duis Lorem labore
199+
consectetur nostrud et voluptate culpa consequat enim reprehenderit. Id voluptate occaecat anim consequat id ea
200+
eiusmod laborum proident irure veniam esse. Aliquip nostrud culpa nostrud laborum cillum adipisicing dolore. Est
201+
tempor labore Lorem ad cupidatat reprehenderit exercitation pariatur officia ex adipisicing cupidatat
202+
exercitation.
203+
</p>
204+
<p>
205+
Est labore cupidatat exercitation est laboris et tempor Lorem irure velit ea commodo sint officia. Ullamco
206+
exercitation cillum est fugiat do. Enim qui eu veniam nostrud tempor elit. Duis elit mollit ut reprehenderit sit
207+
adipisicing proident culpa veniam sint veniam consectetur fugiat Lorem. Sint dolor proident commodo proident non
208+
cupidatat labore.
209+
</p>
179210
{!sticky && <button onClick={scrollToBottom}>Click me to scroll to bottom</button>}
180211
</React.Fragment>
181212
);
182-
}
213+
};
183214

184215
export default () => (
185216
<ScrollToBottom>
186217
<Content />
187218
</ScrollToBottom>
188-
)
219+
);
189220
```
190221

191222
## Context
@@ -303,29 +334,47 @@ import ScrollToBottom from 'react-scroll-to-bottom';
303334
const Content = ({ scrollToBottom, sticky }) => {
304335
return (
305336
<React.Fragment>
306-
<p>Labore commodo consectetur commodo et Lorem mollit voluptate velit adipisicing proident sit. Dolor consequat nostrud aliquip ea anim enim. Culpa quis tempor et quis esse proident cupidatat reprehenderit laborum ullamco.</p>
307-
<p>Incididunt labore nulla cupidatat occaecat elit esse occaecat culpa irure et nisi excepteur. Duis Lorem labore consectetur nostrud et voluptate culpa consequat enim reprehenderit. Id voluptate occaecat anim consequat id ea eiusmod laborum proident irure veniam esse. Aliquip nostrud culpa nostrud laborum cillum adipisicing dolore. Est tempor labore Lorem ad cupidatat reprehenderit exercitation pariatur officia ex adipisicing cupidatat exercitation.</p>
308-
<p>Est labore cupidatat exercitation est laboris et tempor Lorem irure velit ea commodo sint officia. Ullamco exercitation cillum est fugiat do. Enim qui eu veniam nostrud tempor elit. Duis elit mollit ut reprehenderit sit adipisicing proident culpa veniam sint veniam consectetur fugiat Lorem. Sint dolor proident commodo proident non cupidatat labore.</p>
337+
<p>
338+
Labore commodo consectetur commodo et Lorem mollit voluptate velit adipisicing proident sit. Dolor consequat
339+
nostrud aliquip ea anim enim. Culpa quis tempor et quis esse proident cupidatat reprehenderit laborum ullamco.
340+
</p>
341+
<p>
342+
Incididunt labore nulla cupidatat occaecat elit esse occaecat culpa irure et nisi excepteur. Duis Lorem labore
343+
consectetur nostrud et voluptate culpa consequat enim reprehenderit. Id voluptate occaecat anim consequat id ea
344+
eiusmod laborum proident irure veniam esse. Aliquip nostrud culpa nostrud laborum cillum adipisicing dolore. Est
345+
tempor labore Lorem ad cupidatat reprehenderit exercitation pariatur officia ex adipisicing cupidatat
346+
exercitation.
347+
</p>
348+
<p>
349+
Est labore cupidatat exercitation est laboris et tempor Lorem irure velit ea commodo sint officia. Ullamco
350+
exercitation cillum est fugiat do. Enim qui eu veniam nostrud tempor elit. Duis elit mollit ut reprehenderit sit
351+
adipisicing proident culpa veniam sint veniam consectetur fugiat Lorem. Sint dolor proident commodo proident non
352+
cupidatat labore.
353+
</p>
309354
{!sticky && <button onClick={scrollToBottom}>Click me to scroll to bottom</button>}
310355
</React.Fragment>
311356
);
312-
}
357+
};
313358

314359
export default () => (
315360
<ScrollToBottom>
316361
<FunctionContext.Consumer>
317-
{({ scrollToBottom }) =>
362+
{({ scrollToBottom }) => (
318363
<StateContext.Consumer>
319-
{({ sticky }) =>
320-
<Content scrollToBottom={scrollToBottom} sticky={sticky} />
321-
}
364+
{({ sticky }) => <Content scrollToBottom={scrollToBottom} sticky={sticky} />}
322365
</StateContext.Consumer>
323-
}
366+
)}
324367
</FunctionContext.Consumer>
325368
</ScrollToBottom>
326-
)
369+
);
327370
```
328371

372+
# Security
373+
374+
We support nonce-based [Content Security Policy](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy). To enable, the following directive is required:
375+
376+
- [`style-src 'nonce-XXX'`](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/style-src)
377+
329378
# Road map
330379

331380
- [x] Easier customization for "scroll to bottom" button

‎package-lock.json

Lines changed: 24 additions & 18 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)