How to set Exernal references in Forge Custom UI?

Forge Forge Custom UI and UI kit (beta)
1
  1. Use NextUI
    https://nextui.org/ 
CSP violation detected for 'font-src' while serving content at http://localhost:8002/
For an app to share data with external resources or use custom CSP, follow the steps in: https://go.atlassian.com/forge-content-security-and-egress-controls

2.Use AntDesign Chart

CSP violation detected for 'worker-src' while serving content at http://localhost:8002/
For an app to share data with external resources or use custom CSP, follow the steps in: https://go.atlassian.com/forge-content-security-and-egress-controls

I know we should change here, but I don’t know how to find out the url. Anyone could help?

permissions:
  scopes:
    - read:jira-work
  external:
    fonts:
      - '???/fonts.css'
  content:
    styles:
      - 'unsafe-inline'
2

Hi @YY1 ,

if you do not know where exactly your library is getting fonts from, you could always allow every domain like this:

external:
    fonts:
      - '*'

Then you can use the developer tools in your browser to see what gets loaded from where and adjust the CSP accordingly. Or maybe bundle everything together so that you don’t need any external fonts.

Hope that helps,
Oliver

3

After I used the below permissions in the manifest file and the original two issues still exist:

permissions:
  scopes:
    - read:jira-work
  external:
    fonts:
      - '*'
  content:
    styles:
      - 'unsafe-inline'
4

I agree with the advice given above on allowing everything to start with and then checking where the fonts are actually come from in your browser’s developer console. Once you know the actual source, you can narrow it down in your manifest.

In addition, when changing permissions, especially ingress and egress rules I find that at times I have to uninstall the app from the development instance and reinstall it. Using “forge deploy” is sometimes not enough for these changes.

5 
<!doctype html>
<html lang="en">
    <head>
        <script src="https://forge.cdn.prod.atlassian-dev.net/global-bridge.js"></script>
        <script async src="https://forge.cdn.prod.atlassian-dev.net/iframeResizer.contentWindow.min.js"></script>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width,initial-scale=1">
        <meta http-equiv="Content-Security-Policy" content="default-src &apos;self&apos;; worker-src blob:; script-src &apos;self&apos; &apos;unsafe-inline&apos; &apos;unsafe-eval&apos;; style-src &apos;self&apos; &apos;unsafe-inline&apos;; img-src &apos;self&apos; data:">
        <meta http-equiv="Content-Security-Policy" content="worker-src https://gw.alipayobjects.com;">
        <title>React App</title>
        <script defer="defer" src="./static/js/main.ba3d4828.js"></script>
        <link href="./static/css/main.9160199b.css" rel="stylesheet">
    </head>
    <body>
        <noscript>You need to enable JavaScript to run this app.</noscript>
        <div id="root"></div>
    </body>
</html>

for "content=“worker-src https://gw.alipayobjects.com”, it seems that Forge doesn’t provide worker attribute in the manifest.yml file. So I’m not sure about how to updat the permission info.

6

image
image2187×431 176 KB

7

Could you please take a look at the above information and suggest the manifest.yaml? Thanks @osiebenmarck @muschol