Adding inline script hashes to CSP (#24311)

Docusaurus generates only 2 inline scripts during our website build, one
for banner insertion and other one for setting dark/light theme. By
doing a search on script tags on our build output, these are the only
ones. After adding their respective hashes and testing the website on a
staging environment, I could confirm that such scripts don't get flagged
by the CSP. I also edited some files in our docs folder (react and docs)
to see if script generation changed, but remained the same.

In addition, adding an extra step to our website deployment pipeline to
generate hashes for every script in our index.html and verifies that
matches with the ones we have hard coded in our config file. This will
give us a failure in case someone changes something in our code that
changes the generated inline scripts. No check on other files is needed
since the option 'self' in CSP allows us run external scripts (in
comparison to inline scripts which we have removed the option to permit
(unsafe-inline)). Moving script-src to report only mode again to have a
test period.

Author: dannimad

docs/static/staticwebapp.config.json

@@ -1,8 +1,7 @@
 {
 	"globalHeaders": {
 		"cache-control": "must-revalidate, max-age=3600",
-		"Content-Security-Policy": "script-src 'self' 'unsafe-inline' 'unsafe-eval' https:; object-src 'none'; base-uri 'self';",
-		"Content-Security-Policy-Report-Only": "require-trusted-types-for 'script'; trusted-types default; report-uri https://csp.microsoft.com/report/FluidFramework-WW"
+		"Content-Security-Policy-Report-Only": "script-src 'self' 'sha256-O8zYuOjyuzUZDv3fub7DKfAs5TEd1dG+fz+hCSCFmQA=' 'sha256-faMHt+UAWeoFU7ZBnPhfAu9zOnnNUwL4RYp09gSUEjU=' ; base-uri 'self'; object-src 'none'; require-trusted-types-for 'script'; trusted-types default; report-uri https://csp.microsoft.com/report/FluidFramework-WW"
 	},
 	"navigationFallback": {
 		"rewrite": "/api/fallback"

docs/validateHashes.sh

@@ -0,0 +1,43 @@
+#!/bin/bash
+set -eu -o pipefail
+# This script validates the hashes of inline scripts in the index.html file against the configured hashes in the staticwebapp.config.json file.
+indexFile="build/index.html"
+configFile="static/staticwebapp.config.json"
+
+echo "Extracting and hashing inline scripts from $indexFile"
+
+tmpHashesFile="generated_hashes.txt"
+> "$tmpHashesFile"
+
+# Extract inline scripts and compute hashes
+awk 'BEGIN { RS="</script>"; FS="<script[^>]*>" }
+NF>1 { print $2 }' "$indexFile" | while read -r scriptContent; do
+if [[ "$scriptContent" != "" ]]; then
+echo "$scriptContent" | tr -d '\n'| openssl dgst -sha256 -binary | openssl base64 | sed 's/^/sha256-/' >> "$tmpHashesFile"
+fi
+done
+
+echo "Extracted Hashes:"
+cat "$tmpHashesFile"
+
+echo "Reading configured hashes from $configFile"
+grep -oE "sha256-[A-Za-z0-9+/=]{43,45}" "$configFile" | sort | uniq > expected_hashes.txt
+cat expected_hashes.txt
+
+echo "Validating..."
+fail=0
+while read -r actualHash; do
+if ! grep -q "$actualHash" expected_hashes.txt; then
+echo "Missing hash in config: $actualHash"
+fail=1
+else
+echo "Hash matched: $actualHash"
+fi
+done < "$tmpHashesFile"
+
+if [ "$fail" -ne 0 ]; then
+echo "Inline script hashes do not match configured values. Override the hashes in $configFile with the extracted hashes."
+exit 1
+fi
+
+echo "All inline script hashes are valid."

tools/pipelines/deploy-website.yml

@@ -137,6 +137,13 @@ stages:
           env:
             INSTRUMENTATION_KEY: $(INSTRUMENTATION_KEY)
 
+        - task: Bash@3
+          displayName: 'Check inline script hashes correctness'
+          inputs:
+            targetType: 'filePath'
+            workingDirectory: $(Build.SourcesDirectory)/docs
+            filePath: '$(Build.SourcesDirectory)/docs/validateHashes.sh'
+
         # Run the tests
         - task: Npm@1
           displayName: Run tests