Iframe downsizing not working

I am working on resizing an iframe height by using Iframe resizer as mentioned here: https://www.metabase.com/docs/latest/administration-guide/13-embedding.html

My code looks like this :
import IframeResizer from 'iframe-resizer-react';
<IframeResizer
id="manageVizIFrame"
forwardRef={iframeRef}
heightCalculationMethod="lowestElement"
sizeHeight
checkOrigin={false}
onResized={onResized}
bodyBackground="transparent"
src={metabaseEmbedUrl}
title="Metabase Manage Visualizations"
frameBorder="0"
style={{ width: '1px', minWidth: '100%'}}
allowtransparency />

I am not sure if iframeResizer.contentWindow.min.js file is added in the Metabase code as mentioned in the documentation for iframeResizer.

Also, I am trying a workaround for this by accessing the iframe content to get the height using this code:
const iframeContent = document.getElementById('manageVizIFrame');
const content = iframeContent.contentWindow;

But I am getting this error while trying to access the iframe document content :
Blocked a frame with origin "my-app-url" from accessing a cross-origin frame.

Does anyone know why this might be happening?

Hi @anindita0690

Metabase does have contentWindow - otherwise the resizer wouldn't work:
https://github.com/metabase/metabase/blob/420e7be80a16472131399bbcd1d766da0363317e/frontend/src/metabase/lib/dom.js#L416
But Metabase is using a fairly old version:
https://github.com/metabase/metabase/blob/835fba843faec64bc95cdff318d8db93f2744144/package.json#L30
And there has been a lot of changes and improvements, so together with a lot of other things, we're looking to upgrade our dependencies:
https://github.com/metabase/metabase/issues/16428

But we have an issue open about this:
https://github.com/metabase/metabase/issues/10132 - upvote by clicking :+1: on the first post

1 Like

@flamber Thanks for your reply!!

Is there any plan to remove "height: 100%" from html and body tags as discussed in this thread : https://github.com/metabase/metabase/issues/10132 ?
This should fix my problem.

Btw, I have upvoted the first post there.

@anindita0690 It's a bit more complex than just removing something - it needs to be validated that it won't cause problems elsewhere. But if that's the fix and it works everywhere, then yes.

Okay.
If and until that is done, is it possible to somehow access and manipulate the iframe document content from the parent page?
Currently, I am getting this error while trying to do that : Blocked a frame with origin [url] from accessing a cross-origin frame

@anindita0690 That is protected by CSP headers in browsers. You would have to change the CSP (or possibly disabled them) either with a modified version of Metabase or by doing it via a reverse proxy.
https://stackoverflow.com/questions/25098021/securityerror-blocked-a-frame-with-origin-from-accessing-a-cross-origin-frame
See this other topic, which was trying to change another header: Can't change 'X-Frame-Options' nginx reverse-proxy

1 Like