ERROR EvalError: Refused to evaluate a string as JavaScript because 'unsafe-eval'

[Keith Rosenbauer]

Found a similar thread on the Angular side, but can't seem to locate any clarity on the React side:

https://www.syncfusion.com/forums/175275/error-evalerror-content-security-policy

We are running a Next.js app, and using both the DocumentEditor and Spreadsheet components.  By default, Next.js requires the unsafe-eval to be enabled when running 'next dev' with a Content Security Policy, so this is not visible until the app is built and run with 'next start (production).

I traced this down to the DocumentEditor and specifically tried opening the document via both the  DocumentEditorComponent and the DocumentEditorContainerComponent - doesn't seem to matter which one is used - they will both throw the error.  

EvalError: Refused to evaluate a string as JavaScript because 'unsafe-eval' is not an allowed source of script in the following Content Security Policy directive: "script-src .......

To work around, we need to turn on the 'unsafe-eval' option - but that is basically disabling the Content Security Policy, so not ideal.  Are there any current plans to resolve this issue with the DocumentEditor?  If not, can this be considered a request to fix?

Thanks!

DocumentEditorComponent implementation

<DocumentEditorComponent

height="100%"

created={onCreated}

ref={documentEditorComponent}

serviceUrl={`${process.env.NEXT_PUBLIC_SYNCFUSION_DOC_SERVER}`}

enableOptionsPane={true}

isReadOnly={false}

enableEditor={true}

enableContextMenu={true}

enablePrint={true}

></DocumentEditorComponent>

DocumentEditorContainerComponent implementation (Prefer this)

<DocumentEditorContainerComponent

height="100%"

width="100%"

created={onCreatedContainer}

ref={documentEditorContainer}

serviceUrl={`${process.env.NEXT_PUBLIC_SYNCFUSION_DOC_SERVER}`}

enableToolbar={false}

showPropertiesPane={false}

restrictEditing={true}

></DocumentEditorContainerComponent>

[Suriya Murugan]

Hi Keith,

We will update details shortly.

Regards,

Suriya M.

[Dhanush Sekar]

Hi Keith,

We are able to replicate the reported issue. We will update further details on this by September 5,2022.

Regards,

Dhanush Sekar

[Keith Rosenbauer]

Thank you very much for the updates!

[Keith Rosenbauer]

Checking back for an update on this.  Thanks!

[Suriya Murugan]

Hi Keith,

Apologies!

We are checking on it and will update details by September 8, 2022, without further delay.

Regards,

Suriya M.

[Suriya Murugan]

Hi Keith,

Please refer below documentation to overcome the CSP violation:

https://ej2.syncfusion.com/react/documentation/common/troubleshoot/content-security-policy/

Please let us know if you need any further assistance.

Regards,

Suriya M.

[Keith Rosenbauer]

That really isn't a solution per se, as I mentioned I'm already doing this as a workaround.  The whole concept of adding 'unsafe-eval' to your CSP reduces protection against cross-site scripting.  This is only an issue with the DocumentEditor, not the Spreadsheet component, so the Spreadsheet component is obviously not using eval().  Are there no plans to remove the eval() dependency in the DocumentEditor so that unsafe-eval is not required?

[Suriya Murugan]

Hi Keith,

Document editor already have enableCsp property. Can you please enable this property and let us know if you still facing issues?

Regards,

Suriya M.

[Keith Rosenbauer]

Even with that property (set to TRUE) and the unsafe-eval REMOVED from the CSP -> I'm still getting errors, so this does not appear to work.

I also notice that this property is only in the DocumentEditorContainer and not the DocumentEditor - not an issue right now as I'm using the DocumentEditorContainer -> but was planning on evaluating the DocumentEditor for the additional flexibility. 

Thanks.

[Suriya Murugan]

Hi Keith,

We can reproduce this issue in Spreadsheet component also.

Wm45uu (forked) - StackBlitz

We are using template to render the dropdown in toolbar component. We can’t able to add dropdown button without using template property in toolbar.

So, please refer below documentation to overcome the CSP violation and no other way:

Content Security Policy in React - Syncfusion

Regards,

Suriya M.