Security with PocketStarter

This guide highlights some of PocketStarter's built-in security measures and how SSR and CSR are handled.

The following security is included by default:

• Protected pages for authenticated users
• CSRF, Security Headers & CSP
• PocketBase built-in measures, such as rate limiting, input sanitization, and more

SSR vs CSR for PocketBase

By default, PocketStarter uses a hybrid SSR/CSR (CSR-dominant) setup. It primarily uses PocketBase API calls directly from the client to PocketBase, while PocketBase hooks handle server-side operations like webhooks and form processing. Authentication is enhanced with server-side route protection and Next.js API routes for additional server-side functionality.

Why a hybrid approach?

PocketBase is fundamentally designed as a Client-Side Rendering (CSR) application. The official PocketBase client is built for browser environments, with authentication tokens stored in localStorage and all API calls made directly from the client to PocketBase.

However, many developers prefer Server-Side Rendering (SSR) for benefits like:

• Better SEO - Search engines can crawl server-rendered content more effectively
• Faster initial page loads - Users see content immediately without waiting for JavaScript
• Advanced API routes - Server-side logic for complex operations

PocketStarter bridges this gap by implementing a hybrid solution that gives you the best of both worlds.

How the hybrid approach works

To achieve this hybrid setup, PocketStarter adjusts PocketBase's default localStorage approach to use cookies instead, as described in the PocketBase SSR integration documentation. This technical change enables the SSR benefits mentioned above.

We set httpOnly: false to allow client-side access (necessary for our hybrid approach), which means our Content Security Policy becomes crucial for mitigating XSS risks. However, it is worth noting that localStorage has similar XSS exposure if not properly secured too. This approach is also discussed in the PocketBase community.

CSRF, Security Headers & CSP

As mentioned above, security is essential. Several Security Headers are included in the middleware to protect against common web vulnerabilities. PocketStarter has built-in functionality to protect using nonces. It uses an opt-in approach and blocks external scripts and resources by default unless explicitly allowed.

It is worth noting that by default the style-src has an 'unsafe-inline'. Ideally, this would use a nonce approach too but this is not achievable with popular libraries like next/image and shadcn components which require inline styles.

Disable SSR

If you don't want or need server-side functionality, you can safely remove some functionality from the PocketStarter boilerplate:

• You can delete the src/app/api folder
• You can delete the src/lib/auth/server.ts file
• You can delete the cookie functionality from pocketbase.ts
• You can delete protection checks from the server-side middleware.ts script
• You can implement afew additional checks and logic (such as redirections after accessing a protected page) on the frontend-level

This keeps your app fully CSR.