1
0
Fork 0
mirror of https://codeberg.org/forgejo/forgejo.git synced 2025-09-30 19:22:08 +00:00
forgejo/web_src/js/markup/external.js

17 lines
628 B
JavaScript
Raw Normal View History

fix: Fix invisible iframes with RENDER_CONTENT_MODE=iframe (#8378) b01dce2a6e98c25915a8e98afb741a1c34d05aba 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>
2025-09-06 16:23:01 +02:00
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);
}