Cannot frame external URL in Custom UI App

Forge
, ,
1

No matter what I try, I cannot include an iframe in my forge app.

Here is the gist of what I am trying to do via custom UI js:

const root = document.getElementById('root');
const iframe = document.createElement('iframe');
iframe.src = `https://prod-sandbox.teamgantt.com/gantt/schedule/?ids=${externalProjectId}`;
root?.appendChild(iframe);

I always receive the following error:

csperror
csperror1932×118 26.6 KB

I have tried a combination of permissions in my manifest.yml file, but here is what they are currently:

permissions:
  content:
    styles:
      - unsafe-inline
    scripts:
      - unsafe-inline
  external:
    frames:
      - '*.teamgantt.com'
      - https://prod-sandbox.teamgantt.com/
      - https://prod-sandbox.teamgantt.com/gantt/schedule/
    fetch:
      backend:
        - https://auth-sandbox.teamgantt.com
        - https://api-sandbox.teamgantt.com

I go through the typical deploy, install --upgrade after making changes and still the same error

Any guidance would be greatly appreciated.

2 Likes
2

Hey @BrianScaturro,

Out of curiosity, are you tunnelling in this scenario? Or do you get this error in the deployed version of the app?

3

Thanks @danielwinterw

I am tunnelling in this scenario.

4

@danielwinterw Do you have any insight as to what is causing this issue? From what I presented can you tell if there is an error on my end or does this appear to be an issue with the tunneling environment?

5

I tried just doing forge deploy to remove the tunnel from the equation, and the error persists. A regular deployment without the tunnel still gives those frame errors (using the above external frame configuration in manifest.yml)

6

Going to update here in case it is useful for anyone else. You can override Forge’s CSP settings with a meta tag in your custom UI. In fact, the create react app template comes with the following:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta http-equiv="Content-Security-Policy" content="default-src 'self' 'unsafe-inline'" />
    <title>React App</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<script type="module" src="/src/index.tsx"></script>
</body>
</html>

Notice the "Content-Security-Policy" meta element. This appears to override everything Forge sets via the manifest. If you remove that, you can continue with business as usual.

I’m not sure of the implications for Forge if you can override manifest settings via HTML, but perhaps this meta element should be stripped from templates or as part of the deploy process.