Forge Iframe loaded over http mixed content Error

Forge Forge UI Kit and Custom UI
1

I’m encountering a persistent Mixed Content error in the browser console when trying to load my Forge app UI. This prevents the app from rendering inside Jira.

My app uses a simple jira:issuePanel module with a basic UI that contains a button. I’ve even added a Content Security Policy (CSP) header to the HTML, but it hasn’t resolved the issue.

The error looks like this:

> Mixed Content: The page at ‘Jira’ was loaded over HTTPS, but requested an insecure frame ‘http://…cdn.prod.atlassian.net/…’. This request has been blocked; the content must be served over HTTPS.

I’ve verified that my manifest.yml only references internal resources, and there are no hardcoded http:// URLs in my frontend code. Everything should be served securely via Forge’s CDN.

Based on my investigation, it appears the Forge iframe itself is being injected via HTTP, which shouldn’t happen. Is there a way to fix this, or is this an Atlassian platform issue?

2

Hi @AyushPoudel,

From what you’re describing, it sounds like you’re building a Custom UI app in Forge. Custom UI apps run within an iframe, providing a secure and isolated environment, however this does come with certain limitations.
For example, all custom UI apps are served with a CSP - if there is code in your custom UI app that violates the CSP, the app will not behave as expected, and an error will be shown in the browser console.

See this page for further information about Custom UI apps https://developer.atlassian.com/platform/forge/extend-ui-with-custom-options/#custom-ui

If you’re still stuck, perhaps you can share a little more information about how you built your app? Did you start out with the app skeleton generated using the Forge CLI?

Cheers,
Mel

3

Yes, I used Custom UI: Issue Panel type to create the skeleton. My UI is very simple it is just a button which loads in issue panel, when clicked it runs a simple function that posts a comment. I don’t have any http imports, my index.html has CSP block in header. I am not sure how can I debug this problem.

      <button
        onClick={handleClick}
        disabled={status !== 'idle'}
        style={{
          backgroundColor:
            status === 'sent' ? '#36B37E' :
            status === 'sending' || status === 'loading' ? '#A5ADBA' :
            '#0052CC',
          color: 'white',
          padding: '10px 20px',
          fontSize: '14px',
          fontWeight: '500',
          border: 'none',
          borderRadius: '3px',
          cursor: status !== 'idle' ? 'not-allowed' : 'pointer',
          boxShadow: '0 2px 4px rgba(0, 0, 0, 0.1)',
        }}
      >
        {getButtonLabel()}
      </button>

      {message && (
        <p style={{ marginTop: '10px', color: status === 'error' ? 'red' : 'green' }}>
          {message}
        </p>
      )}
    </div>


This is the button