server: Add nonce to AutoSizer (#7700)

`AutoSizer` creates style elements that need a nonce to pass our CSP.

Also add CSP v2 fallback sources for browsers that don't support CSP v3
(`strict-dynamic`).

<!-- Optional: Provide additional context (beyond the PR title). -->

<!-- Optional: link a GitHub issue.
Example: "Fixes #123" will auto-close #123 when the PR is merged. -->

**Related issues**: buildbuddy-io/buildbuddy-internal#3911

app/terminal/BUILD

@@ -8,6 +8,7 @@ ts_library(
     name = "terminal",
     srcs = ["terminal.tsx"],
     deps = [
+        "//app/capabilities",
         "//app/components/input",
         "//app/components/spinner",
         "//app/router",

app/terminal/terminal.tsx

@@ -10,6 +10,7 @@ import AutoSizer from "react-virtualized-auto-sizer";
 import { Row, ROW_HEIGHT_PX } from "./row";
 import { getContent, updatedMatchIndexForSearch, toPlainText, Range, ListData } from "./text";
 import router from "../router/router";
+import capabilities from "../capabilities/capabilities";
 
 const WRAP_LOCAL_STORAGE_KEY = "terminal-wrap";
 const WRAP_LOCAL_STORAGE_VALUE = "wrap";
@@ -441,7 +442,9 @@ export default class TerminalComponent extends React.Component<TerminalProps, St
           {this.props.loading ? (
             <div className={`loading ${this.props.lightTheme ? "" : "loading-dark-terminal"}`} />
           ) : (
-            <AutoSizer>
+            // AutoSizer creates style elements that need a nonce to pass a
+            // strict CSP.
+            <AutoSizer nonce={capabilities.config.cspNonce || ""}>
               {({ height, width }) => (
                 <FixedSizeList<ListData>
                   ref={(list) => this.setList(list)}

proto/config.proto

@@ -171,6 +171,9 @@ message FrontendConfig {
 
   // Whether remote bazel buttons are enabled in the UI.
   bool bazel_buttons_enabled = 56;
+
+  // The Content Security Policy nonce to use for inline <style> elements.
+  string csp_nonce = 57;
 }
 
 message Region {

server/http/csp/csp.go

@@ -8,7 +8,8 @@ import (
 )
 
 // Nonce is the context key type for the per-request CSP nonce.
-// The associated value is always of type template.HTMLAttr.
+// The associated value is always of type string and should be inserted
+// between the double quotes of a nonce = "..." attribute.
 type Nonce struct{}
 
 const ReportingEndpoint = "/csp-report"

server/http/interceptors/interceptors.go

@@ -7,7 +7,6 @@ import (
 	"encoding/base64"
 	"flag"
 	"fmt"
-	"html/template"
 	"io"
 	"net"
 	"net/http"
@@ -52,7 +51,6 @@ func getContentSecurityPolicyHeaderValue(nonce string) string {
 	}
 	return strings.Join([]string{
 		"default-src 'self'",
-		"style-src 'self' https://fonts.googleapis.com/css",
 		// Monaco editor dynamically loads fonts from its CDN.
 		"font-src 'self' https://fonts.gstatic.com https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/",
 		// We directly embed profile images from Google accounts and don't control their URLs.
@@ -68,11 +66,12 @@ func getContentSecurityPolicyHeaderValue(nonce string) string {
 		"report-to " + contentSecurityPolicyReportingEndpointName,
 		"report-uri " + csp.ReportingEndpoint,
 		// libsodium.js requires 'wasm-unsafe-eval' to avoid a fallback to asm.js.
-		fmt.Sprintf("script-src 'self' 'strict-dynamic' 'wasm-unsafe-eval' 'nonce-%s'", nonce),
+		fmt.Sprintf("script-src 'nonce-%s' 'strict-dynamic' 'wasm-unsafe-eval' 'self' https: 'unsafe-inline'", nonce),
+		fmt.Sprintf("style-src 'nonce-%s' 'self' https://fonts.googleapis.com/css", nonce),
 	}, ";")
 }
 
-func setContentSecurityPolicy(h http.Header) template.HTMLAttr {
+func setContentSecurityPolicy(h http.Header) string {
 	nonceBytes := make([]byte, 16)
 	_, err := rand.Read(nonceBytes)
 	if err != nil {
@@ -81,7 +80,7 @@ func setContentSecurityPolicy(h http.Header) template.HTMLAttr {
 	nonce := base64.StdEncoding.EncodeToString(nonceBytes)
 	// TODO: Enable this by dropping the "-Report-Only" suffix.
 	h.Set("Content-Security-Policy-Report-Only", getContentSecurityPolicyHeaderValue(nonce))
-	return template.HTMLAttr(fmt.Sprintf(`nonce="%s"`, nonce))
+	return nonce
 }
 
 func SetSecurityHeaders(next http.Handler) http.Handler {

server/static/static.go

@@ -152,11 +152,12 @@ type FrontendTemplateData struct {
 	GaEnabled bool
 	// Config is the FrontendConfig proto serialized using jsonpb.
 	Config template.JS
-	// Nonce is the Content-Security-Policy nonce attribute to use for <script> elements.
-	Nonce template.HTMLAttr
+	// Nonce is the Content-Security-Policy nonce value.
+	Nonce string
 }
 
 func serveIndexTemplate(ctx context.Context, env environment.Env, tpl *template.Template, version, jsPath, stylePath, appBundleHash string, w http.ResponseWriter) {
+	nonce, _ := ctx.Value(csp.Nonce{}).(string)
 	config := cfgpb.FrontendConfig{
 		Version:                                version,
 		AppBundleHash:                          appBundleHash,
@@ -209,14 +210,14 @@ func serveIndexTemplate(ctx context.Context, env environment.Env, tpl *template.
 		TargetFlakesUiEnabled:                  *targetFlakesUIEnabled && env.GetOLAPDBHandle() != nil,
 		CodeEditorV2Enabled:                    *codeEditorV2Enabled,
 		BazelButtonsEnabled:                    *bazelButtonsEnabled,
+		CspNonce:                               nonce,
 	}
 
 	configJSON, err := protojson.Marshal(&config)
 	if err != nil {
 		http.Error(w, err.Error(), http.StatusInternalServerError)
 		return
 	}
-	nonce, _ := ctx.Value(csp.Nonce{}).(template.HTMLAttr)
 	w.Header().Set("Content-Type", "text/html")
 	err = tpl.ExecuteTemplate(w, indexTemplateFilename, &FrontendTemplateData{
 		StylePath:        stylePath,

static/index.html

@@ -20,13 +20,13 @@
     <meta name="theme-color" content="#212121" />
     <meta charset="UTF-8" />
 
-    <script {{.Nonce}}>
+    <script nonce="{{.Nonce}}">
       window.buildbuddyConfig = {{.Config}};
     </script>
 
     {{if .GaEnabled}}
-    <script {{.Nonce}} async src="https://www.googletagmanager.com/gtag/js?id=UA-156160991-2"></script>
-    <script {{.Nonce}}>
+    <script nonce="{{.Nonce}}" async src="https://www.googletagmanager.com/gtag/js?id=UA-156160991-2"></script>
+    <script nonce="{{.Nonce}}">
       window.dataLayer = window.dataLayer || [];
       function gtag() {
         dataLayer.push(arguments);
@@ -41,5 +41,5 @@
       <div class="loading"></div>
     </div>
   </body>
-  <script {{.Nonce}} type="module" src="{{.JsEntryPointPath}}"></script>
+  <script nonce="{{.Nonce}}" type="module" src="{{.JsEntryPointPath}}"></script>
 </html>