refactor: 🔒 Improve security of frontend with nonce, CSP and security headers

nuxt.config.ts

@@ -7,10 +7,29 @@ export default defineNuxtConfig({
         "nuxt-headlessui",
         "@nuxt/fonts",
         "nuxt-icon",
-        "@vee-validate/nuxt",
         //"nuxt-shiki",
+        "@vee-validate/nuxt",
+        "nuxt-security",
     ],
-
+    security: {
+        headers: {
+            // Nuxt DevTools
+            crossOriginEmbedderPolicy:
+                process.env.NODE_ENV === "development"
+                    ? "unsafe-none"
+                    : "require-corp",
+            contentSecurityPolicy: {
+                "img-src": ["'self'", "data:", "https:"],
+                "script-src": ["'nonce-{{nonce}}'", "'strict-dynamic'"],
+            },
+            xFrameOptions: "DENY",
+        },
+        rateLimiter: {
+            headers: true,
+            tokensPerInterval: 300,
+            interval: 300000,
+        },
+    },
     app: {
         head: {
             link: [

package.json

@@ -38,6 +38,7 @@
         "nuxt": "^3.11.2",
         "nuxt-headlessui": "^1.2.0",
         "nuxt-icon": "^0.6.10",
+        "nuxt-security": "^1.4.3",
         "nuxt-shiki": "^0.3.0",
         "shiki": "^1.3.0",
         "vue": "^3.4.21",