chore: add ngnix security headers (#964)

Co-authored-by: Ariel Vinograd <71963953+arielvino@users.noreply.github.com>

Author: Agastya18

.github/workflows/validate.yaml

@@ -294,6 +294,20 @@ jobs:
       - name: Prepare for Testing
         run: |
           echo "SHORT_SHA=$(echo ${{ github.event.pull_request.head.sha }} | cut -c1-7)" >> $GITHUB_ENV
+      # Visual tests must run against the nginx-served Docker artifact (with the
+      # production CSP/security headers), not the bare Vite dev server. Start the
+      # container on :3000 so Playwright's webServer (reuseExistingServer) reuses
+      # it instead of spinning up `npm start`. Otherwise CSP regressions (e.g. a
+      # missing connect-src breaking MSW-mocked stories) go undetected.
+      - name: Download Docker image artifact
+        uses: actions/download-artifact@v8
+        with:
+          name: docker-image
+          path: /tmp
+      - name: Load Docker image
+        run: docker load -i /tmp/docker-image.tar
+      - name: Start application container
+        run: docker run -d -p 3000:80 ${{ env.DOCKER_APP_IMAGE_NAME }}:${{ env.DOCKER_APP_IMAGE_TAG }}
       - uses: actions/setup-node@v6
         with:
           node-version: 24

nginx-default.conf

@@ -1,9 +1,51 @@
 server {
     listen 80;
     server_name localhost;
+    server_tokens off;  # don't leak the nginx version in the Server header / error pages
+
+    # Two locations serve from the same root with near-identical security headers. nginx
+    # does not inherit add_header into a location that sets its own, so every header is
+    # repeated in both blocks — keep them in sync.
+
+    # Storybook (built to /storybook). Headers mirror the app block below; its CSP differs
+    # only where Storybook needs it (see the directive notes on the CSP line). Declared
+    # before `location /` so it matches first.
+    location /storybook/ {
+        root /usr/share/nginx/html;
+        try_files $uri $uri/ /storybook/index.html;
+
+        add_header X-Content-Type-Options nosniff always;                        # block MIME sniffing
+        add_header X-Frame-Options SAMEORIGIN always;                            # legacy clickjacking guard (see frame-ancestors)
+        add_header X-XSS-Protection 0 always;                                    # deprecated; OWASP recommends disabling
+        add_header Referrer-Policy strict-origin-when-cross-origin always;
+        add_header Cross-Origin-Opener-Policy "same-origin-allow-popups" always; # isolate the browsing context, keep popups
+        add_header Permissions-Policy "camera=(), microphone=(), payment=(), usb=(), browsing-topics=()" always;  # disable unused features + Topics API
+        # CSP — the app block below documents each directive; Storybook differs only in:
+        # - script-src-elem 'unsafe-inline': Storybook's built HTML inlines its bootstrap <script>s.
+        # - connect-src 'self' *.hasadna.org.il: MSW-mocked stories fetch the API (CSP is checked before the service worker intercepts).
+        # - no GA/GTM hosts: Storybook runs no analytics.
+        add_header Content-Security-Policy "default-src 'self'; script-src 'self'; script-src-elem 'self' 'unsafe-inline'; style-src 'self'; style-src-elem 'self' 'unsafe-inline'; img-src 'self' data: blob: https://*.openstreetmap.fr https://*.openstreetmap.org; connect-src 'self' https://*.hasadna.org.il; frame-src 'self' https://www.youtube.com https://www.youtube-nocookie.com; worker-src 'self' blob:; frame-ancestors 'self';" always;
+    }
+
     location / {
         root /usr/share/nginx/html;
         index index.html index.htm;
         try_files $uri /index.html;
+
+        add_header X-Content-Type-Options nosniff always;                        # block MIME sniffing
+        add_header X-Frame-Options SAMEORIGIN always;                            # legacy clickjacking guard (see frame-ancestors)
+        add_header X-XSS-Protection 0 always;                                    # deprecated; OWASP recommends disabling
+        add_header Referrer-Policy strict-origin-when-cross-origin always;
+        add_header Cross-Origin-Opener-Policy "same-origin-allow-popups" always; # isolate the browsing context, keep _blank/window.open links
+        add_header Permissions-Policy "camera=(), microphone=(), payment=(), usb=(), browsing-topics=()" always;  # disable unused features + Topics API (geolocation/clipboard/fullscreen/autoplay stay default-allowed)
+        # CSP, per directive:
+        # - script-src: no 'unsafe-inline'/'unsafe-eval' (built index.html has no inline scripts); GA/GTM hosts load the analytics scripts.
+        # - style-src-elem 'unsafe-inline': MUI/emotion and styled-components inject runtime <style> elements. style-src omits
+        #   'unsafe-inline', so inline style="" attributes stay blocked (the app sets none — React style={{}} writes via the CSSOM).
+        # - img-src: openstreetmap tiles, google-analytics beacon pixels.
+        # - connect-src: *.hasadna.org.il for the stride/backend APIs, google-analytics/googletagmanager for analytics.
+        # - frame-src: youtube(-nocookie).com instruction videos, docs.google.com hackathon registration form (renders while POSTPONED=true).
+        # - frame-ancestors 'self': CSP3 clickjacking control; same effect as the X-Frame-Options SAMEORIGIN above.
+        add_header Content-Security-Policy "default-src 'self'; script-src 'self' https://www.google-analytics.com https://www.googletagmanager.com; style-src 'self'; style-src-elem 'self' 'unsafe-inline'; img-src 'self' data: blob: https://*.openstreetmap.fr https://*.openstreetmap.org https://www.google-analytics.com; connect-src 'self' https://*.hasadna.org.il https://www.google-analytics.com https://region1.google-analytics.com https://www.googletagmanager.com; frame-src 'self' https://www.youtube.com https://www.youtube-nocookie.com https://docs.google.com; worker-src 'self' blob:; frame-ancestors 'self';" always;
     }
 }