fix external render iframe

wxiaoguang · wxiaoguang · commit dee02c71bc40 · 2025-10-23T10:59:39.000+08:00
diff --git a/modules/markup/internal/finalprocessor.go b/modules/markup/internal/finalprocessor.go
@@ -5,11 +5,13 @@ package internal
 
 import (
 	"bytes"
+	"html/template"
 	"io"
 )
 
 type finalProcessor struct {
 	renderInternal *RenderInternal
+	extraHeadHTML  template.HTML
 
 	output io.Writer
 	buf    bytes.Buffer
@@ -25,6 +27,30 @@ func (p *finalProcessor) Close() error {
 	// because "postProcess" already does so. In the future we could optimize the code to process data on the fly.
 	buf := p.buf.Bytes()
 	buf = bytes.ReplaceAll(buf, []byte(` data-attr-class="`+p.renderInternal.secureIDPrefix), []byte(` class="`))
-	_, err := p.output.Write(buf)
+
+	tmp := bytes.TrimSpace(buf)
+	isLikelyHTML := len(tmp) != 0 && tmp[0] == '<' && tmp[len(tmp)-1] == '>' && bytes.Index(tmp, []byte(`</`)) > 0
+	if !isLikelyHTML {
+		// not HTML, write back directly
+		_, err := p.output.Write(buf)
+		return err
+	}
+
+	// add our extra head HTML into output
+	headBytes := []byte("<head>")
+	posHead := bytes.Index(buf, headBytes)
+	var part1, part2 []byte
+	if posHead >= 0 {
+		part1, part2 = buf[:posHead+len(headBytes)], buf[posHead+len(headBytes):]
+	} else {
+		part1, part2 = nil, buf
+	}
+	if _, err := p.output.Write(part1); err != nil {
+		return err
+	}
+	if _, err := io.WriteString(p.output, string(p.extraHeadHTML)); err != nil {
+		return err
+	}
+	_, err := p.output.Write(part2)
 	return err
 }
diff --git a/modules/markup/internal/internal_test.go b/modules/markup/internal/internal_test.go
@@ -12,7 +12,7 @@ import (
 	"github.com/stretchr/testify/assert"
 )
 
-func TestRenderInternal(t *testing.T) {
+func TestRenderInternalAttrs(t *testing.T) {
 	cases := []struct {
 		input, protected, recovered string
 	}{
@@ -30,7 +30,7 @@ func TestRenderInternal(t *testing.T) {
 	for _, c := range cases {
 		var r RenderInternal
 		out := &bytes.Buffer{}
-		in := r.init("sec", out)
+		in := r.init("sec", out, "")
 		protected := r.ProtectSafeAttrs(template.HTML(c.input))
 		assert.EqualValues(t, c.protected, protected)
 		_, _ = io.WriteString(in, string(protected))
@@ -41,7 +41,7 @@ func TestRenderInternal(t *testing.T) {
 	var r1, r2 RenderInternal
 	protected := r1.ProtectSafeAttrs(`<div class="test"></div>`)
 	assert.EqualValues(t, `<div class="test"></div>`, protected, "non-initialized RenderInternal should not protect any attributes")
-	_ = r1.init("sec", nil)
+	_ = r1.init("sec", nil, "")
 	protected = r1.ProtectSafeAttrs(`<div class="test"></div>`)
 	assert.EqualValues(t, `<div data-attr-class="sec:test"></div>`, protected)
 	assert.Equal(t, "data-attr-class", r1.SafeAttr("class"))
@@ -54,8 +54,37 @@ func TestRenderInternal(t *testing.T) {
 	assert.Empty(t, recovered)
 
 	out2 := &bytes.Buffer{}
-	in2 := r2.init("sec-other", out2)
+	in2 := r2.init("sec-other", out2, "")
 	_, _ = io.WriteString(in2, string(protected))
 	_ = in2.Close()
 	assert.Equal(t, `<div data-attr-class="sec:test"></div>`, out2.String(), "different secureID should not recover the value")
 }
+
+func TestRenderInternalExtraHead(t *testing.T) {
+	t.Run("HeadExists", func(t *testing.T) {
+		out := &bytes.Buffer{}
+		var r RenderInternal
+		in := r.init("sec", out, `<MY-TAG>`)
+		_, _ = io.WriteString(in, `<head>any</head>`)
+		_ = in.Close()
+		assert.Equal(t, `<head><MY-TAG>any</head>`, out.String())
+	})
+
+	t.Run("HeadNotExists", func(t *testing.T) {
+		out := &bytes.Buffer{}
+		var r RenderInternal
+		in := r.init("sec", out, `<MY-TAG>`)
+		_, _ = io.WriteString(in, `<div></div>`)
+		_ = in.Close()
+		assert.Equal(t, `<MY-TAG><div></div>`, out.String())
+	})
+
+	t.Run("NotHTML", func(t *testing.T) {
+		out := &bytes.Buffer{}
+		var r RenderInternal
+		in := r.init("sec", out, `<MY-TAG>`)
+		_, _ = io.WriteString(in, `<any>`)
+		_ = in.Close()
+		assert.Equal(t, `<any>`, out.String())
+	})
+}
diff --git a/modules/markup/internal/renderinternal.go b/modules/markup/internal/renderinternal.go
@@ -29,19 +29,19 @@ type RenderInternal struct {
 	secureIDPrefix string
 }
 
-func (r *RenderInternal) Init(output io.Writer) io.WriteCloser {
+func (r *RenderInternal) Init(output io.Writer, extraHeadHTML template.HTML) io.WriteCloser {
 	buf := make([]byte, 12)
 	_, err := rand.Read(buf)
 	if err != nil {
 		panic("unable to generate secure id")
 	}
-	return r.init(base64.URLEncoding.EncodeToString(buf), output)
+	return r.init(base64.URLEncoding.EncodeToString(buf), output, extraHeadHTML)
 }
 
-func (r *RenderInternal) init(secID string, output io.Writer) io.WriteCloser {
+func (r *RenderInternal) init(secID string, output io.Writer, extraHeadHTML template.HTML) io.WriteCloser {
 	r.secureID = secID
 	r.secureIDPrefix = r.secureID + ":"
-	return &finalProcessor{renderInternal: r, output: output}
+	return &finalProcessor{renderInternal: r, output: output, extraHeadHTML: extraHeadHTML}
 }
 
 func (r *RenderInternal) RecoverProtectedValue(v string) (string, bool) {
diff --git a/modules/markup/render.go b/modules/markup/render.go
@@ -6,12 +6,14 @@ package markup
 import (
 	"context"
 	"fmt"
+	"html/template"
 	"io"
 	"net/url"
 	"strconv"
 	"strings"
 	"time"
 
+	"code.gitea.io/gitea/modules/htmlutil"
 	"code.gitea.io/gitea/modules/markup/internal"
 	"code.gitea.io/gitea/modules/setting"
 	"code.gitea.io/gitea/modules/util"
@@ -164,23 +166,28 @@ func RenderString(ctx *RenderContext, content string) (string, error) {
 }
 
 func renderIFrame(ctx *RenderContext, output io.Writer) error {
-	// set height="0" ahead, otherwise the scrollHeight would be max(150, realHeight)
-	// at the moment, only "allow-scripts" is allowed for sandbox mode.
-	// "allow-same-origin" should never be used, it leads to XSS attack, and it makes the JS in iframe can access parent window's config and CSRF token
-	// TODO: when using dark theme, if the rendered content doesn't have proper style, the default text color is black, which is not easy to read
-	_, err := io.WriteString(output, fmt.Sprintf(`
-<iframe src="%s/%s/%s/render/%s/%s"
-name="giteaExternalRender"
-onload="this.height=giteaExternalRender.document.documentElement.scrollHeight"
-width="100%%" height="0" scrolling="no" frameborder="0" style="overflow: hidden"
-sandbox="allow-scripts"
-></iframe>`,
-		setting.AppSubURL,
+	src := fmt.Sprintf("%s/%s/%s/render/%s/%s", setting.AppSubURL,
 		url.PathEscape(ctx.RenderOptions.Metas["user"]),
 		url.PathEscape(ctx.RenderOptions.Metas["repo"]),
-		ctx.RenderOptions.Metas["RefTypeNameSubURL"],
-		url.PathEscape(ctx.RenderOptions.RelativePath),
-	))
+		util.PathEscapeSegments(ctx.RenderOptions.Metas["RefTypeNameSubURL"]),
+		util.PathEscapeSegments(ctx.RenderOptions.RelativePath),
+	)
+
+	defaultWidth := "100%"
+	defaultHeight := "300"
+
+	// ATTENTION! at the moment, only "allow-scripts" is allowed for sandbox mode.
+	// "allow-same-origin" should never be used, it leads to XSS attack, and it makes the JS in iframe can access parent window's config and CSRF token
+	iframe := htmlutil.HTMLFormat(`
+<iframe data-src="%s"
+	class="external-render-iframe"
+	sandbox="allow-scripts allow-popups"
+	width="%s" height="%s"
+></iframe>
+`,
+		src, defaultWidth, defaultHeight)
+
+	_, err := io.WriteString(output, string(iframe))
 	return err
 }
 
@@ -193,21 +200,26 @@ func pipes() (io.ReadCloser, io.WriteCloser, func()) {
 }
 
 func RenderWithRenderer(ctx *RenderContext, renderer Renderer, input io.Reader, output io.Writer) error {
+	var extraHeadHTML template.HTML
 	if externalRender, ok := renderer.(ExternalRenderer); ok && externalRender.DisplayInIFrame() {
 		if !ctx.RenderOptions.InStandalonePage {
 			// for an external "DisplayInIFrame" render, it could only output its content in a standalone page
 			// otherwise, a <iframe> should be outputted to embed the external rendered page
 			return renderIFrame(ctx, output)
 		}
-		// else: this is a standalone page, fallthrough to the real rendering
+		// else: this is a standalone page, fallthrough to the real rendering, and add extra JS/CSS
+		extraStyleHref := setting.AppSubURL + "/assets/css/external-render-iframe.css"
+		extraScriptSrc := setting.AppSubURL + "/assets/js/external-render-iframe.js"
+		// "<script>" must go before "<link>", to make Golang's http.DetectContentType() can still recognize the content as "text/html"
+		extraHeadHTML = htmlutil.HTMLFormat(`<script src="%s"></script><link rel="stylesheet" href="%s">`, extraScriptSrc, extraStyleHref)
 	}
 
 	ctx.usedByRender = true
 	if ctx.RenderHelper != nil {
 		defer ctx.RenderHelper.CleanUp()
 	}
 
-	finalProcessor := ctx.RenderInternal.Init(output)
+	finalProcessor := ctx.RenderInternal.Init(output, extraHeadHTML)
 	defer finalProcessor.Close()
 
 	// input -> (pw1=pr1) -> renderer -> (pw2=pr2) -> SanitizeReader -> finalProcessor -> output
diff --git a/routers/web/repo/render.go b/routers/web/repo/render.go
@@ -52,7 +52,7 @@ func RenderFile(ctx *context.Context) {
 	isTextFile := st.IsText()
 
 	rd := charset.ToUTF8WithFallbackReader(io.MultiReader(bytes.NewReader(buf), dataRc), charset.ConvertOpts{})
-	ctx.Resp.Header().Add("Content-Security-Policy", "frame-src 'self'; sandbox allow-scripts")
+	ctx.Resp.Header().Add("Content-Security-Policy", "frame-src 'self'; sandbox allow-scripts allow-popups")
 
 	if markupType := markup.DetectMarkupTypeByFileName(blob.Name()); markupType == "" {
 		if isTextFile {
diff --git a/tests/integration/markup_external_test.go b/tests/integration/markup_external_test.go
@@ -75,7 +75,7 @@ func TestExternalMarkupRenderer(t *testing.T) {
 		assert.Equal(t, "text/html; charset=utf-8", resp.Header().Get("Content-Type"))
 		bs, err := io.ReadAll(resp.Body)
 		assert.NoError(t, err)
-		assert.Equal(t, "frame-src 'self'; sandbox allow-scripts", resp.Header().Get("Content-Security-Policy"))
+		assert.Equal(t, "frame-src 'self'; sandbox allow-scripts allow-popups", resp.Header().Get("Content-Security-Policy"))
 		assert.Equal(t, "<div>\n\ttest external renderer\n</div>\n", string(bs))
 	})
 }
diff --git a/web_src/css/standalone/external-render-iframe.css b/web_src/css/standalone/external-render-iframe.css
@@ -0,0 +1 @@
+/* dummy */
diff --git a/web_src/js/markup/content.ts b/web_src/js/markup/content.ts
@@ -4,6 +4,7 @@ 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';
 
 // code that runs for all markup content
 export function initMarkupContent(): void {
@@ -13,5 +14,6 @@ export function initMarkupContent(): void {
     initMarkupCodeMermaid(el);
     initMarkupCodeMath(el);
     initMarkupRenderAsciicast(el);
+    initMarkupRenderIframe(el);
   });
 }
diff --git a/web_src/js/markup/render-iframe.ts b/web_src/js/markup/render-iframe.ts
@@ -0,0 +1,22 @@
+import {generateElemId, queryElemChildren} from '../utils/dom.ts';
+import {isDarkTheme} from '../utils.ts';
+
+export async function loadRenderIframeContent(iframe: HTMLIFrameElement) {
+  const iframeSrcUrl = iframe.getAttribute('data-src');
+  if (!iframe.id) iframe.id = generateElemId('gitea-iframe-');
+
+  window.addEventListener('message', (e) => {
+    if (e.data && e.data.giteaIframeCmd === 'resize' && e.data.giteaIframeId === iframe.id) {
+      iframe.style.height = `${e.data.giteaIframeHeight}px`;
+    }
+  });
+
+  let urlParams = '';
+  urlParams += `&gitea-is-dark-theme=${isDarkTheme()}`;
+  urlParams += `&gitea-iframe-id=${iframe.id}`;
+  iframe.src = iframeSrcUrl + (iframeSrcUrl.includes('?') ? '&' : '?') + urlParams.substring(1);
+}
+
+export function initMarkupRenderIframe(el: HTMLElement) {
+  queryElemChildren(el, 'iframe.external-render-iframe', loadRenderIframeContent);
+}
diff --git a/web_src/js/standalone/external-render-iframe.ts b/web_src/js/standalone/external-render-iframe.ts
@@ -0,0 +1,32 @@
+/* To manually test:
+
+[markup.in-iframe]
+ENABLED = true
+FILE_EXTENSIONS = .in-iframe
+RENDER_CONTENT_MODE = iframe
+RENDER_COMMAND = `echo '<div style="width: 100%; height: 2000px; border: 10px solid red; box-sizing: border-box;">content</div>'`
+
+*/
+
+function mainExternalRenderIframe() {
+  const u = new URL(window.location.href);
+  const fn = () => window.parent.postMessage({
+    giteaIframeCmd: 'resize',
+    giteaIframeId: u.searchParams.get('gitea-iframe-id'),
+    giteaIframeHeight: document.documentElement.scrollHeight,
+  }, '*');
+  fn();
+  window.addEventListener('DOMContentLoaded', fn);
+  setInterval(fn, 1000);
+
+  // make all absolute links open in new window (otherwise they would be blocked by all parents' frame-src)
+  document.body.addEventListener('click', (e) => {
+    const el = e.target as HTMLAnchorElement;
+    if (el.nodeName !== 'A') return;
+    const href = el.getAttribute('href');
+    if (!href.startsWith('//') && !href.includes('://')) return;
+    el.target = '_blank';
+  }, true);
+}
+
+mainExternalRenderIframe();
diff --git a/webpack.config.ts b/webpack.config.ts
@@ -75,6 +75,10 @@ export default {
       fileURLToPath(new URL('web_src/js/standalone/swagger.ts', import.meta.url)),
       fileURLToPath(new URL('web_src/css/standalone/swagger.css', import.meta.url)),
     ],
+    'external-render-iframe': [
+      fileURLToPath(new URL('web_src/js/standalone/external-render-iframe.ts', import.meta.url)),
+      fileURLToPath(new URL('web_src/css/standalone/external-render-iframe.css', import.meta.url)),
+    ],
     'eventsource.sharedworker': [
       fileURLToPath(new URL('web_src/js/features/eventsource.sharedworker.ts', import.meta.url)),
     ],

Original file line number	Diff line number	Diff line change
`@@ -29,19 +29,19 @@ type RenderInternal struct {`
`29`	`29`	`secureIDPrefix string`
`30`	`30`	`}`
`31`	`31`
`32`		`-func (r *RenderInternal) Init(output io.Writer) io.WriteCloser {`
	`32`	`+func (r *RenderInternal) Init(output io.Writer, extraHeadHTML template.HTML) io.WriteCloser {`
`33`	`33`	`buf := make([]byte, 12)`
`34`	`34`	`_, err := rand.Read(buf)`
`35`	`35`	`if err != nil {`
`36`	`36`	`panic("unable to generate secure id")`
`37`	`37`	`}`
`38`		`- return r.init(base64.URLEncoding.EncodeToString(buf), output)`
	`38`	`+ return r.init(base64.URLEncoding.EncodeToString(buf), output, extraHeadHTML)`
`39`	`39`	`}`
`40`	`40`
`41`		`-func (r *RenderInternal) init(secID string, output io.Writer) io.WriteCloser {`
	`41`	`+func (r *RenderInternal) init(secID string, output io.Writer, extraHeadHTML template.HTML) io.WriteCloser {`
`42`	`42`	`r.secureID = secID`
`43`	`43`	`r.secureIDPrefix = r.secureID + ":"`
`44`		`- return &finalProcessor{renderInternal: r, output: output}`
	`44`	`+ return &finalProcessor{renderInternal: r, output: output, extraHeadHTML: extraHeadHTML}`
`45`	`45`	`}`
`46`	`46`
`47`	`47`	`func (r *RenderInternal) RecoverProtectedValue(v string) (string, bool) {`
Original file line number	Diff line number	Diff line change
`@@ -75,7 +75,7 @@ func TestExternalMarkupRenderer(t *testing.T) {`
`75`	`75`	`assert.Equal(t, "text/html; charset=utf-8", resp.Header().Get("Content-Type"))`
`76`	`76`	`bs, err := io.ReadAll(resp.Body)`
`77`	`77`	`assert.NoError(t, err)`
`78`		`- assert.Equal(t, "frame-src 'self'; sandbox allow-scripts", resp.Header().Get("Content-Security-Policy"))`
	`78`	`+ assert.Equal(t, "frame-src 'self'; sandbox allow-scripts allow-popups", resp.Header().Get("Content-Security-Policy"))`
`79`	`79`	`assert.Equal(t, "<div>\n\ttest external renderer\n</div>\n", string(bs))`
`80`	`80`	`})`
`81`	`81`	`}`