SeLub · February 9, 2025 06:01 · Feb 9, 2025
diff --git a/how_to_restrict_access_to_api.md b/how_to_restrict_access_to_api.md
@@ -0,0 +1,85 @@
+# How to restrict API access to our backend
+
+Here are several approaches to restrict API access to our frontend:
+
+## CORS Policy Configuration:
+
+```tsx
+import cors from '@fastify/cors';
+
+fastify.register(cors, {
+  origin: ['https://our-frontend-domain.com'],
+  credentials: true,
+  methods: ['GET', 'POST', 'PUT', 'DELETE']
+});
+
+```
+
+Pros:
+
+- Simple implementation
+- Browser-level protection
+- Standard web security practice
+- Maintains secure cookie handling
+
+Cons:
+
+- Only browser-enforced
+- Can be bypassed by non-browser clients
+- Requires proper frontend domain configuration
+
+## API Key + Origin Check:
+
+```tsx
+fastify.addHook('preHandler', async (request, reply) => {
+  const apiKey = request.headers['x-api-key'];
+  const origin = request.headers.origin;
+
+  if (!isValidApiKey(apiKey) || !isAllowedOrigin(origin)) {
+    reply.code(403).send({ error: 'Unauthorized' });
+  }
+});
+
+```
+
+Pros:
+
+- Stronger security than CORS alone
+- Works with non-browser clients
+- Can implement rate limiting
+- Fine-grained access control
+
+Cons:
+
+- Additional implementation complexity
+- Key management overhead
+- Requires secure key storage
+
+## Combined Approach (Recommended):
+
+```tsx
+// CORS + API Key + JWT
+fastify.register(cors, {
+  origin: process.env.FRONTEND_URL,
+  credentials: true
+});
+
+fastify.addHook('preHandler', validateApiKey);
+fastify.addHook('preHandler', validateOrigin);
+
+```
+
+Pros:
+
+- Multiple security layers
+- Comprehensive protection
+- Flexible configuration
+- Best security practices
+
+Cons:
+
+- More complex setup
+- Additional request overhead
+- Requires careful configuration
+
+The combined approach provides the best security while maintaining usability for legitimate frontend requests.
No results found