Backstage not rendering <iframe> element in Docs

See original GitHub issue

We’re using techdocs-cli to build our .md documentation files and publishing to S3. When viewing the Documentation locally using the spotify/techdocs Docker image our <iframe> renders. When we view our docs through a deployed Backstage instance though, the <iframe> does not render.

I’ve been looking into this and I believe it may have something to do with Shadow DOM. We have https://lucid.app as an allowed frame-ancestor in our Backstage app-config.yaml Content Security Policy, and I’m not 100% if that is passed to the Shadow DOM of our built documentation, or if it even needs to be passed?

Expected Behavior

When viewing documentation in Backstage, an embedded Lucid Chart <iframe> should render if it is allowed by the CSP.

<div style="width: 640px; height: 480px; margin: 10px; position: relative;">
<iframe allowfullscreen frameborder="0" style="width:640px; height:480px" src="https://lucid.app/documents/embeddedchart/xxxxxxxxxxxxx" id="xxxxxxx"></iframe>
</div>

Current Behavior

When viewing our documentation in Backstage if we inspect element on the Shadow DOM, our <div> is present, but the <iframe> is missing. We’ve verified in our S3 and the <iframe> is present in the index.html of our built documentation, but for some reason is getting stripped or cut out once it is in Backstage.

<div style="width: 640px; height: 480px; margin: 10px; position: relative;">
</div>

Steps to Reproduce

  1. Write some .md file that has an html block similar to the <iframe> example above.
  2. View that documentation locally through the spotify/techdocs Docker image
  3. View the same documentation in Backstage (once docs have been built as html, and being pulled in as a Shadow DOM)

Context

Some of our teams have some complex Lucid Charts explaining their processes, infrastructure, etc. We would like to allow them to use Lucid’s embeddable <iframe> code for their documentation in Backstage.

Your Environment

Backend Backstage Dockerfile Base: node:14-buster-slim Edit: We are using release-2021-10-13

OS: Darwin 20.6.0 - darwin/x64 node: v14.8.0 yarn: 1.22.4 cli: 0.7.15 (installed)

Browser: Latest Chrome

Issue Analytics

  • State:closed
  • Created 2 years ago
  • Reactions:6
  • Comments:9 (9 by maintainers)

github_iconTop GitHub Comments

2reactions
iamEAPcommented, Nov 22, 2021

@dnsaoki2 I’d say @emmaindal’s recommendation above would be a great place to start.

Likely introducing a new config key in techdocs whose value is an array of strings representing extra tags to allow? And then modifying the sanitizer Emma linked to use that config.

1reaction
dnsaoki2commented, Nov 24, 2021

@emmaindal yes, please 😄

Read more comments on GitHub >

github_iconTop Results From Across the Web

[TechDocs] Unable to embed videos that are located ... - GitHub
When I add a video to a document repository and add an iframe pointing to that video in the documentation, I expect the...
Read more >
TechDocs How-To guides - Backstage.io
In your Backstage instance's app-config.yaml , set techdocs.builder from 'local' to 'external' . By doing this, TechDocs will not try to generate docs....
Read more >
Troubleshooting your JavaScript app :: SDKs
... within the iframe to the ForgeRock login page, due to the missing session cookie, which is not allowed to be rendered in...
Read more >
Cannot create a XPath with iFrame as root element
When a component is in an iframe, the way the spec for web drivers work is that a separate document (DOM) is returned...
Read more >
IFrame Plugin - Roadie.io
This is a plugin that renders an Iframe card that can be added to your component/homepage. Add IFrame card to your HomePage. Setup....
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found