Content-Security-Policy problem with Jira Issue Panel with Custom UI

Forge Forge UI Kit and Custom UI
, , ,
1

Hi,
I have app with two modules, Jira Issue Panel and Jira Project settings page. When I open Jira Issue Panel in browser I get the following error in Developer console.
all.js:51 Refused to load the stylesheet 'https://connect-cdn.atl-paas.net/surfaces.css' because it violates the following Content Security Policy directive: "style-src 'self' 'unsafe-inline'". Note that 'style-src-elem' was not explicitly set, so 'style-src' is used as a fallback.

But Jira Project Settings page does not have this error. This problem is causing (I assume) that Atlaskit stylesheets does not work in issue panel (and it works fine in Project Settings).

Here is my manifest

modules:
  jira:issuePanel:
    - key: my_issuepanel
      resource: Frontend 
      resolver:
        function: resolver
      title: myPanel
      description: Ask GPT
      displayConditions:
        issueType: Story
  jira:projectSettingsPage:
    - key: my_project_settings
      resource: Frontend
      resolver:
        function: resolver
      title: MySettings
  function:
    - key: resolver
      handler: index.handler
resources:
  - key: icons
    path: icons/
  - key: Frontend
    path: static/myapp/build
app:
  id: xxx
permissions:
  scopes:
    - "read:jira-work"
    - "storage:app"
  content:
    styles:
      - 'unsafe-inline'
2

Solved the issue by adding ’ view.theme.enable()’ to the topmost component.
Atlaskit works fine now.
Error in browser about ‘style-src’ is still present but how cares, right.

3

I had the same issue adding this to the manifest.yml solved it for me.

permissions:
  external:
    styles:
      - https://connect-cdn.atl-paas.net/surfaces.css
1 Like
4

Thank you very much! But for some reason it doesn’t work for me.

5

Custom CSP should be included in the custom UI’s index.html file like so:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="Content-Security-Policy" content="style-src 'self' 'unsafe-inline' https://connect-cdn.atl-paas.net/surfaces.css" />
  </head>
  <body>
    <div id="root"></div>
    <script type="module" src="/src/main.tsx"></script>
  </body>
</html>
6

Thanks, but that didn’t work for me either.