Cannot Embed External iframe in Forge Custom UI App due to CSP and X-Frame Restrictions

Forge
1

Hi ,
I’m trying to integrate a third-party widget inside a Forge Custom UI app, but running into what seems to be a platform limitation with Iframe embedding.

Widget Code We’re Trying to Embed:


<div id="amb-cnf-embedded-container-3" style="display: block;">
    <iframe
        src="https://embedder.upraise.io/ext/widget/home?embedType=3&amp;widgetId=radnsdomfswi&amp;installationId=ari:cloud:ecosystem::installation/23123-28b13-878327631db3fdsfdsfs"
        class="amb-cnf-embedded-container-iframe"
        style="display: block; height: 600px; width: 700px; left: 20%; top: 10%; z-index: 1;"
    ></iframe>
</div>

This iframe works perfectly in:

  • Regular HTML pages
  • Other non-Forge React apps
  • But fails to load inside Forge.

:cross_mark: Implementation Attempts in Forge

  1. Directly adding the iframe inside the Custom UI app:
  • Not allowed by CSP.
  • Shows:
    Refused to frame 'https://embedder.upraise.io/' because it violates the following Content Security Policy directive: "frame-src 'self' ...".
  • Browser also logs: X-Frame-Options: DENY on the URL.
  1. Dynamically injecting the iframe with React on button click:
  • Used a toggle-able floating modal with iframe.
  • Still blocked with same CSP and iframe origin errors.
  1. Tried alternate domains like Wikipedia for testing iframes.
  • Same result: all external sources fail.

:magnifying_glass_tilted_left: CSP & Platform Limitations Observed

From DevTools:

Refused to frame 'https://embedder.upraise.io/' because it violates the following Content Security

:white_check_mark: What Works

  • Opening the widget URL in a new browser tab (target="_blank") works fine.
  • This is currently the only viable workaround.

:red_question_mark: Questions

  1. Is there any supported way to embed third-party widgets in Forge Custom UI apps?
  2. Can we request whitelisting of certain frame-src origins in the Forge CSP?
  3. Are there recommended ways for third-party vendors like Upraise to integrate in Forge apps — maybe via SDK, APIs, or app bridges?
2

Hi @YogendraSinghThakur ,

How did you do this? Can you post the code for this?

3

Hi @marc,
Since embedding via <iframe> isn’t currently viable, I’ve implemented the following workaround, which opens the widget in a new tab using a standard anchor tag:

<a href="https://embedder.upraise.io/ext/widget/home?embedType=3&widgetId=15684020-wqewe-11eb-a2sda20-0ba823114741&installationId=ari:cloud:ecosystem::installation/76549eewe3423-487a-8b13-878327631db3"
   target="_blank" rel="noopener noreferrer">
   Open Upraise Widget
</a>

This works fine, the widget opens successfully in react ui but not in forge ui. in a new tab without any CSP or embedding issues.

4

If we use an <a href=”https://…. without using router.open, our links do not work, see https://developer.atlassian.com/platform/forge/apis-reference/ui-api-bridge/router/

Have you added upraise.io as egress?

5

Added it now, and it works. Appreciate the help!