fix: add FastCryptoRandomHex/Bytes used by ScriptImport CSP nonces

Add ChaCha8-based fast crypto random functions required by the
TemplateContext.CspScriptNonce() method for Content-Security-Policy
nonce generation. ~20x faster than crypto/rand for session IDs.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

modules/util/util.go

@@ -6,11 +6,14 @@ package util
 import (
 	"bytes"
 	"crypto/rand"
+	"encoding/hex"
 	"fmt"
 	"math/big"
+	rand2 "math/rand/v2"
 	"slices"
 	"strconv"
 	"strings"
+	"sync"
 
 	"golang.org/x/text/cases"
 	"golang.org/x/text/language"
@@ -91,6 +94,32 @@ func CryptoRandomBytes(length int64) ([]byte, error) {
 	return buf, err
 }
 
+var chaCha8RandPool = sync.OnceValue(func() *sync.Pool {
+	return &sync.Pool{
+		New: func() any {
+			var buf [32]byte
+			_, _ = rand.Read(buf[:])
+			return rand2.NewChaCha8(buf)
+		},
+	}
+})
+
+// FastCryptoRandomBytes returns random bytes using ChaCha8 (~20x faster than crypto/rand).
+func FastCryptoRandomBytes(length int) []byte {
+	pool := chaCha8RandPool()
+	chaCha8Rand := pool.Get().(*rand2.ChaCha8)
+	defer pool.Put(chaCha8Rand)
+	buf := make([]byte, length)
+	_, _ = chaCha8Rand.Read(buf)
+	return buf
+}
+
+// FastCryptoRandomHex returns a random hex string of the given length.
+func FastCryptoRandomHex(length int) string {
+	buf := FastCryptoRandomBytes(length / 2)
+	return hex.EncodeToString(buf)
+}
+
 // ToLowerASCII returns s with all ASCII letters mapped to their lower case.
 func ToLowerASCII(s string) string {
 	b := []byte(s)

services/context/context_template.go

@@ -5,20 +5,23 @@ package context
 
 import (
 	"context"
+	"fmt"
+	"html"
 	"html/template"
 	"net/http"
 	"strconv"
 	"strings"
+	"sync"
 	"time"
 
 	"code.gitea.io/gitea/modules/httplib"
+	"code.gitea.io/gitea/modules/public"
 	"code.gitea.io/gitea/modules/setting"
+	"code.gitea.io/gitea/modules/util"
 	"code.gitea.io/gitea/modules/web/middleware"
 	"code.gitea.io/gitea/services/webtheme"
 )
 
-// TemplateContext is a map that holds template rendering context data
-// and implements context.Context for passing request-scoped values.
 type TemplateContext map[string]any
 
 var _ context.Context = TemplateContext(nil)
@@ -85,5 +88,74 @@ func (c TemplateContext) AppFullLink(link ...string) template.URL {
 	if len(link) == 0 {
 		return template.URL(s)
 	}
-	return template.URL(s + "/" + strings.TrimPrefix(link[0], "/"))
+	return template.URL(s + strings.TrimPrefix(link[0], "/"))
+}
+
+var globalVars = sync.OnceValue(func() (ret struct {
+	scriptImportRemainingPart string
+},
+) {
+	// add onerror handler to alert users when the script fails to load:
+	// * for end users: there were many users reporting that "UI doesn't work", actually they made mistakes in their config
+	// * for developers: help them to remember to run "make watch-frontend" to build frontend assets
+	// the message will be directly put in the onerror JS code's string
+	onScriptErrorPrompt := `Please make sure the asset files can be accessed.`
+	if !setting.IsProd {
+		onScriptErrorPrompt += `\n\nFor development, run: make watch-frontend.`
+	}
+	onScriptErrorJS := fmt.Sprintf(`alert('Failed to load asset file from ' + this.src + '. %s')`, onScriptErrorPrompt)
+	ret.scriptImportRemainingPart = `onerror="` + html.EscapeString(onScriptErrorJS) + `"></script>`
+	return ret
+})
+
+func (c TemplateContext) ScriptImport(path string, typ ...string) template.HTML {
+	if len(typ) > 0 {
+		if typ[0] == "module" {
+			return template.HTML(`<script nonce="` + c.CspScriptNonce() + `" type="module" src="` + html.EscapeString(public.AssetURI(path)) + `" ` + globalVars().scriptImportRemainingPart)
+		}
+		panic("unsupported script type: " + typ[0])
+	}
+	return template.HTML(`<script nonce="` + c.CspScriptNonce() + `" src="` + html.EscapeString(public.AssetURI(path)) + `" ` + globalVars().scriptImportRemainingPart)
+}
+
+func (c TemplateContext) CspScriptNonce() (ret string) {
+	// Generate a random nonce for each request and cache it in the context to make it usable during the whole rendering process.
+	//
+	// Some "<script>" tags are not in the CSP context, so they don't need nonce,
+	// these tags are written as "<script nonce>" to help developers to know that "no script nonce attribute is missing"
+	// (e.g.: when they grep the codebase for "script" tags)
+
+	ret, _ = c["_cspScriptNonce"].(string)
+	if ret == "" {
+		ret = util.FastCryptoRandomHex(32) // 16 bytes / 128 bits entropy
+		c["_cspScriptNonce"] = ret
+	}
+	return ret
+}
+
+func (c TemplateContext) HeadMetaContentSecurityPolicy() template.HTML {
+	// The CSP problem is more complicated than it looks.
+	// Gitea was designed to support various "customizations", including:
+	// * custom themes (custom CSS and JS)
+	// * custom assets URL (CDN)
+	// * custom plugins and external renders (e.g.: PlantUML render, and the renders might also load some JS/CSS assets)
+	// There is no easy way for end users to make the CSP "source" completely right.
+	//
+	// There can be 2 approaches in the future:
+	// A. Let end users to configure their reverse proxy to add CSP header
+	//    * Browsers will merge and use the stricter rules between Gitea and reverse proxy
+	// B. Introduce some config options in "app.ini"
+	//    * Maybe this approach should be avoided, don't make the config system too complex, just let users use A
+	return template.HTML(`<meta http-equiv="Content-Security-Policy" content="` +
+		// allow all by default (the same as old releases with no CSP)
+		// "data:" is used to load the manifest in head (maybe also need to be refactored in the future)
+		// maybe some images are also loaded by "data:", need to investigate
+		`default-src * data:;` +
+
+		// enforce nonce for all scripts, disallow inline scripts
+		`script-src * 'nonce-` + c.CspScriptNonce() + `';` +
+
+		// it seems that Vue needs the unsafe-inline, and our custom colors (e.g.: label) also need it
+		`style-src * 'unsafe-inline';` +
+		`">`)
 }

templates/base/head_navbar.tmpl

@@ -2,7 +2,7 @@
 	<div class="navbar-left">
 		<!-- the logo -->
 		<a class="item" id="navbar-logo" href="{{AppSubUrl}}/" aria-label="{{if .IsSigned}}{{ctx.Locale.Tr "dashboard"}}{{else}}{{ctx.Locale.Tr "home_title"}}{{end}}">
-			<img width="30" height="30" src="https://mokoconsulting.tech/images/branding/logo.png" alt="{{ctx.Locale.Tr "logo"}}" aria-hidden="true">
+			<img width="30" height="30" src="{{AssetUrlPrefix}}/img/logo.svg" alt="{{ctx.Locale.Tr "logo"}}" aria-hidden="true">
 		</a>
 
 		<!-- mobile right menu, it must be here because in mobile view, each item is a flex column, the first item is a full row column -->

templates/base/head_opengraph.tmpl

@@ -39,7 +39,7 @@
 {{else}}
 	<meta property="og:title" content="{{AppName}}">
 	<meta property="og:type" content="website">
-	<meta property="og:image" content="https://mokoconsulting.tech/images/branding/logo.png">
+	<meta property="og:image" content="{{AssetUrlPrefix}}/img/logo.png">
 	<meta property="og:url" content="{{ctx.AppFullLink}}">
 	<meta property="og:description" content="{{MetaDescription}}">
 {{end}}

templates/status/500.tmpl

@@ -21,7 +21,7 @@
 			<div class="ui container tw-flex">
 				<div class="item tw-flex-1">
 					<a href="{{AppSubUrl}}/" aria-label="{{ctx.Locale.Tr "home_title"}}">
-						<img width="30" height="30" src="https://mokoconsulting.tech/images/branding/logo.png" alt="{{ctx.Locale.Tr "logo"}}" aria-hidden="true">
+						<img width="30" height="30" src="{{AssetUrlPrefix}}/img/logo.svg" alt="{{ctx.Locale.Tr "logo"}}" aria-hidden="true">
 					</a>
 				</div>
 				<div class="item">

templates/user/auth/signin_openid.tmpl

@@ -3,7 +3,7 @@
 	<div class="ui middle very relaxed page grid">
 		<div class="column tw-flex tw-flex-col tw-gap-4 tw-max-w-2xl tw-m-auto">
 			<a href="{{AppSubUrl}}/user/login" class="tw-mx-auto">
-				<img width="100" height="100" src="https://mokoconsulting.tech/images/branding/logo.png" alt="{{ctx.Locale.Tr "logo"}}">
+				<img width="100" height="100" src="{{AssetUrlPrefix}}/img/logo.svg" alt="{{ctx.Locale.Tr "logo"}}">
 			</a>
 
 			<div class="ui container fluid">