fix: Fix invisible iframes with RENDER_CONTENT_MODE=iframe (#8378)

b01dce2a6e added support for `RENDER_CONTENT_MODE=iframe` which used `onload="this.height=this.contentWindow.document.documentElement.scrollHeight"` to set the height of the iframe to the height of the embedded document.
Unfortunately, while this might have worked at some point, with `sandbox="allow-scripts"`, the document embedded in the iframe is counted as a cross-origin document, and browsers prevent any access to cross-origin documents.
[The solution](https://stackoverflow.com/questions/8223239/how-to-get-height-of-iframe-cross-domain) is to instead use `window.postMessage` to pass the height from the embedded document back to the embedding page.
Would appreciate a review of the privacy implications of this change—I feel it's probably "okay", but I'm not convinced my analysis is perfect.

Resolves #7586

Manual test:

1. Add the following snippet to your `app.ini`:
```ini
[markup.html]
ENABLED = true
FILE_EXTENSIONS = .html
RENDER_COMMAND = cat
RENDER_CONTENT_MODE = iframe
NEED_POSTPROCESS = false
```
2. Create a file in a repository with the name `test.html` and with the following contents:
```html
<!DOCTYPE html>

<html lang="en">
<head>
<meta charset="utf-8"/>
</head>
<body>
Hi from iframe!
Here is a random number: <script>document.write(Math.random())</script>.
</body>
</html>
```
3. Go to the file.
4. Observe the HTML is rendered and that the height is not larger than it needs to be (38 pixels).

Reviewed-on: https://codeberg.org/forgejo/forgejo/pulls/8378
Reviewed-by: Gusted <gusted@noreply.codeberg.org>
Co-authored-by: Bojidar Marinov <bojidar.marinov.bg@gmail.com>
Co-committed-by: Bojidar Marinov <bojidar.marinov.bg@gmail.com>
This commit is contained in:
Bojidar Marinov 2025-09-06 16:23:01 +02:00 committed by Gusted
commit 81d90e1b0d
3 changed files with 27 additions and 4 deletions

View file

@ -2,6 +2,7 @@ import {renderMermaid} from './mermaid.js';
import {renderMath} from './math.js';
import {renderCodeCopy} from './codecopy.js';
import {renderAsciicast} from './asciicast.js';
import {renderExternal} from './external.js';
import {initMarkupTasklist} from './tasklist.js';
// code that runs for all markup content
@ -10,6 +11,7 @@ export function initMarkupContent() {
renderMath();
renderCodeCopy();
renderAsciicast();
renderExternal();
}
// code that only runs for comments

View file

@ -0,0 +1,16 @@
export function renderExternal() {
const giteaExternalRender = document.querySelector('iframe.external-render');
if (!giteaExternalRender) return;
giteaExternalRender.contentWindow.postMessage({requestOffsetHeight: true}, '*');
const eventListener = (event) => {
if (event.source !== giteaExternalRender.contentWindow) return;
const height = Number(event.data?.frameHeight);
if (!height) return;
giteaExternalRender.height = height;
giteaExternalRender.style.overflow = 'hidden';
window.removeEventListener('message', eventListener);
};
window.addEventListener('message', eventListener);
}