Added CSP nonce #1037

Zweder · 2019-01-01T16:38:24Z

I added a nonce property to DragDropContext which is added to the injected style tags to make this project work with strict ContentSecurityProtection settings

treshugart · 2019-01-07T22:40:44Z

Thanks, @Zweder. Alex will have a look at this when he's back. See #1010 for more details on his absence.

alexreardon · 2019-01-23T00:38:18Z

This looks good to me. I'll have a play. @Zweder can you confirm that this fixes #1050?

alexreardon · 2019-01-23T00:40:02Z

For now let's see if this resolves the issue. After that we will need to do some productisation:

commenting code to explain why nonce is there
adding to docs to explain nonce prop

alexreardon · 2019-01-25T03:56:23Z

There are a number of CSS in JS solutions that add css to a page without requiring this sort of thing. I think it would be worth looking into how they get around this issue

mechanicalbot · 2019-04-16T12:42:41Z

Hey @alexreardon
Since no better solution was proposed, maybe we will stick to that?
Is there anything I can do to merge this sooner?

alexreardon · 2019-04-23T01:14:11Z

Let's pick this up: #1050 (comment)

funktr0n · 2019-05-15T14:16:41Z

Hey guys, distant observer here but I just wanted to see where things were with this. Is this PR the only way forward for nonce support or are there other alternatives now?

Zweder · 2019-06-10T19:11:05Z

Right back on it. A cypress test will be up next

alexreardon · 2019-06-10T22:13:58Z

Heck yes!

…

On Tue, Jun 11, 2019 at 5:11 AM Zweder ***@***.***> wrote: Right back on it. A cypress test will be up next — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#1037?email_source=notifications&email_token=AAQU33K2WPUZ6CPA6A724STPZ2RMZA5CNFSM4GMX2LO2YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGODXK46OI#issuecomment-500551481>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AAQU33PTE7AWPY2WWFTOV6LPZ2RMZANCNFSM4GMX2LOQ> .

alexreardon · 2019-06-20T04:14:58Z

browser-test-harness.js

 process.on('exit', () => {
  storybook.kill();
+  standalone.kill();
 });

 waitPort({


can you explain this change?

standalone is a mini webpack server and client instance, the nonce has to be generated at the server

docs/api/drag-drop-context.md

alexreardon · 2019-06-20T04:17:01Z

package.json

@@ -130,6 +130,7 @@
    "stylelint-config-styled-components": "^0.1.1",
    "stylelint-processor-styled-components": "^1.8.0",
    "testcafe-reporter-xunit": "^2.1.0",
+    "uuid": "^3.3.2",


Can we just use a local sequence generator to avoid another dependency?

Eg:

let count = 0; function getId(): string { return `id-${count++}`; }

I should be a cryptographically save random number but to prove a test i will change it

This looks better i think

let count = 0; function getNonce(): string { return ThisShouldBeACryptographicallySecurePseudoRandomNumber-${count++}; }

alexreardon · 2019-06-20T04:19:04Z

Thanks for your hard work on this one. I think it is close to being good to go. I just had a few minor thoughts

cypress/integration/reorder-lists.spec.js

alexreardon · 2019-06-20T04:20:33Z

It is fantastic that we are actually testing this in a browser. Well done

test/standalone/server.js

alexreardon · 2019-06-20T04:23:27Z

test/standalone/webpack.config.js

+        test: /jsx?$/,
+        // type: "javascript/auto",
+        exclude: [/node_modules/],
+        use: [


can we defer to our standard babel rc file for this?

Yes, cleaned up

alexreardon · 2019-06-20T04:23:55Z

test/standalone/main.js

+const path = require('path');
+const config = require('./webpack.config');
+
+const fs = new MemoryFS();


why is this used?

This is the setup for the standalone webpack server and client, which run from memory saves a lot of pollution of output files

alexreardon · 2019-06-20T04:24:13Z

test/standalone/main.js

+const compiler = webpack(config);
+
+// $ExpectError
+compiler.outputFileSystem = fs;


can you explain this one to me? I am not a webpack ninja

I've never managed to get Flow happy about specifiing a outputFileSystem, but i dont like to cleanup everything webpack outputs

NFabrizio · 2019-09-03T15:50:23Z

Just a general question. Would it be preferable to either rely on a meta tag instead of a passed prop or allow both?

I ask this since there are a few other packages that pull in react-beautiful-dnd that may or may not allow the passing of a nonce from the consumer to the react-beautiful-dnd component.

A decent example of this is JSS which uses a meta tag named "csp-nonce". Here is how they are implementing their use of that meta tag.
https://github.com/cssinjs/jss/blob/0af646d31962518f9603493825d43f3410ff6c14/packages/jss/src/DomRenderer.js#L255

Their implementation allows downstream consumers to pass a nonce to their components effectively without having to rely on the middleman to pass the nonce through.

alexreardon · 2019-09-08T23:06:11Z

That seems really smart @NFabrizio. What do you think @Zweder ?

Zweder · 2019-09-09T09:31:25Z

You are right @NFabrizio, actually thats the whole idea behind this PR but in a different way. Accessing the dom is not efficient thats why you schould provide the nonce with the help of React.Context which in turn gets the nonce from a meta tag or something else. That means that you only access the dom once in the lifetime of the app, and you can reuse that context provider for every third party component that needs a nonce.

In src/test/standalone/server.js i do add a meta tag csp-nonce and in src/test/standalone/client.js it picks up the meta tag and provides the nonce to the DragDropContext in src/test/standalone/app.jsx without React.Context for simplicity

Zweder · 2019-09-09T10:57:05Z

@alexreardon It would be nice if you could find some time to review my commits

alexreardon · 2019-09-19T05:18:20Z

This looks good to me. Can we please target the dev branch? (12.0). It would be great to get this in!

Zweder · 2019-09-19T21:19:41Z

@alexreardon On it, i've got to fix the tests, the rest was a easy merge

Zweder · 2019-09-21T12:23:10Z

@alexreardon this PR is now in sync with the dev branch. Some tests are failing but are not related to this PR.

alexreardon · 2019-09-24T11:44:05Z

I'll try to take a look at this soon 👍

docs/guides/common-setup-issues.md

alexreardon · 2019-09-24T22:28:26Z

This is looking really good! One more thing: can you create a content-security-policy guide? Explaining what the problem is, and how you use a nonce to get going

alexreardon · 2019-09-24T22:29:12Z

#1317

alexreardon · 2019-09-26T01:16:01Z

If you do not have time, I can try to put something together

Zweder · 2019-09-26T05:31:33Z

I can make time upcoming weekend, it's not something I can do in 5min Op do 26 sep. 2019 03:16 schreef Alex Reardon <[email protected]>:

…

If you do not have time, I can try to put something together — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#1037?email_source=notifications&email_token=ADB7VR5Z5C4J7TP5IEP4S3TQLQEN5A5CNFSM4GMX2LO2YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOD7T5HHY#issuecomment-535286687>, or mute the thread <https://github.com/notifications/unsubscribe-auth/ADB7VR3KSEWCYGGWJLNZTH3QLQEN5ANCNFSM4GMX2LOQ> .

Zweder · 2019-09-30T17:48:01Z

I've added content-security-policy it's insired on the JSS CSP docs but it shows how to use it and explains what it's for. Have a look

alexreardon · 2019-10-02T00:20:21Z

Fantastic work on this!

alexreardon · 2019-10-02T01:11:10Z

👏 This will be going out in 12.0 #1487

Zweder van Dalen and others added 2 commits January 1, 2019 17:27

Added CSP nonce

7761553

Update style-marshal.js

5b5aac2

Merge branch 'master' into master

20a7e49

alexreardon mentioned this pull request Jan 23, 2019

CSP - style-src 'unsafe-inline' should not be required #1050

Closed

Zweder van Dalen added 3 commits June 10, 2019 19:11

Merge with master

dd5c239

Integrated CSP nonce support and tests

3e1f177

Cleanup eslint/flow

2dcbe74

Zweder van Dalen and others added 2 commits June 15, 2019 16:52

Added content-security-policy cypress tests

1e49041

Merge branch 'master' into master

85c007a

alexreardon reviewed Jun 20, 2019

View reviewed changes

docs/api/drag-drop-context.md Show resolved Hide resolved

alexreardon reviewed Jun 20, 2019

View reviewed changes

cypress/integration/reorder-lists.spec.js Outdated Show resolved Hide resolved

alexreardon reviewed Jun 20, 2019

View reviewed changes

test/standalone/server.js Outdated Show resolved Hide resolved

alexreardon reviewed Jun 20, 2019

View reviewed changes

Applied some fixes

9f3ec8a

Merged with master

425e00b

Merge branch 'master' into master

d800157

Merge branch 'master' into master

b944d96

Zweder changed the base branch from master to dev September 19, 2019 16:16

Zweder van Dalen added 6 commits September 21, 2019 11:14

Merge with dev branch

6a1bfb0

Merge branch 'master' of https://github.com/Zweder/react-beautiful-dnd

6692aa7

Insert nonce when you expect it

c43fbf8

Size snapshot and eslint fix

8e4dbeb

Fixed flowtypes and ran all tests

aac60fa

Updated size snaphot

8de114f

Zweder van Dalen added 2 commits September 23, 2019 12:01

Pulled in dev branch

da9782c

Fixed size snapshot

346db53

alexreardon reviewed Sep 24, 2019

View reviewed changes

docs/guides/common-setup-issues.md Outdated Show resolved Hide resolved

Merged dev branch and added CSP guide

53c3577

alexreardon merged commit 53b4599 into atlassian:dev Oct 2, 2019

MglMX mentioned this pull request Jul 12, 2021

Content Security Policy nonce option is not working mbrn/material-table#2066

Closed

Added CSP nonce #1037

Added CSP nonce #1037

Conversation

Zweder commented Jan 1, 2019

treshugart commented Jan 7, 2019

alexreardon commented Jan 23, 2019

alexreardon commented Jan 23, 2019

alexreardon commented Jan 25, 2019

mechanicalbot commented Apr 16, 2019

alexreardon commented Apr 23, 2019

funktr0n commented May 15, 2019

Zweder commented Jun 10, 2019

alexreardon commented Jun 10, 2019 via email

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

alexreardon commented Jun 20, 2019

alexreardon commented Jun 20, 2019

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

NFabrizio commented Sep 3, 2019

alexreardon commented Sep 8, 2019

Zweder commented Sep 9, 2019

Zweder commented Sep 9, 2019

alexreardon commented Sep 19, 2019

Zweder commented Sep 19, 2019

Zweder commented Sep 21, 2019

alexreardon commented Sep 24, 2019

alexreardon commented Sep 24, 2019

alexreardon commented Sep 24, 2019

alexreardon commented Sep 26, 2019

Zweder commented Sep 26, 2019 via email

Zweder commented Sep 30, 2019

alexreardon commented Oct 2, 2019

alexreardon commented Oct 2, 2019