Add CSP rules for tldraw-client (#35)

* Add CSP rules for tldraw-client

---------

Co-authored-by: Viktoriia <1>
Co-authored-by: davwas <daw.wasik@gmail.com>

Dockerfile

@@ -8,7 +8,7 @@ WORKDIR /app
 COPY package.json package-lock.json ./
 RUN npm ci
 
-COPY babel.config.js .eslintrc.js LICENSE.md tsconfig.json .prettierrc.js ./
+COPY babel.config.js .eslintrc.js craco.config.js LICENSE.md tsconfig.json .prettierrc.js ./
 COPY public ./public
 COPY src ./src
 RUN NODE_ENV=production npm run build
@@ -20,6 +20,7 @@ RUN mkdir /etc/nginx/templates
 
 COPY nginx.conf.template /etc/nginx/templates/default.conf.template
 COPY --from=build-stage /app/build /usr/share/nginx/html
+COPY --from=build-stage /app/build/favicon.ico /usr/share/nginx/html/static/media
 
 EXPOSE 3046
 

craco.config.js

@@ -0,0 +1,31 @@
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+
+class NoncePlaceholderPlugin {
+  apply(compiler) {
+    compiler.hooks.thisCompilation.tap(
+      'NoncePlaceholderPlugin',
+      (compilation) => {
+        HtmlWebpackPlugin.getHooks(compilation).afterTemplateExecution.tapAsync(
+          'NoncePlaceholderPlugin',
+          (data, cb) => {
+            const { headTags } = data;
+            headTags.forEach((x) => {
+              x.attributes.nonce = '**CSP_NONCE**';
+            });
+            cb(null, data);
+          }
+        );
+      }
+    );
+  }
+}
+
+module.exports = {
+  webpack: {
+    plugins: {
+      add: [
+        new NoncePlaceholderPlugin(),
+      ],
+    },
+  },
+};

nginx.conf.template

@@ -2,6 +2,8 @@ server {
     listen 3046;
     server_name localhost;
 
+    set $csp "default-src 'self'; base-uri 'self'; script-src 'nonce-$request_id' 'strict-dynamic' https:; object-src 'none'; font-src 'self' data:; img-src 'self' data:; style-src 'self' 'unsafe-inline';";
+
     location /tldraw-client-runtime.config.json {
         return 200 '{ "tldrawServerURL" : "${TLDRAW_SERVER_URL}" }';
         add_header Content-Type application/json;
@@ -14,6 +16,12 @@ server {
     location / {
         root /usr/share/nginx/html;
         index index.html index.htm;
+        add_header Content-Security-Policy "${csp}";
+        add_header X-Content-Type-Options nosniff;
+        add_header Referrer-Policy 'same-origin';
+        add_header X-XSS-Protection '1; mode=block';
+        sub_filter_once off;
+        sub_filter '**CSP_NONCE**' $request_id;
         try_files $uri /index.html;
     }
 
@@ -22,4 +30,4 @@ server {
     location = /50x.html {
         root /usr/share/nginx/html;
     }
-}
+}