Problem with Content Security Policy directive in production build

[Timon-IW]

When the production build is deployed on i2 Analyze it seems that the given "style-src" is being ignored. Which leads to an unrecoverable error in the build process, when trying to use it the following error is thrown in the dev-console of the browser:

Refused to execute inline script because it violates the following Content Security Policy directive: "default-src http://localhost:9082/opal/plugins/". Either the 'unsafe-inline' keyword, a hash ('sha256-oucLMIfxy5g6qllGiWzaFrwOPvT1rjWHsHO6OeFFae0='), or a nonce ('nonce-...') is required to enable inline execution. Note also that 'script-src' was not explicitly set, so 'default-src' is used as a fallback.

Any idea how to solve this or how to make a workaround?

[johnjesse]

How are you providing the style-src CSP settings you need - are you using the CSP settings of your plugin manifest (plugin.json) - see https://ibm-i2.github.io/notebook-sdk/guide/manifest.html#content-security-policy-directives?

[Timon-IW]

Hello @johnjesse, thanks for the fast reply. Yes, i use toolviewCsp option, i followed your tutorial step by step.

This is the plugin.json of the production build:

{ "$schema": "https://ibm-i2.github.io/notebook-sdk/schemas/plugin-manifest.json", "name": "...", "pluginId": "...", "pluginVersion": "1.0.0", "entryPointUrl": "./entrypoint.js", "toolViewCsp": { "style-src": "'unsafe-inline'", "frame-src": "..." } }

[johnjesse]

ok, which tutorial are you using - if it's the react one you might have missed the step in the deployment part where you need to add "script-src": "'unsafe-inline'" to the toolViewCsp section of your manifest.

if it's not that can you let me know which framework you're using and which version (or alternatively potentially provide a minimum repo with the plugin in)

[Timon-IW]

Sorry, with Chrismas i didn't had the time to look further into this. I tried to add it to the manifest:

  "short_name": "React App",
  "name": "Create React App Sample",
  "icons": [
    {
      "src": "favicon.ico",
      "sizes": "64x64 32x32 24x24 16x16",
      "type": "image/x-icon"
    },
    {
      "src": "logo192.png",
      "type": "image/png",
      "sizes": "192x192"
    },
    {
      "src": "logo512.png",
      "type": "image/png",
      "sizes": "512x512"
    }
  ],
  "start_url": ".",
  "display": "standalone",
  "theme_color": "#000000",
  "background_color": "#ffffff",
  "toolViewCsp": {
    "style-src": "'unsafe-inline'"
  }
}

If that is not what you meant please elaborate.

Yes i used the react tutorial. For the mini repo i need to ask for permission to publish it.

[johnjesse]

No worries, so I meant the plugin.json file (https://ibm-i2.github.io/notebook-sdk/guide/manifest.html) which is in your public folder

The "script-src": "'unsafe-inline'" needs to go within your toolViewCsp field there (additional to what you've already added in there whilst developing the plugin).

If that doesn't fix it, could you share your plugin.json file with the CSP entries

[johnjesse]

Just now realising that create-react-app adds a manifest.json file in the public folder too - so referring to the plugin.json file as the plugin manifest is potentially confusing

[Timon-IW]

Yes, but in my first comment, i already shared the pluigin.json. The second one is the manifest.json from where i tried to added it.

My first commend (i just replaced somethings with "..." but these things are not important. Are they?):

Hello @johnjesse, thanks for the fast reply. Yes, i use toolviewCsp option, i followed your tutorial step by step. This is the plugin.json of the production build: { "$schema": "https://ibm-i2.github.io/notebook-sdk/schemas/plugin-manifest.json", "name": "...", "pluginId": "...", "pluginVersion": "1.0.0", "entryPointUrl": "./entrypoint.js", "toolViewCsp": { "style-src": "'unsafe-inline'", "frame-src": "..." } }`

[johnjesse]

Yep, you're right - sorry tracking this whilst on a train - so your toolViewCsp entry in the plugin.json is where you need to add"script-src": "'unsafe-inline'" entry - after adding it it will read

{
  ...
  "toolViewCsp": {
    "style-src": "'unsafe-inline'",
    "script-src": "'unsafe-inline'",
    "frame-src": "..."
  },
}

Then if you re-build and deploy it should fix it

[Timon-IW]

Ah, now i understand. Thank you very much, it works now.