feat: configure CSP (#1357)

* feat: configure CSP

* test: fix Argos CSP

apps/backend/src/config/index.ts

@@ -61,6 +61,14 @@ const config = convict({
       default: false,
     },
   },
+  csp: {
+    scriptSrc: {
+      doc: "Content Security Policy script-src",
+      format: Array,
+      default: [],
+      env: "CSP_SCRIPT_SRC",
+    },
+  },
   api: {
     baseUrl: {
       doc: "The API base URL",

apps/backend/src/web/app.ts

@@ -60,7 +60,24 @@ export const createApp = async () => {
   app.use(
     helmet({
       // https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy
-      contentSecurityPolicy: false,
+      contentSecurityPolicy: {
+        directives: {
+          "default-src": ["'self'"],
+          "img-src": [
+            "'self'",
+            "https://argos-ci.com",
+            "https://github.com",
+            "https://avatars.githubusercontent.com",
+            "https://argos.twic.pics",
+          ],
+          "script-src": [
+            "'self'",
+            // Script to update color classes
+            "'sha256-3eiqAvd5lbIOVQdobPBczwuRAhAf7/oxg3HH2aFmp8Y='",
+            ...config.get("csp.scriptSrc"),
+          ],
+        },
+      },
       crossOriginEmbedderPolicy: false,
       crossOriginResourcePolicy: false,
       crossOriginOpenerPolicy: false,

package.json

@@ -32,7 +32,7 @@
   "packageManager": "[email protected]",
   "devDependencies": {
     "@0no-co/graphqlsp": "^1.12.13",
-    "@argos-ci/playwright": "^3.4.1",
+    "@argos-ci/playwright": "^3.5.0",
     "@graphql-codegen/cli": "^5.0.2",
     "@graphql-codegen/client-preset": "^4.3.3",
     "@graphql-codegen/fragment-matcher": "^5.0.2",

playwright.config.mjs

@@ -1,5 +1,6 @@
 // @ts-check
-import { devices } from "@playwright/test";
+import { getCSPScriptHash } from "@argos-ci/playwright";
+import { defineConfig, devices } from "@playwright/test";
 
 import argosConfig from "./apps/backend/src/config/index.js";
 
@@ -13,7 +14,7 @@ import argosConfig from "./apps/backend/src/config/index.js";
  * @see https://playwright.dev/docs/test-configuration
  * @type {import('@playwright/test').PlaywrightTestConfig}
  */
-const config = {
+const config = defineConfig({
   testDir: "./tests",
   /* Maximum time one test can run for. */
   timeout: 30 * 1000,
@@ -77,7 +78,10 @@ const config = {
     port: 3000,
     timeout: 10 * 1000,
     reuseExistingServer: false,
+    env: {
+      CSP_SCRIPT_SRC: `${getCSPScriptHash()},'unsafe-eval'`,
+    },
   },
-};
+});
 
 export default config;