Unstyled @atlaskit elements caused by CSP violation with Forge Tunnel and React Custom UI

Forge Forge UI Kit and Custom UI
,
1

Forge Tunnel is throwing a CSP violation when using react-scripts start with Forge Tunnel which causes @atlaskit components to not have styles applied. Deploying the app fully works as expected, but when using Tunnel for development the elements lose their styles.

CSP violation detected for 'style-src-elem' while serving content at http://localhost:8001/

My resource definition for the custom ui, with react-scripts start hosting the server at http://localhost:3000:

resources:
  - key: view
    path: static/spa/build
    tunnel:
      port: 3000

Example (dummy data from Harvest API docs) of @atlaskit/code/CodeBlock while tunnel is active:
image

Tunnel not active:
image

Anyone had a similar experience or know what I might be doing wrong?

2

Hi @JackA can you try adding this to the manifest.yml see if it fixes your issue?

permissions:
  content:
    styles:
      - 'unsafe-inline'
3

Thanks for the reply! I probably should have stated this in the original post but I do already have that set in the manifest and unfortunately it doesn’t solve the issue.

4

Could you please check if there’s any error in browser logs?

5

Yes, there are a large number of these errors:

sheet.browser.esm.js:115 Refused to apply inline style because it violates the following Content Security Policy directive: "style-src 'self'". Either the 'unsafe-inline' keyword, a hash ('sha256-+R65CJnZhz/KTm2VOloS25qX7Hnl0H1klKP722q2h6c='), or a nonce ('nonce-...') is required to enable inline execution.

And I can confirm again that the manifest.yml does contain:

permissions:
  content:
    styles:
      - 'unsafe-inline'
6

Hi @JackA, I can reproduce the issue on my end. I’ll do some investigation and update you later.

7

Hi @JackA, sorry for the late reply. The issue is caused by the browser cache. If you Disable the cache in your browser and refresh the page should solve the problem.

8

Sorted, thank you!