1257: add CSP to scratch.html (#1438)

issue:
[1257](RaspberryPiFoundation/digital-editor-issues#1257)

I’ve built the CSP to try to tap into the env variables that we use for
deployments.

I’ve also tried to do some due diligence on the testing staging and
staging environments in order to anticipate any problems - I did find
something that was a begin pulled in on those environments that I’ve
added a workaround for [(see the comment
below)](#1438 (comment))

### Local dev CSP output
This has to feature 'unsafe-eval' to allow the dev server to work
```
<meta http-equiv="Content-Security-Policy" content="
  default-src 'self';
  base-uri 'none';
  object-src 'none';
  script-src 'self' 'unsafe-inline' 'unsafe-eval';
  style-src 'self' 'unsafe-inline';
  worker-src 'self' blob:;
  child-src 'self' blob:;
  connect-src 'self' http://localhost:3009 http://localhost:3011;
  img-src 'self' data: blob: http://localhost:3011;
  media-src 'self' blob: http://localhost:3011;
  font-src 'self' data: http://localhost:3011;
  form-action 'self';
  upgrade-insecure-requests;
">
```

###  Staging CSP output (take values from deploy-main in ci-cd.yml)

As the test environment uses editor-ui in staging that testing api needs
to be listed on staging as well
```
<meta http-equiv="Content-Security-Policy" content="
  default-src 'self';
  base-uri 'none';
  object-src 'none';
  script-src 'self' 'unsafe-inline'  'unsafe-eval';
  style-src 'self' 'unsafe-inline';
  worker-src 'self' blob:;
  child-src 'self' blob:;
  connect-src 'self' https://staging-editor-api.raspberrypi.org https://test-editor-api.raspberrypi.org https://staging-editor-static.raspberrypi.org;
  img-src 'self' data: blob: https://staging-editor-static.raspberrypi.org;
  media-src 'self' blob: https://staging-editor-static.raspberrypi.org;
  font-src 'self' data: https://staging-editor-static.raspberrypi.org;
  form-action 'self';
  upgrade-insecure-requests;
">
```

###  Production (take values from deploy-tag in ci-cd.yml)
```
<meta http-equiv="Content-Security-Policy" content="
  default-src 'self';
  base-uri 'none';
  object-src 'none';
  script-src 'self' 'unsafe-inline'  'unsafe-eval';
  style-src 'self' 'unsafe-inline';
  worker-src 'self' blob:;
  child-src 'self' blob:;
  connect-src 'self' https://editor-api.raspberrypi.org https://editor-static.raspberrypi.org;
  img-src 'self' data: blob: https://editor-static.raspberrypi.org;
  media-src 'self' blob: https://editor-static.raspberrypi.org;
  font-src 'self' data: https://editor-static.raspberrypi.org;
  form-action 'self';
  upgrade-insecure-requests;
">
```
###  CSP violations for assets

Regarding current attempts to access images from
`https://cdn.assets.scratch.mit.edu/` - the set up above will result in
CSP errors in the console. 




<img width="643" height="146" alt="CDN-ASSET-SCRATCH_CSP"
src="https://github.com/user-attachments/assets/c5961ada-15c6-4cb3-bf96-fe66b52493c1"
/>

This should be short lived until we arrive at the solution for asset
hosting - I don’t think this will stop anything else in the app working
as a results. If we choose to host images on a different domain to the
ones already stated we should be able to just add that domain to the
img-src/media-src CSP.

Author: DNR500

.github/workflows/ci-cd.yml

@@ -152,6 +152,7 @@ jobs:
       environment: staging
       react_app_base_url: ""
       react_app_sentry_env: staging
+      csp_api_multiple_origins: "https://staging-editor-api.raspberrypi.org https://test-editor-api.raspberrypi.org"
     secrets: inherit
 
   deploy-branch:

.github/workflows/deploy.yml

@@ -66,6 +66,10 @@ on:
         required: false
         default: "https://staging-editor.raspberrypi.org,https://staging-editor-static.raspberrypi.org,https://test-editor.raspberrypi.org"
         type: string
+      csp_api_multiple_origins:
+        required: false
+        default: ""
+        type: string
 
     secrets:
       AWS_ACCESS_KEY_ID:
@@ -158,12 +162,13 @@ jobs:
           REACT_APP_SENTRY_DSN: ${{ inputs.react_app_sentry_dsn }}
           REACT_APP_SENTRY_ENV: ${{ inputs.react_app_sentry_env }}
           REACT_APP_ALLOWED_IFRAME_ORIGINS: ${{ inputs.react_app_allowed_iframe_origins }}
+          CSP_API_MULTIPLE_ORIGINS: ${{ inputs.csp_api_multiple_origins }}
 
       - name: Deploy site to S3 bucket
         if: env.AWS_SECRET_ACCESS_KEY != ''
         run: |
           aws s3 sync ./build/ s3://${{ secrets.AWS_S3_BUCKET }}/${{ needs.setup-environment.outputs.deploy_dir }} --endpoint ${{ secrets.AWS_ENDPOINT }} --progress-frequency 5
-          aws s3 sync ./build/chunks/ s3://${{ secrets.AWS_S3_BUCKET }}/chunks/ --endpoint ${{ secrets.AWS_ENDPOINT }} --exclude "*" --include "fetch-worker*" --progress-frequency 5
+          aws s3 sync ./build/chunks/ s3://${{ secrets.AWS_S3_BUCKET }}/chunks/ --endpoint ${{ secrets.AWS_ENDPOINT }} --exclude "*" --include "fetch-worker*" --include "mediapipe/**" --progress-frequency 5
         env:
           AWS_ACCESS_KEY_ID: ${{ secrets.AWS_ACCESS_KEY_ID }}
           AWS_SECRET_ACCESS_KEY: ${{ secrets.AWS_SECRET_ACCESS_KEY }}

src/scratch.html

@@ -3,6 +3,24 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width" />
+    <meta
+      http-equiv="Content-Security-Policy"
+      content="
+        default-src 'self';
+        base-uri 'none';
+        object-src 'none';
+        script-src 'self' 'unsafe-inline' 'unsafe-eval';
+        style-src 'self' 'unsafe-inline';
+        worker-src 'self' blob:;
+        child-src 'self' blob:;
+        connect-src 'self' <%= cspApiMultipleOrigins || cspApiOrigin %> <%= cspAssetOrigin %> <%= isDev ? "ws: wss:" : "" %>;
+        img-src 'self' data: blob: <%= cspAssetOrigin %>;
+        media-src 'self' blob: <%= cspAssetOrigin %>;
+        font-src 'self' data: <%= cspAssetOrigin %>;
+        form-action 'self';
+        upgrade-insecure-requests;
+      "
+    />
     <title>Scratch</title>
     <style>
       #scratch-loading {

webpack.config.js

@@ -1,14 +1,52 @@
 const path = require("path");
+const dotenv = require("dotenv");
 const Dotenv = require("dotenv-webpack");
 const HtmlWebpackPlugin = require("html-webpack-plugin");
 const WorkerPlugin = require("worker-plugin");
 const CopyWebpackPlugin = require("copy-webpack-plugin");
 const { BundleAnalyzerPlugin } = require("webpack-bundle-analyzer");
 
+dotenv.config({ path: path.resolve(__dirname, ".env") });
+
 let publicUrl = process.env.PUBLIC_URL || "/";
 if (!publicUrl.endsWith("/")) {
   publicUrl += "/";
 }
+const isDev = process.env.NODE_ENV !== "production";
+
+const toOrigin = (envVarName, value) => {
+  const normalizedValue = String(value || "")
+    .trim()
+    .replace(/^['"]|['"]$/g, "");
+
+  if (!normalizedValue) return "";
+
+  try {
+    return new URL(normalizedValue).origin;
+  } catch (_) {
+    throw new Error(
+      `Invalid URL in ${envVarName}: "${value}". ` +
+        `Expected an absolute URL, for example "https://example.com".`,
+    );
+  }
+};
+
+const cspApiOrigin = toOrigin(
+  "REACT_APP_API_ENDPOINT",
+  process.env.REACT_APP_API_ENDPOINT,
+);
+const cspAssetOrigin = toOrigin("ASSETS_URL", process.env.ASSETS_URL);
+
+// When present these override cspApiOrigin for CSP API/connect-src origins.
+// This supports staging setups that need to allow multiple API origins,
+// such as also reaching the test API.
+const cspApiMultipleOrigins = String(process.env.CSP_API_MULTIPLE_ORIGINS || "")
+  .split(/[\s,]+/)
+  .map((originValue, index) =>
+    toOrigin(`CSP_API_MULTIPLE_ORIGINS[${index}]`, originValue),
+  )
+  .filter(Boolean)
+  .join(" ");
 
 const scratchStaticDir = path.resolve(
   __dirname,
@@ -237,6 +275,10 @@ const scratchConfig = {
       chunks: ["scratch"],
       templateParameters: {
         publicUrl: publicUrl,
+        cspApiOrigin,
+        cspApiMultipleOrigins,
+        cspAssetOrigin,
+        isDev,
       },
     }),
     new CopyWebpackPlugin({