Skip to content
6 changes: 4 additions & 2 deletions src/routes/solid-start/guides/security.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ tags:
- csp
- middleware
- protection
version: '1.0'
version: "1.0"
Comment thread
atilafassina marked this conversation as resolved.
description: >-
Secure your SolidStart apps against XSS, CSRF attacks. Configure CSP headers,
CORS policies, and implement security best practices.
Expand All @@ -38,12 +38,14 @@ It is highly recommended to read the [Cross Site Scripting Prevention Cheat Shee

To configure the `Content-Security-Policy` HTTP header, a [middleware](/solid-start/advanced/middleware) can be used.

If you enforce a strict CSP, configure SolidStart to use JSON serialization mode to avoid `unsafe-eval` requirements. See [defineConfig serialization](/solid-start/reference/config/define-config#serialization).
Comment thread
atilafassina marked this conversation as resolved.
Outdated

### With nonce (recommended)

If you want to use a [strict CSP](https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP#strict_csp) with nonces:

1. Create a middleware that configures the CSP header.
It must then be registered using the [`onRequest`](/solid-start/advanced/middleware#onrequest) event.
It must then be registered using the [`onRequest`](/solid-start/advanced/middleware#onrequest) event.
2. Create a nonce using a cryptographic random value generator, such as the [`randomBytes`](https://nodejs.org/api/crypto.html#cryptorandombytessize-callback) function from the `crypto` module.
3. Store the nonce in the [`locals`](/solid-start/advanced/middleware#locals) object.
4. Configure SolidStart to use the nonce in your [`entry-server.tsx`](/solid-start/reference/entrypoints/entry-server) file.
Expand Down
43 changes: 35 additions & 8 deletions src/routes/solid-start/reference/config/define-config.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ tags:
- deployment
- build
- plugins
version: '1.0'
version: "1.0"
Comment thread
atilafassina marked this conversation as resolved.
description: >-
Configure SolidStart apps with defineConfig. Set up Vite plugins, Nitro
presets, and deployment targets for any platform.
Expand All @@ -35,11 +35,12 @@ export default defineConfig({
});
```

The `vite` option can also be a function that can be customized for each Vinxi router.
The `vite` option can also be a function that can be customized for each Vinxi router.

In SolidStart, 3 routers are used:

- `server` - server-side routing
- `client` - for the client-side routing
- `client` - for the client-side routing
- `server-function` - server functions.

```tsx
Expand All @@ -56,13 +57,39 @@ export default defineConfig({
});
```

## Serialization

SolidStart serializes server function payloads so they can move between server and client. You can configure the serializer mode to balance performance, payload size, and Content Security Policy (CSP) constraints.

```tsx
import { defineConfig } from "@solidjs/start/config";

export default defineConfig({
serialization: {
mode: "json",
},
});
```

### Modes

- `json`: Uses `JSON.parse` on the client. This is the safest option for strict CSP because it avoids `eval`. Payloads can be slightly larger.
- `js`: Uses Seroval's JS serializer for smaller payloads and better performance, but it relies on `eval` during client-side deserialization and requires `unsafe-eval` in CSP.

### Defaults

- SolidStart v1 defaults to `js` for backwards compatibility.
- SolidStart v2 defaults to `json` for CSP compatibility.

Seroval defines the supported value types and edge cases. See the full list in the Seroval compatibility docs.
Comment thread
atilafassina marked this conversation as resolved.
Outdated

## Configuring Nitro

SolidStart uses [Nitro](https://nitro.build/) to run on a number of platforms.
The `server` option exposes some Nitro options including the build and deployment presets.
SolidStart uses [Nitro](https://nitro.build/) to run on a number of platforms.
The `server` option exposes some Nitro options including the build and deployment presets.
An overview of all available presets is available in the [Deploy section of the Nitro documentation](https://nitro.build/deploy).

Some common ones include:
Some common ones include:

**Servers**

Expand Down Expand Up @@ -99,7 +126,7 @@ export default defineConfig({

#### Special note

SolidStart uses async local storage.
SolidStart uses async local storage.
Netlify, Vercel, and Deno support this out of the box but if you're using Cloudflare you will need to specify the following:

```js
Expand All @@ -117,7 +144,6 @@ export default defineConfig({

Within `wrangler.toml` you will need to enable node compatibility:


```
compatibility_flags = [ "nodejs_compat" ]
```
Expand All @@ -130,6 +156,7 @@ compatibility_flags = [ "nodejs_compat" ]
| solid | object | | Configuration object for [vite-plugin-solid](https://github.com/solidjs/vite-plugin-solid) |
| extensions | string[] | ["js", "jsx", "ts", "tsx"] | Array of file extensions to be treated as routes. |
| server | object | | Nitro server config options |
| serialization | object | | Serialization settings for server function payloads. |
| appRoot | string | "./src" | The path to the root of the application. |
| routeDir | string | "./routes" | The path to where the routes are located. |
| middleware | string | | The path to an optional [middleware](/solid-start/advanced/middleware) file. |
Expand Down
16 changes: 9 additions & 7 deletions src/routes/solid-start/reference/server/use-server.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ tags:
- actions
- security
- database
version: '1.0'
version: "1.0"
Comment thread
atilafassina marked this conversation as resolved.
Outdated
description: >-
Create server-only functions in SolidStart using 'use server' directive.
Handle database operations, API calls, and secure logic on the server.
Expand All @@ -26,7 +26,9 @@ const logHello = async (message: string) => {
console.log(message);
};
```

Or when using at the top of a file.

```tsx
// File-level
"use server";
Expand Down Expand Up @@ -74,16 +76,15 @@ The following examples show how to use server functions alongside solid-router's

```tsx {3}
const getUser = query((id) => {
"use server";
return db.getUser(id);
"use server";
return db.getUser(id);
}, "users");

const updateUser = action(async (id, data) => {
"use server"
await db.setUser(id, data);
throw redirect("/", { revalidate: getUser.keyFor(id) });
"use server";
await db.setUser(id, data);
throw redirect("/", { revalidate: getUser.keyFor(id) });
});

```

When `getUser` or `updateUser` are triggered on the client, an http request will be made to the server, which calls the corresponding server function.
Expand All @@ -98,6 +99,7 @@ The data for the redirected page is fetched and streamed to the client in the sa

Server functions allow the serialization of many different data types in the response, using the Seroval serializer.
The full list is available [in Seroval's source code](https://github.com/lxsmnsyc/seroval/blob/main/docs/compatibility.md#supported-types).
Configure serialization mode and CSP behavior in [`defineConfig`](/solid-start/reference/config/define-config#serialization).

## Meta information

Expand Down