Files
Ivan Starkov 766d7eb95f chore: Add CSRF protection to prevent Canvas script execution vulnerability (#4047)
## Description

how it works
https://github.com/webstudio-is/webstudio-saas/issues/317#issuecomment-2317121292

- attack example
https://p-845e975a-4e84-4186-b312-431f3a6f99ea-dot-main.development.webstudio.is/
- attack fixed
https://p-845e975a-4e84-4186-b312-431f3a6f99ea-dot-csrf.staging.webstudio.is/

corresponding PR #4060 (Add postMessage token to secure against Canvas
script execution)

Additionally

csp on iframe (see comments)
destination checks - to prevent including loaders/pages into iframes

<img width="1015" alt="image"
src="https://github.com/user-attachments/assets/2d8c6840-e195-424e-942f-8b8d05203e18">


## Steps for reproduction

1. click button
2. expect xyz

## Code Review

- [ ] hi @kof, I need you to do
  - conceptual review (architecture, feature-correctness)
  - detailed review (read every line)
  - test it on preview

## Before requesting a review

- [ ] made a self-review
- [ ] added inline comments where things may be not obvious (the "why",
not "what")

## Before merging

- [ ] tested locally and on preview environment (preview dev login:
5de6)
- [ ] updated [test
cases](https://github.com/webstudio-is/webstudio/blob/main/apps/builder/docs/test-cases.md)
document
- [ ] added tests
- [ ] if any new env variables are added, added them to `.env` file
2024-09-04 17:08:08 +03:00

65 lines
2.0 KiB
TypeScript

import { createCookieSessionStorage } from "@remix-run/node";
import env from "~/env/env.server";
import { BloomFilter } from "./bloom-filter.server";
import { getSessionCookieNameVersion } from "./auth.server.utils";
// export the whole sessionStorage object
export const sessionStorage = createCookieSessionStorage({
cookie: {
// Using the __Host- prefix to prevent a malicious user from setting another person's session cookie
// on all subdomains of apps.webstudio.is, e.g., setting Domain=.apps.webstudio.is.
// For more information, see: https://developer.mozilla.org/en-US/docs/Web/Security/Practical_implementation_guides/Cookies#name
name: `__Host-_session_${getSessionCookieNameVersion()}`,
maxAge: 60 * 60 * 24 * 30,
sameSite: "lax",
path: "/",
httpOnly: true,
secrets: env.AUTH_SECRET ? [env.AUTH_SECRET] : undefined,
secure: true,
},
});
// Bloom filter: probabilistic data structure to efficiently check if session IDs are logged in.
// Allowing tracking of user login status for specific projects
const bloomFilterKey = "login_session_bloom_filter";
export const readLoginSessionBloomFilter = async (request: Request) => {
try {
const session = await sessionStorage.getSession(
request.headers.get("Cookie")
);
const bloomFilter = session.get(bloomFilterKey);
if (typeof bloomFilter === "string") {
return BloomFilter.deserialize(bloomFilter);
}
return new BloomFilter(50, 0.02);
} catch (error) {
console.error("Error reading bloom filter", error);
return new BloomFilter(50, 0.02);
}
};
export const writeLoginSessionBloomFilter = async (
request: Request,
response: Response,
bloomFilter: BloomFilter
) => {
const session = await sessionStorage.getSession(
request.headers.get("Cookie")
);
session.set(bloomFilterKey, bloomFilter.serialize());
const result = new Response(response.body, response);
result.headers.append(
"Set-Cookie",
await sessionStorage.commitSession(session)
);
return result;
};