Confluence Forge Custom UI: Handling iframe Embedding for Different Content Types — Whiteboards, Databases, and Smart Links Fail Due to CSP

Confluence Development Confluence Cloud
, , , , , ,
1

Hello Atlassian Developer Community,

I’m currently developing a Confluence macro using Forge Custom UI that allows users to search for various Confluence content types (Pages, LiveDocs, Whiteboards, Databases, Smart Links, etc.) and display the selected content in an iframe. However, I’m encountering inconsistent Content Security Policy (CSP) behavior based on the content type.

What Works (Pages & LiveDocs):

For traditional Confluence content types like Pages and LiveDocs, I can successfully embed the content inside an iframe using Atlassian’s internal servlet endpoint:

  • Working URL:
    baseUrl/wiki/plugins/servlet/remotepageview?pageId=pageId

This works perfectly for:

  • Pages

  • LiveDocs

What Fails (Whiteboards, Databases, Smart Links, Folders):

For newer content types (Whiteboards, Databases, Smart Links, etc.), iframe embedding fails due to CSP restrictions. Here are some examples of URLs that do not work:

  • Whiteboard/Database Standalone UI:
    baseUrl/databases/standalone/index.html

  • Smart Link Page:
    baseUrl/wiki/spaces/Test/pages/36143105/ram-smartlink

  • Whiteboard :
    baseurl/wiki/spaces/Test/whiteboard/35749889?parentProduct=ram

Error Observed:
When attempting to embed these URLs in an iframe, the following CSP error is logged in the browser console:

Framing 'base Url' violates the following Content Security Policy directive: "frame-ancestors 'self'". The request has been blocked.

The same URLs load directly in the browser without issue.

The Issue:

Some apps (including those built by Atlassian) are able to embed these newer content types, such as Whiteboards and Databases, inside iframes without encountering CSP issues. This raises several questions:

  1. Are these apps bypassing iframes altogether?

  2. Are they using internal or undocumented endpoints?

  3. Are they leveraging REST APIs and rendering content client-side?

  4. Is the remotepageview endpoint intentionally limited to Pages and LiveDocs?

  5. How do other apps handle the embedding of Whiteboards, Databases, and Smart Links?

Relevant Code:

index.html:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>config-navitab</title>
  </head>
  <body>
    <div id="root"></div>
    <script type="module" src="/src/main.jsx"></script>
  </body>
</html>

React iframe Component:

import React from "react";

const RemoteFrame = ({ url, elementsContentHeight = 400, title = "remote-frame" }) => {
  if (!url) return null;

  return (
    <iframe
      title={title}
      src={url}
      style={{
        width: "100%",
        height: `${elementsContentHeight}px`,
        border: "none",
      }}
    />
  );
};

export default RemoteFrame;

What I’ve Already Checked:

  • Confluence CSP documentation

  • Forge Custom UI security restrictions

  • Browser sandboxing and iframe attributes

  • Cross-domain and same-origin behavior

My Questions:

  1. Is the remotepageview endpoint officially supported only for Pages and LiveDocs?

  2. Is iframe embedding of Whiteboards, Databases, and Smart Links intentionally blocked?

  3. How do other apps handle rendering these content types?

    • REST API with a custom renderer?

    • Atlassian-internal iframe URLs?

    • UI Kit instead of Custom UI?

Conclusion:

Any clarification on the recommended approach for embedding non-page content in Confluence macros, along with any supported or unsupported techniques, would be extremely helpful.

Thank you in advance!

1 Like