"Content Security Policy" problem with sample web viewer app

[atrebbi]

I'm trying to create a basic app with the following command: npx create-react-app aleapp4 --template @itwin/web-viewer --scripts-version @bentley/react-scripts

when I open the browser, the viewer does not start for security issues: "Content Security Policy of your site blocks the use of 'eval' in JavaScript`"

I have tied to modify index.html to add a security content policy, but could not find a solution...

How may I fix ?

[MichaelBelousov]

continuing from the comment thread on your question on stackoverflow, can you post your Content Security Policy <meta> element that you're using? The one you provided there seemed to be potentially missing a ;.

[atrebbi]

I did several tries, this is the last:

    <meta http-equiv="Content-Security-Policy" 
      content="script-src 'self' 'unsafe-eval'">

[MichaelBelousov]

I have tried that CSP locally, and thanks to permissive HTML parsing, even without a closing tag or the semicolon ;, that should work. Did you confirm that you can see that new meta tag in the devtools document inspector?

I will try the itwin-webviewer template to see what it has.
You haven't modified it in any other way?
Do you know what version you're using?
Could you push the resulting template with the failure to a public github repo for me to inspect?

[MichaelBelousov]

@atrebbi I ran the template, modified it only to also include your CSP you listed, and things work fine on my end. If I remove the 'unsafe-eval' line, indeed it doesn't work, but as you have it, it should work. Can you upload a minimal reproducing modified version of the template? Here is my sample app I made from the template: https://github.com/MichaelBelousov/test-itwin-web-viewer-template-csp. Does it work for you?

If not, can you please specify your browser, and perhaps zip and attach your lockfile (e.g. package-lock.json)? If not

[atrebbi]

same issue with your source I have to say I see many warnings during npm install, for example: npm WARN EBADENGINE Unsupported engine { npm WARN EBADENGINE package: ***@***.******@***.***', npm WARN EBADENGINE required: { node: '>=12.20 <17.0.0' }, npm WARN EBADENGINE current: { node: 'v18.13.0', npm: '8.19.3' } npm WARN EBADENGINE } npm WARN EBADENGINE Unsupported engine { npm WARN EBADENGINE package: ***@***.******@***.***', npm WARN EBADENGINE required: { node: '>=12.20 <17.0.0' }, npm WARN EBADENGINE current: { node: 'v18.13.0', npm: '8.19.3' } npm WARN EBADENGINE } npm WARN EBADENGINE Unsupported engine { npm WARN EBADENGINE package: ***@***.******@***.***', npm WARN EBADENGINE required: { node: '>=12.20 <17.0.0' }, npm WARN EBADENGINE current: { node: 'v18.13.0', npm: '8.19.3' } npm WARN EBADENGINE } I'm on a windows 10 machine and testing with chrome I include package.* Il giorno mar 31 gen 2023 alle ore 04:25 Michael Belousov < ***@***.***> ha scritto:

…

@atrebbi <https://github.com/atrebbi> I ran the template, modified it only to also include your CSP you listed, and things work fine on my end. If I remove the 'unsafe-eval' line, indeed it doesn't work, but as you have it, it should work. Can you upload a minimal reproducing modified version of the template? Here is my sample app I made from the template: https://github.com/MichaelBelousov/test-itwin-web-viewer-template-csp. Does it work for you? If not, can you please specify your browser, and perhaps zip and attach your lockfile (e.g. package-lock.json)? If not — Reply to this email directly, view it on GitHub <#4994 (reply in thread)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAFDJT7B5J3RQHR4ITO6UKTWVCAY7ANCNFSM6AAAAAAUKDPD7E> . You are receiving this because you were mentioned.Message ID: ***@***.***>

-- Greetings, _ ____ /_| /_ _ _ _ _/_ / _ _ / / ' ( |((-_) _) (//)(// ()( / (-()()/ 010000010110110001100101011100110111001101100001011011100110010001110010 01101111010101000111001001100101011000100110001001101001 <http://www.3bsoft.com> email certificata: ***@***.*** profilo linkedin: http://www.linkedin.com/in/atrebbi cellulare: 348 8138206 *Le informazioni contenute in questo messaggio possono essere di natura riservata e confidenziale e sono indirizzate unicamente al destinatario. Qualora non ne siate il destinatario, vi e' fatto divieto di utilizzare, copiare, divulgare o intraprendere qualsiasi azione basata su questo messaggio o sulle informazioni in esso contenute. Se avete ricevuto questo messaggio per errore, Vi preghiamo di comunicare immediatamente al mittente l'accaduto e di cancellare il messaggio.*

[MichaelBelousov]

I will also try with chrome on windows, I was trying on ubuntu. What is your chrome version?

[atrebbi]

Versione 109.0.5414.75 (Build ufficiale) (a 64 bit) (just updated...) Versione 109.0.5414.120 (Build ufficiale) (a 64 bit) Il giorno mar 31 gen 2023 alle ore 14:22 Michael Belousov < ***@***.***> ha scritto:

…

I will also try with chrome on windows, I was trying on ubuntu. What is your chrome version? — Reply to this email directly, view it on GitHub <#4994 (reply in thread)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAFDJT3B4XZUSTUU5SOGFI3WVEG2PANCNFSM6AAAAAAUKDPD7E> . You are receiving this because you were mentioned.Message ID: ***@***.***>

-- Greetings, _ ____ /_| /_ _ _ _ _/_ / _ _ / / ' ( |((-_) _) (//)(// ()( / (-()()/ 010000010110110001100101011100110111001101100001011011100110010001110010 01101111010101000111001001100101011000100110001001101001 <http://www.3bsoft.com> email certificata: ***@***.*** profilo linkedin: http://www.linkedin.com/in/atrebbi cellulare: 348 8138206 *Le informazioni contenute in questo messaggio possono essere di natura riservata e confidenziale e sono indirizzate unicamente al destinatario. Qualora non ne siate il destinatario, vi e' fatto divieto di utilizzare, copiare, divulgare o intraprendere qualsiasi azione basata su questo messaggio o sulle informazioni in esso contenute. Se avete ricevuto questo messaggio per errore, Vi preghiamo di comunicare immediatamente al mittente l'accaduto e di cancellare il messaggio.*

[MichaelBelousov]

@atrebbi
I've tried using npm and node 18.13.0 like you, on windows with the exact same chrome version, in my repository, and chrome does not warn me about any CSP violations. Can you send me your package-lock.json by zipping it up and dropping it in here? I have committed mine if you can retry that.

Otherwise, can you please try removing stuff from the index.html slowly, checking if it still works, in order to minimalize your issue?

Here's an example of a minimal file that should show the CSP working. Does it work for you?

<!-- put me in a folder and run `npx serve` there to visit me as a website -->
<html>
  <head>
    <meta http-equiv="Content-Security-Policy"
      content="script-src 'self' 'unsafe-eval'" >
  </head>
  <body>
    <script> eval('5'); </script>
  </body>
</html>