Frontend iframe renderer framework: 3D models, OpenAPI (#37233) (#37273)

Backport

* #37233
* #37272

---------

Co-authored-by: silverwind <me@silverwind.io>

web_src/js/markup/content.ts

@@ -3,13 +3,14 @@ import {initMarkupCodeMath} from './math.ts';
 import {initMarkupCodeCopy} from './codecopy.ts';
 import {initMarkupRenderAsciicast} from './asciicast.ts';
 import {initMarkupTasklist} from './tasklist.ts';
-import {registerGlobalSelectorFunc} from '../modules/observer.ts';
-import {initMarkupRenderIframe} from './render-iframe.ts';
+import {registerGlobalInitFunc, registerGlobalSelectorFunc} from '../modules/observer.ts';
+import {initExternalRenderIframe} from './render-iframe.ts';
 import {initMarkupRefIssue} from './refissue.ts';
 import {toggleElemClass} from '../utils/dom.ts';
 
 // code that runs for all markup content
 export function initMarkupContent(): void {
+  registerGlobalInitFunc('initExternalRenderIframe', initExternalRenderIframe);
   registerGlobalSelectorFunc('.markup', (el: HTMLElement) => {
     if (el.matches('.truncated-markup')) {
       // when the rendered markup is truncated (e.g.: user's home activity feed)
@@ -25,7 +26,6 @@ export function initMarkupContent(): void {
     initMarkupCodeMermaid(el);
     initMarkupCodeMath(el);
     initMarkupRenderAsciicast(el);
-    initMarkupRenderIframe(el);
     initMarkupRefIssue(el);
   });
 }

web_src/js/markup/render-iframe.ts

@@ -1,5 +1,6 @@
-import {generateElemId, queryElemChildren} from '../utils/dom.ts';
+import {generateElemId} from '../utils/dom.ts';
 import {isDarkTheme} from '../utils.ts';
+import {GET} from '../modules/fetch.ts';
 
 function safeRenderIframeLink(link: any): string | null {
   try {
@@ -41,7 +42,7 @@ function getRealBackgroundColor(el: HTMLElement) {
   return '';
 }
 
-async function loadRenderIframeContent(iframe: HTMLIFrameElement) {
+export async function initExternalRenderIframe(iframe: HTMLIFrameElement) {
   const iframeSrcUrl = iframe.getAttribute('data-src')!;
   if (!iframe.id) iframe.id = generateElemId('gitea-iframe-');
 
@@ -62,9 +63,10 @@ async function loadRenderIframeContent(iframe: HTMLIFrameElement) {
   u.searchParams.set('gitea-is-dark-theme', String(isDarkTheme()));
   u.searchParams.set('gitea-iframe-id', iframe.id);
   u.searchParams.set('gitea-iframe-bgcolor', getRealBackgroundColor(iframe));
-  iframe.src = u.href;
-}
 
-export function initMarkupRenderIframe(el: HTMLElement) {
-  queryElemChildren(el, 'iframe.external-render-iframe', loadRenderIframeContent);
+  // It must use "srcdoc" here, because our backend always sends CSP sandbox directive for the rendered content
+  // (to protect from XSS risks), so we can't use "src" to load the content directly, otherwise there will be console errors like:
+  // Unsafe attempt to load URL http://localhost:3000/test from frame with URL http://localhost:3000/test
+  const resp = await GET(u.href);
+  iframe.srcdoc = await resp.text();
 }