CSP nonce value check

v6
1

I’ve tried passing a nonce value into the codemirror editor by using:
EditorView.cspNonce.of(“nonce-rAnd0m”).

However this still violates the CSP policy that’s defined (which includes the nonce: ‘nonce-rAnd0m’).

When running the debugger the internal StylesModule.mount method, it shows that the options parameter is undefined, suggesting that the cspNonce value was not picked from the cspNonce facet. So I’m wondering if I am setting the EditorView.cspNonce the right way or not?

2

It should be pretty straightforward to verify if you have the nonce in your configuration (state.facet(EditorView.cspNonce)). If it’s there, the code that passes it to StyleModule.mount is simple enough that I don’t really see any way it could go wrong.

3

Thank you, I managed to get it working. My syntax was correct, but I was using a React wrapper component and I was just setting the value in the wrong place (outside of the scope).

4

@keegan-ost Can you please provide an example of how you are able to get it working? I am also using React code mirror wrapper @uiw/react-codemirror and not sure how to set cspNonce value.

5

niteshtadepalli Sure so in the React wrapper you will need an extensions option. And you would pass down the csp Noce value like in the simplified example below:

import { EditorView } from "@codemirror/view";
import CodeMirror from "@uiw/react-codemirror";

<CodeMirror
      extensions={[ 
          EditorView.cspNonce.of("rAnd0mNonceVaue")
      ]}
/>
1 Like