refactor: ♻️ ContentSecurityPolicy as an object

[matthieujacq]

Description

Improve developper experience with CSP by turning the csp into object instead of a large string.

Developped in TDD with the following test

import { describe, expect } from "vitest";
process.env.NEXT_PUBLIC_SUPABASE_URL = "XXX";
process.env.NEXT_PUBLIC_BACKEND_URL = "YYY";

const OldContentSecurityPolicy =
  `default-src 'self' https://fonts.googleapis.com ${process.env.NEXT_PUBLIC_SUPABASE_URL} https://api.june.so https://www.quivr.app/;
 connect-src 'self' ${process.env.NEXT_PUBLIC_SUPABASE_URL} ${process.env.NEXT_PUBLIC_BACKEND_URL} https://api.june.so https://api.openai.com https://cdn.growthbook.io https://vitals.vercel-insights.com/v1/vitals;
 img-src 'self' https://www.gravatar.com data:;
 media-src 'self' https://user-images.githubusercontent.com https://www.quivr.app/ https://quivr-cms.s3.eu-west-3.amazonaws.com;
 script-src 'unsafe-inline' 'unsafe-eval' https://va.vercel-scripts.com/ https://www.quivr.app/ https://www.google-analytics.com/;
 frame-ancestors 'none';
 style-src 'unsafe-inline' https://www.quivr.app/;`.replace(/\n/g, "");

const ContentSecurityPolicy = {
  "default-src": [
    "'self'",
    "https://fonts.googleapis.com",
    process.env.NEXT_PUBLIC_SUPABASE_URL,
    "https://api.june.so",
    "https://www.quivr.app/",
  ],
  "connect-src": [
    "'self'",
    process.env.NEXT_PUBLIC_SUPABASE_URL,
    process.env.NEXT_PUBLIC_BACKEND_URL,
    "https://api.june.so",
    "https://api.openai.com",
    "https://cdn.growthbook.io",
    "https://vitals.vercel-insights.com/v1/vitals",
  ],
  "img-src": ["'self'", "https://www.gravatar.com", "data:"],
  "media-src": [
    "'self'",
    "https://user-images.githubusercontent.com",
    "https://www.quivr.app/",
    "https://quivr-cms.s3.eu-west-3.amazonaws.com",
  ],
  "script-src": [
    "'unsafe-inline'",
    "'unsafe-eval'",
    "https://va.vercel-scripts.com/",
    "https://www.quivr.app/",
    "https://www.google-analytics.com/",
  ],
  "frame-ancestors": ["'none'"],
  "style-src": ["'unsafe-inline'", "https://www.quivr.app/"],
};

const cspString = Object.entries(ContentSecurityPolicy)
  .map(([key, values]) => `${key} ${values.join(" ")};`)
  .join(" ");

describe("Test Csp", () => {
  expect(cspString).toEqual(OldContentSecurityPolicy);
});

External checks

Syntax validity checked with : https://csp-evaluator.withgoogle.com/

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
docs	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Oct 3, 2023 2:17pm
quivr-strapi	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Oct 3, 2023 2:17pm
quivrapp	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Oct 3, 2023 2:17pm

[github-actions]

Risk Level 2 - /home/runner/work/quivr/quivr/frontend/next.config.js

The code changes seem to be mostly about adding a Content Security Policy (CSP) and updating the security headers. This is generally a good practice for improving the security of the application. However, there are a few points to consider:

1. Use of 'unsafe-inline' and 'unsafe-eval' in script-src: This can expose the application to cross-site scripting (XSS) attacks. If possible, try to avoid using them. If it's necessary, make sure to sanitize any user inputs and outputs.

2. Exposure of environment variables: The code is using environment variables directly in the CSP. This could potentially expose sensitive information. It would be better to use a configuration file or a secrets manager.

3. Hardcoding URLs: The URLs are hardcoded in the CSP. This could make the code difficult to maintain, especially if the URLs change frequently. Consider using environment variables or a configuration file for these URLs.

Here's an example of how you could refactor the CSP:

const CSP_URLS = process.env.CSP_URLS ? process.env.CSP_URLS.split(',') : [];

const ContentSecurityPolicy = {
  \"default-src\": [
    \"'self'\",
    ...CSP_URLS,
  ],
  // rest of the CSP...
};

This way, you can manage the URLs from the environment variables.

---

🔒🚫🔧

---

Powered by Code Review GPT