Backstage not rendering <iframe> element in Docs
See original GitHub issueWe’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
- Write some
.mdfile that has an html block similar to the<iframe>example above. - View that documentation locally through the
spotify/techdocsDocker image - 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:
- Created 2 years ago
- Reactions:6
- Comments:9 (9 by maintainers)
Top Related StackOverflow Question
@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.
@emmaindal yes, please 😄