mirror of
https://github.com/documenso/documenso.git
synced 2026-06-22 04:12:06 +10:00
feat: add custom branding for signing pages (#2785)
Platform-plan organisations and teams can now customise non-embed signing pages with six brand colour tokens, a border-radius, and a free-text custom CSS block (up to 256 KB). - Stored on OrganisationGlobalSettings / TeamGlobalSettings; teams inherit from the org via brandingEnabled === null. - CSS is sanitised on save (PostCSS) so we can inline it at SSR with no per-render parsing. - Rendered via a nonce'd <style> scoped under .documenso-branded, using native CSS nesting so user selectors don't need scoping. - Gated on the existing embedSigningWhiteLabel claim (or self-hosted) — reuses the embed white-label decision.
This commit is contained in:
Lucas Smith
GitHub
@@ -32,10 +32,14 @@ const TEST_RAW_CSS = '.e2e-css-test-marker { color: red; }';
|
||||
* Expected HSL values after conversion by `toNativeCssVars`:
|
||||
* - colord('#ff0000').toHsl() → { h: 0, s: 100, l: 50 }
|
||||
* - colord('#00ff00').toHsl() → { h: 120, s: 100, l: 50 }
|
||||
*
|
||||
* The `%` on saturation and lightness is required: theme.css consumes these
|
||||
* via `hsl(var(--token))`, and CSS Color 4 space-separated `hsl()` rejects
|
||||
* bare numbers there. See `apps/remix/app/utils/css-vars.ts`.
|
||||
*/
|
||||
const EXPECTED_CSS_VARS = {
|
||||
'--background': '0 100 50',
|
||||
'--primary': '120 100 50',
|
||||
'--background': '0 100% 50%',
|
||||
'--primary': '120 100% 50%',
|
||||
'--radius': '1rem',
|
||||
};
|
||||
|
||||
@@ -64,7 +68,7 @@ const enableEmbedAuthoringWhiteLabel = async (userId: number) => {
|
||||
const DEFAULT_BODY_BG_COLOR = 'rgb(255, 255, 255)';
|
||||
|
||||
/**
|
||||
* When `--background` is set to `0 100 50` (hsl(0, 100%, 50%)) the body background
|
||||
* When `--background` is set to `0 100% 50%` (hsl(0, 100%, 50%)) the body background
|
||||
* resolves to pure red via the Tailwind `bg-background` → `hsl(var(--background))` chain.
|
||||
*/
|
||||
const INJECTED_BODY_BG_COLOR = 'rgb(255, 0, 0)';
|
||||
|
||||
@@ -1,8 +1,5 @@
|
||||
import { NEXT_PUBLIC_WEBAPP_URL } from '@documenso/lib/constants/app';
|
||||
import {
|
||||
isEmailDomainAllowedForSignup,
|
||||
isSignupEnabledForProvider,
|
||||
} from '@documenso/lib/constants/auth';
|
||||
import { isEmailDomainAllowedForSignup, isSignupEnabledForProvider } from '@documenso/lib/constants/auth';
|
||||
import { AppError, AppErrorCode } from '@documenso/lib/errors/app-error';
|
||||
import { onCreateUserHook } from '@documenso/lib/server-only/user/create-user';
|
||||
import { deletedServiceAccountEmail } from '@documenso/lib/server-only/user/service-accounts/deleted-account';
|
||||
|
||||
@@ -124,9 +124,7 @@ export const isEmailDomainAllowedForSignup = (email: string): boolean => {
|
||||
* Check if signup is enabled for the given provider.
|
||||
* The master switch takes precedence over the per-provider flags.
|
||||
*/
|
||||
export const isSignupEnabledForProvider = (
|
||||
provider: 'email' | 'google' | 'microsoft' | 'oidc',
|
||||
): boolean => {
|
||||
export const isSignupEnabledForProvider = (provider: 'email' | 'google' | 'microsoft' | 'oidc'): boolean => {
|
||||
if (env('NEXT_PUBLIC_DISABLE_SIGNUP') === 'true') {
|
||||
return false;
|
||||
}
|
||||
|
||||
@@ -0,0 +1,11 @@
|
||||
/**
|
||||
* Maximum length (in characters) of the user-supplied custom CSS for branding.
|
||||
* Bound enforced at the TRPC request boundary on both the organisation and
|
||||
* team settings update routes. The sanitiser is run after this check; this
|
||||
* limit is purely a request-size guard.
|
||||
*
|
||||
* 256 KB — generous enough for hand-written branding CSS and the occasional
|
||||
* compiled-from-Tailwind-or-similar paste, while still keeping a request
|
||||
* cap so a malicious or runaway payload can't exhaust PostCSS/server memory.
|
||||
*/
|
||||
export const BRANDING_CSS_MAX_LENGTH = 256 * 1024;
|
||||
@@ -0,0 +1,58 @@
|
||||
import type { TCssVarsSchema } from '../types/css-vars';
|
||||
|
||||
/**
|
||||
* !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
|
||||
*
|
||||
* KEEP THIS FILE IN SYNC WITH `packages/ui/styles/theme.css`.
|
||||
*
|
||||
* These are the light-mode default values for the CSS custom properties
|
||||
* defined under `:root` in the theme stylesheet, exposed here as hex strings
|
||||
* so they can be used as defaults for colour-picker UI components and other
|
||||
* places that don't render through CSS variables.
|
||||
*
|
||||
* If you change a value in `theme.css`, update it here too. There is NO
|
||||
* automated check linking the two files; they have drifted historically
|
||||
* and will drift again unless you update both.
|
||||
*
|
||||
* Computed via `colord({ h, s, l }).toHex()` — see the inline HSL comments
|
||||
* for the source-of-truth values from `theme.css`.
|
||||
*
|
||||
* !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
|
||||
*/
|
||||
export const DEFAULT_BRAND_COLORS = {
|
||||
background: '#ffffff', // 0 0% 100%
|
||||
foreground: '#0f172a', // 222.2 47.4% 11.2%
|
||||
muted: '#f1f5f9', // 210 40% 96.1%
|
||||
mutedForeground: '#64748b', // 215.4 16.3% 46.9%
|
||||
popover: '#ffffff', // 0 0% 100%
|
||||
popoverForeground: '#0f172a', // 222.2 47.4% 11.2%
|
||||
card: '#ffffff', // 0 0% 100%
|
||||
cardBorder: '#e2e8f0', // 214.3 31.8% 91.4%
|
||||
cardForeground: '#0f172a', // 222.2 47.4% 11.2%
|
||||
fieldCard: '#e2f8d3', // 95 74% 90%
|
||||
fieldCardBorder: '#a2e771', // 95.08 71.08% 67.45%
|
||||
fieldCardForeground: '#0f172a', // 222.2 47.4% 11.2%
|
||||
widget: '#f7f7f7', // 0 0% 97%
|
||||
widgetForeground: '#f2f2f2', // 0 0% 95%
|
||||
border: '#e2e8f0', // 214.3 31.8% 91.4%
|
||||
input: '#e2e8f0', // 214.3 31.8% 91.4%
|
||||
primary: '#a2e771', // 95.08 71.08% 67.45%
|
||||
primaryForeground: '#162c07', // 95.08 71.08% 10%
|
||||
secondary: '#f1f5f9', // 210 40% 96.1%
|
||||
secondaryForeground: '#0f172a', // 222.2 47.4% 11.2%
|
||||
accent: '#f1f5f9', // 210 40% 96.1%
|
||||
accentForeground: '#0f172a', // 222.2 47.4% 11.2%
|
||||
destructive: '#ff0000', // 0 100% 50%
|
||||
destructiveForeground: '#f8fafc', // 210 40% 98%
|
||||
ring: '#a2e771', // 95.08 71.08% 67.45%
|
||||
warning: '#e1cb05', // 54 96% 45%
|
||||
envelopeEditorBackground: '#f8fafc', //210 40% 98.04%
|
||||
// `cardBorderTint` is intentionally excluded from the colour-picker UI:
|
||||
// unlike the rest of these tokens it is consumed via `rgb(var(--token))`
|
||||
// (not `hsl(...)`) and stored as raw RGB triplets in `theme.css`. It does
|
||||
// not flow through `toNativeCssVars` and is not user-customisable from the
|
||||
// branding form. `radius` is a length, not a colour, so it lives in
|
||||
// `DEFAULT_BRAND_RADIUS` below.
|
||||
} as const satisfies Record<keyof Omit<TCssVarsSchema, 'radius' | 'cardBorderTint'>, string>;
|
||||
|
||||
export const DEFAULT_BRAND_RADIUS = '0.5rem';
|
||||
@@ -57,6 +57,8 @@
|
||||
"pino": "^9.14.0",
|
||||
"pino-pretty": "^13.1.2",
|
||||
"playwright": "1.56.1",
|
||||
"postcss": "^8.5.6",
|
||||
"postcss-selector-parser": "^7.1.0",
|
||||
"posthog-js": "^1.297.2",
|
||||
"posthog-node": "4.18.0",
|
||||
"react": "^18",
|
||||
|
||||
@@ -0,0 +1,55 @@
|
||||
import { IS_BILLING_ENABLED } from '../../constants/app';
|
||||
import type { TCssVarsSchema } from '../../types/css-vars';
|
||||
import { ZCssVarsSchema } from '../../types/css-vars';
|
||||
import { getOrganisationClaimByTeamId } from '../organisation/get-organisation-claims';
|
||||
import { getTeamSettings } from '../team/get-team-settings';
|
||||
|
||||
export type RecipientBrandingPayload = {
|
||||
allowCustomBranding: boolean;
|
||||
hidePoweredBy: boolean;
|
||||
colors: TCssVarsSchema | null;
|
||||
css: string | null;
|
||||
};
|
||||
|
||||
/**
|
||||
* Resolve the branding payload for a recipient-facing route, given the team
|
||||
* the envelope/document belongs to. Reads inherited team-or-org branding settings,
|
||||
* checks the org's claim flags, and returns a payload safe to send to the client.
|
||||
*
|
||||
* Returns a minimal disabled payload if the team is not on a plan that allows
|
||||
* custom branding.
|
||||
*/
|
||||
export const loadRecipientBrandingByTeamId = async ({
|
||||
teamId,
|
||||
}: {
|
||||
teamId: number;
|
||||
}): Promise<RecipientBrandingPayload> => {
|
||||
const billingEnabled = IS_BILLING_ENABLED();
|
||||
|
||||
const [settings, claim] = await Promise.all([
|
||||
getTeamSettings({ teamId }),
|
||||
billingEnabled ? getOrganisationClaimByTeamId({ teamId }).catch(() => null) : Promise.resolve(null),
|
||||
]);
|
||||
|
||||
const allowCustomBranding = !billingEnabled || claim?.flags?.embedSigningWhiteLabel === true;
|
||||
const hidePoweredBy = !billingEnabled || claim?.flags?.hidePoweredBy === true;
|
||||
|
||||
if (!allowCustomBranding) {
|
||||
return {
|
||||
allowCustomBranding: false,
|
||||
hidePoweredBy,
|
||||
colors: null,
|
||||
css: null,
|
||||
};
|
||||
}
|
||||
|
||||
// brandingColors is stored as JSON; parse defensively. Drop unknown keys via Zod.
|
||||
const parsedColors = settings.brandingColors ? ZCssVarsSchema.safeParse(settings.brandingColors) : null;
|
||||
|
||||
return {
|
||||
allowCustomBranding: true,
|
||||
hidePoweredBy,
|
||||
colors: parsedColors?.success ? parsedColors.data : null,
|
||||
css: settings.brandingCss && settings.brandingCss.length > 0 ? settings.brandingCss : null,
|
||||
};
|
||||
};
|
||||
@@ -39,6 +39,8 @@ export const getTeamSettings = async ({ userId, teamId }: GetTeamSettingsOptions
|
||||
teamSettings.brandingLogo = organisationSettings.brandingLogo;
|
||||
teamSettings.brandingUrl = organisationSettings.brandingUrl;
|
||||
teamSettings.brandingCompanyDetails = organisationSettings.brandingCompanyDetails;
|
||||
teamSettings.brandingColors = organisationSettings.brandingColors;
|
||||
teamSettings.brandingCss = organisationSettings.brandingCss;
|
||||
}
|
||||
|
||||
return extractDerivedTeamSettings(organisationSettings, teamSettings);
|
||||
|
||||
@@ -1,5 +1,13 @@
|
||||
import { z } from 'zod';
|
||||
|
||||
/**
|
||||
* A CSS length value: `0`, or a positive number followed by a length unit.
|
||||
* Used for the radius field, which is interpolated raw into a `<style>`
|
||||
* block at render time. Anything outside this shape is a CSS-injection
|
||||
* vector — DO NOT loosen without re-checking `toNativeCssVars`.
|
||||
*/
|
||||
export const CSS_LENGTH_REGEX = /^(0|\d+(\.\d+)?(rem|px|em|%|pt|))$/i;
|
||||
|
||||
export const ZCssVarsSchema = z
|
||||
.object({
|
||||
background: z.string().optional().describe('Base background color'),
|
||||
@@ -28,7 +36,11 @@ export const ZCssVarsSchema = z
|
||||
destructive: z.string().optional().describe('Destructive/danger action color'),
|
||||
destructiveForeground: z.string().optional().describe('Destructive/danger text color'),
|
||||
ring: z.string().optional().describe('Focus ring color'),
|
||||
radius: z.string().optional().describe('Border radius size in REM units'),
|
||||
radius: z
|
||||
.string()
|
||||
.regex(CSS_LENGTH_REGEX, 'Must be a CSS length such as 0.5rem, 8px, or 0')
|
||||
.optional()
|
||||
.describe('Border radius — must be a CSS length (rem/px/em/%/pt or 0)'),
|
||||
warning: z.string().optional().describe('Warning/alert color'),
|
||||
envelopeEditorBackground: z.string().optional().describe('Envelope editor background color'),
|
||||
})
|
||||
|
||||
@@ -0,0 +1,46 @@
|
||||
import type { TCssVarsSchema } from '../types/css-vars';
|
||||
|
||||
/**
|
||||
* Normalise a branding-colours payload coming from a settings form.
|
||||
*
|
||||
* The colour-pickers store empty strings for cleared fields, and
|
||||
* `ZCssVarsSchema.default({})` produces `{}` when the form is submitted
|
||||
* without any colour overrides. Persisting either as a non-null value would
|
||||
* silently mask the org's defaults for a team, and produce noisy "this is
|
||||
* an override of nothing" rows in the database.
|
||||
*
|
||||
* This helper:
|
||||
* - strips keys whose value is `undefined`, `null`, or an empty string
|
||||
* - returns `null` if the result has no remaining keys
|
||||
* - leaves all other keys verbatim (validation against ZCssVarsSchema is
|
||||
* expected to have happened at the request boundary)
|
||||
*
|
||||
* `undefined` input means "no change" — the caller should not pass it
|
||||
* through to Prisma. We pass it through unchanged so handlers can keep their
|
||||
* existing `=== undefined` branches.
|
||||
*/
|
||||
export const normalizeBrandingColors = (
|
||||
input: TCssVarsSchema | null | undefined,
|
||||
): TCssVarsSchema | null | undefined => {
|
||||
if (input === undefined) {
|
||||
return undefined;
|
||||
}
|
||||
|
||||
if (input === null) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const cleaned: Record<string, string> = {};
|
||||
|
||||
for (const [key, value] of Object.entries(input)) {
|
||||
if (typeof value === 'string' && value.trim() !== '') {
|
||||
cleaned[key] = value;
|
||||
}
|
||||
}
|
||||
|
||||
if (Object.keys(cleaned).length === 0) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return cleaned as TCssVarsSchema;
|
||||
};
|
||||
@@ -124,6 +124,8 @@ export const generateDefaultOrganisationSettings = (): Omit<OrganisationGlobalSe
|
||||
brandingLogo: '',
|
||||
brandingUrl: '',
|
||||
brandingCompanyDetails: '',
|
||||
brandingColors: null,
|
||||
brandingCss: '',
|
||||
|
||||
emailId: null,
|
||||
emailReplyTo: null,
|
||||
|
||||
@@ -0,0 +1,436 @@
|
||||
import { describe, expect, it } from 'vitest';
|
||||
|
||||
import { sanitizeBrandingCss } from './sanitize-branding-css';
|
||||
|
||||
const normalize = (css: string) => css.replace(/\s+/g, ' ').trim();
|
||||
|
||||
/**
|
||||
* The sanitiser does NOT scope selectors. Scoping is applied at render time
|
||||
* by wrapping the entire sanitised output in `.documenso-branded { ... }` via
|
||||
* native CSS nesting (see `RecipientBranding`). These tests assert that
|
||||
* selectors are preserved verbatim and only validated.
|
||||
*/
|
||||
describe('sanitizeBrandingCss', () => {
|
||||
describe('empty input', () => {
|
||||
it('returns empty output for an empty string', () => {
|
||||
const result = sanitizeBrandingCss('');
|
||||
|
||||
expect(result.css).toBe('');
|
||||
expect(result.warnings).toEqual([]);
|
||||
});
|
||||
|
||||
it('returns empty output for whitespace-only input', () => {
|
||||
const result = sanitizeBrandingCss(' \n\t \n');
|
||||
|
||||
expect(result.css).toBe('');
|
||||
expect(result.warnings).toEqual([]);
|
||||
});
|
||||
});
|
||||
|
||||
describe('selector preservation', () => {
|
||||
it('preserves a bare class selector', () => {
|
||||
const result = sanitizeBrandingCss('.foo { color: red; }');
|
||||
|
||||
expect(normalize(result.css)).toBe('.foo { color: red; }');
|
||||
expect(result.warnings).toEqual([]);
|
||||
});
|
||||
|
||||
it('preserves a tag selector', () => {
|
||||
const result = sanitizeBrandingCss('h1 { color: red; }');
|
||||
|
||||
expect(normalize(result.css)).toBe('h1 { color: red; }');
|
||||
expect(result.warnings).toEqual([]);
|
||||
});
|
||||
|
||||
it('preserves combinators', () => {
|
||||
const result = sanitizeBrandingCss('.a > .b + .c ~ .d { color: red; }');
|
||||
|
||||
expect(normalize(result.css)).toBe('.a > .b + .c ~ .d { color: red; }');
|
||||
expect(result.warnings).toEqual([]);
|
||||
});
|
||||
|
||||
it('preserves comma-separated selectors', () => {
|
||||
const result = sanitizeBrandingCss('.a, .b { color: red; }');
|
||||
|
||||
expect(normalize(result.css)).toBe('.a, .b { color: red; }');
|
||||
expect(result.warnings).toEqual([]);
|
||||
});
|
||||
|
||||
it('preserves body/html/:root verbatim (will no-op once nested at render)', () => {
|
||||
const result = sanitizeBrandingCss('body { background: black; }');
|
||||
|
||||
// Selector is left as-is. At render time this becomes
|
||||
// `.documenso-branded body { ... }`, which won't match anything since
|
||||
// <body> is an ancestor of the wrapper. Documented tradeoff.
|
||||
expect(normalize(result.css)).toBe('body { background: black; }');
|
||||
expect(result.warnings).toEqual([]);
|
||||
});
|
||||
});
|
||||
|
||||
describe('pseudo-elements', () => {
|
||||
it('drops a rule containing ::before', () => {
|
||||
const result = sanitizeBrandingCss(".foo::before { content: 'x'; }");
|
||||
|
||||
expect(result.css.trim()).toBe('');
|
||||
expect(result.warnings).toHaveLength(1);
|
||||
expect(result.warnings[0].kind).toBe('selector');
|
||||
});
|
||||
|
||||
it('drops a rule containing ::after', () => {
|
||||
const result = sanitizeBrandingCss(".foo::after { content: 'x'; }");
|
||||
|
||||
expect(result.css.trim()).toBe('');
|
||||
expect(result.warnings).toHaveLength(1);
|
||||
});
|
||||
|
||||
it('drops a rule containing ::backdrop', () => {
|
||||
const result = sanitizeBrandingCss('.foo::backdrop { color: red; }');
|
||||
|
||||
expect(result.css.trim()).toBe('');
|
||||
expect(result.warnings).toHaveLength(1);
|
||||
});
|
||||
|
||||
it('drops a rule containing ::marker', () => {
|
||||
const result = sanitizeBrandingCss('li::marker { color: red; }');
|
||||
|
||||
expect(result.css.trim()).toBe('');
|
||||
expect(result.warnings).toHaveLength(1);
|
||||
});
|
||||
|
||||
it('drops a rule using legacy single-colon :before', () => {
|
||||
const result = sanitizeBrandingCss(".foo:before { content: 'x'; }");
|
||||
|
||||
expect(result.css.trim()).toBe('');
|
||||
expect(result.warnings).toHaveLength(1);
|
||||
expect(result.warnings[0].kind).toBe('selector');
|
||||
});
|
||||
|
||||
it('drops a rule using legacy single-colon :after', () => {
|
||||
const result = sanitizeBrandingCss(".foo:after { content: 'x'; }");
|
||||
|
||||
expect(result.css.trim()).toBe('');
|
||||
expect(result.warnings).toHaveLength(1);
|
||||
});
|
||||
|
||||
it('keeps ::placeholder verbatim', () => {
|
||||
const result = sanitizeBrandingCss('input::placeholder { color: gray; }');
|
||||
|
||||
expect(normalize(result.css)).toBe('input::placeholder { color: gray; }');
|
||||
expect(result.warnings).toEqual([]);
|
||||
});
|
||||
|
||||
it('keeps ::selection verbatim', () => {
|
||||
const result = sanitizeBrandingCss('p::selection { background: yellow; }');
|
||||
|
||||
expect(normalize(result.css)).toBe('p::selection { background: yellow; }');
|
||||
expect(result.warnings).toEqual([]);
|
||||
});
|
||||
});
|
||||
|
||||
describe('universal selector', () => {
|
||||
it('drops a bare * selector rule', () => {
|
||||
const result = sanitizeBrandingCss('* { color: red; }');
|
||||
|
||||
expect(result.css.trim()).toBe('');
|
||||
expect(result.warnings).toHaveLength(1);
|
||||
expect(result.warnings[0].kind).toBe('selector');
|
||||
});
|
||||
|
||||
it('drops a rule with * combined with descendant', () => {
|
||||
const result = sanitizeBrandingCss('* .x { color: red; }');
|
||||
|
||||
expect(result.css.trim()).toBe('');
|
||||
expect(result.warnings).toHaveLength(1);
|
||||
});
|
||||
|
||||
it('keeps attribute selectors that include * inside', () => {
|
||||
const result = sanitizeBrandingCss('[class*="foo"] { color: red; }');
|
||||
|
||||
expect(normalize(result.css)).toBe('[class*="foo"] { color: red; }');
|
||||
expect(result.warnings).toEqual([]);
|
||||
});
|
||||
});
|
||||
|
||||
describe('blocked properties', () => {
|
||||
const blockedProperties = [
|
||||
'display',
|
||||
'visibility',
|
||||
'opacity',
|
||||
'pointer-events',
|
||||
'position',
|
||||
'inset',
|
||||
'top',
|
||||
'right',
|
||||
'bottom',
|
||||
'left',
|
||||
'z-index',
|
||||
'transform',
|
||||
'clip',
|
||||
'clip-path',
|
||||
'mask',
|
||||
'mask-image',
|
||||
'content',
|
||||
'width',
|
||||
'height',
|
||||
'min-width',
|
||||
'min-height',
|
||||
'max-width',
|
||||
'max-height',
|
||||
'overflow',
|
||||
'overflow-x',
|
||||
'overflow-y',
|
||||
'font-size',
|
||||
'letter-spacing',
|
||||
'word-spacing',
|
||||
'line-height',
|
||||
'text-indent',
|
||||
];
|
||||
|
||||
for (const prop of blockedProperties) {
|
||||
it(`strips the "${prop}" property`, () => {
|
||||
const result = sanitizeBrandingCss(`.x { ${prop}: 10px; color: red; }`);
|
||||
|
||||
expect(result.css).not.toContain(`${prop}:`);
|
||||
expect(result.css).toContain('color: red');
|
||||
expect(result.warnings).toHaveLength(1);
|
||||
expect(result.warnings[0].kind).toBe('property');
|
||||
expect(result.warnings[0].detail).toContain(prop);
|
||||
});
|
||||
}
|
||||
|
||||
it('is case-insensitive on property names', () => {
|
||||
const result = sanitizeBrandingCss('.x { DISPLAY: none; color: red; }');
|
||||
|
||||
expect(result.css).not.toMatch(/display/i);
|
||||
expect(result.warnings).toHaveLength(1);
|
||||
expect(result.warnings[0].kind).toBe('property');
|
||||
});
|
||||
|
||||
const allowedProperties: Array<[string, string]> = [
|
||||
['color', 'red'],
|
||||
['background', '#fff'],
|
||||
['border', '1px solid black'],
|
||||
['border-radius', '4px'],
|
||||
['font-family', 'sans-serif'],
|
||||
['font-weight', '600'],
|
||||
];
|
||||
|
||||
for (const [prop, value] of allowedProperties) {
|
||||
it(`keeps the "${prop}" property`, () => {
|
||||
const result = sanitizeBrandingCss(`.x { ${prop}: ${value}; }`);
|
||||
|
||||
expect(result.css).toContain(`${prop}: ${value}`);
|
||||
expect(result.warnings).toEqual([]);
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
describe('blocked values', () => {
|
||||
it('drops a declaration containing url(', () => {
|
||||
const result = sanitizeBrandingCss('.x { background: url(http://evil); }');
|
||||
|
||||
expect(result.css).not.toContain('url(');
|
||||
expect(result.warnings).toHaveLength(1);
|
||||
expect(result.warnings[0].kind).toBe('value');
|
||||
});
|
||||
|
||||
it('drops a declaration containing expression(', () => {
|
||||
const result = sanitizeBrandingCss('.x { background: expression(alert(1)); }');
|
||||
|
||||
expect(result.css).not.toContain('expression(');
|
||||
expect(result.warnings).toHaveLength(1);
|
||||
expect(result.warnings[0].kind).toBe('value');
|
||||
});
|
||||
|
||||
it('drops a declaration containing javascript: in a quoted value', () => {
|
||||
// PostCSS would throw on bare `javascript:alert(1)` (looks like a
|
||||
// malformed selector inside a declaration). Use a quoted value to
|
||||
// exercise the substring match cleanly.
|
||||
const result = sanitizeBrandingCss('.x { font-family: "javascript:alert"; }');
|
||||
|
||||
expect(result.css).not.toContain('javascript:');
|
||||
expect(result.warnings).toHaveLength(1);
|
||||
expect(result.warnings[0].kind).toBe('value');
|
||||
});
|
||||
});
|
||||
|
||||
describe('!important stripping', () => {
|
||||
it('strips !important from a retained declaration', () => {
|
||||
const result = sanitizeBrandingCss('.x { color: red !important; }');
|
||||
|
||||
expect(result.css).not.toContain('!important');
|
||||
expect(result.css).toContain('color: red');
|
||||
expect(result.warnings).toEqual([]);
|
||||
});
|
||||
});
|
||||
|
||||
describe('at-rules', () => {
|
||||
it('drops @import', () => {
|
||||
const result = sanitizeBrandingCss('@import url("https://evil.example/x.css");');
|
||||
|
||||
expect(result.css.trim()).toBe('');
|
||||
expect(result.warnings).toHaveLength(1);
|
||||
expect(result.warnings[0].kind).toBe('at-rule');
|
||||
});
|
||||
|
||||
it('drops @font-face', () => {
|
||||
const result = sanitizeBrandingCss('@font-face { font-family: "X"; src: url("x.woff2"); }');
|
||||
|
||||
expect(result.css.trim()).toBe('');
|
||||
expect(result.warnings).toHaveLength(1);
|
||||
expect(result.warnings[0].kind).toBe('at-rule');
|
||||
});
|
||||
|
||||
it('drops @keyframes', () => {
|
||||
const result = sanitizeBrandingCss('@keyframes spin { to { transform: rotate(360deg); } }');
|
||||
|
||||
expect(result.css.trim()).toBe('');
|
||||
expect(result.warnings).toHaveLength(1);
|
||||
expect(result.warnings[0].kind).toBe('at-rule');
|
||||
});
|
||||
|
||||
it('drops @supports', () => {
|
||||
const result = sanitizeBrandingCss('@supports (display: grid) { .x { color: red; } }');
|
||||
|
||||
expect(result.css.trim()).toBe('');
|
||||
expect(result.warnings).toHaveLength(1);
|
||||
expect(result.warnings[0].kind).toBe('at-rule');
|
||||
});
|
||||
|
||||
it('keeps @media with min-width and preserves inner selectors verbatim', () => {
|
||||
const result = sanitizeBrandingCss('@media (min-width: 600px) { .x { color: red; } }');
|
||||
|
||||
expect(normalize(result.css)).toBe('@media (min-width: 600px) { .x { color: red; } }');
|
||||
expect(result.warnings).toEqual([]);
|
||||
});
|
||||
|
||||
it('keeps @media with prefers-color-scheme and preserves body inside', () => {
|
||||
const result = sanitizeBrandingCss('@media (prefers-color-scheme: dark) { body { background: black; } }');
|
||||
|
||||
expect(normalize(result.css)).toBe('@media (prefers-color-scheme: dark) { body { background: black; } }');
|
||||
expect(result.warnings).toEqual([]);
|
||||
});
|
||||
|
||||
it('strips blocked properties inside @media', () => {
|
||||
const result = sanitizeBrandingCss('@media (min-width: 600px) { .x { display: none; color: red; } }');
|
||||
|
||||
expect(result.css).not.toContain('display');
|
||||
expect(result.css).toContain('color: red');
|
||||
expect(result.warnings).toHaveLength(1);
|
||||
expect(result.warnings[0].kind).toBe('property');
|
||||
});
|
||||
});
|
||||
|
||||
describe('combined input', () => {
|
||||
it('keeps valid rules verbatim and reports each drop', () => {
|
||||
const input = `
|
||||
.ok { color: red !important; }
|
||||
.bad-prop { display: none; background: blue; }
|
||||
.bad-pseudo::before { content: 'x'; }
|
||||
* { color: red; }
|
||||
@import "evil.css";
|
||||
body { background: black; }
|
||||
@media (min-width: 600px) {
|
||||
.responsive { color: green; }
|
||||
}
|
||||
`;
|
||||
|
||||
const result = sanitizeBrandingCss(input);
|
||||
|
||||
// Valid bits present, unchanged.
|
||||
expect(result.css).toContain('.ok');
|
||||
expect(result.css).toContain('color: red');
|
||||
expect(result.css).toContain('.bad-prop');
|
||||
expect(result.css).toContain('background: blue');
|
||||
expect(result.css).toContain('body { background: black');
|
||||
expect(result.css).toContain('@media (min-width: 600px)');
|
||||
expect(result.css).toContain('.responsive');
|
||||
|
||||
// Invalid bits gone.
|
||||
expect(result.css).not.toContain('!important');
|
||||
expect(result.css).not.toContain('display');
|
||||
expect(result.css).not.toContain('::before');
|
||||
expect(result.css).not.toContain('@import');
|
||||
|
||||
// Warning kinds.
|
||||
const kinds = result.warnings.map((w) => w.kind).sort();
|
||||
expect(kinds).toEqual(['at-rule', 'property', 'selector', 'selector'].sort());
|
||||
});
|
||||
});
|
||||
|
||||
describe('style-close-tag defence', () => {
|
||||
// The sanitised output is inlined into a `<style>` element via SSR. The
|
||||
// browser's HTML parser terminates the element on a literal `</style`
|
||||
// anywhere in the content. PostCSS's serializer normally escapes `<` to
|
||||
// `\3c` whenever it would form `</...`, so the literal sequence should
|
||||
// never reach the output for any of these inputs. These tests pin that
|
||||
// invariant.
|
||||
|
||||
it('escapes </style> inside a string value', () => {
|
||||
const result = sanitizeBrandingCss('.x { font-family: "</style><img src=x onerror=alert(1)>"; }');
|
||||
|
||||
expect(result.css.toLowerCase()).not.toContain('</style');
|
||||
// Whatever else happens, the canonical close-tag bytes must not appear.
|
||||
});
|
||||
|
||||
it('escapes </style> inside a CSS comment', () => {
|
||||
const result = sanitizeBrandingCss('.x { color: red; /* </style><script>alert(1)</script> */ }');
|
||||
|
||||
expect(result.css.toLowerCase()).not.toContain('</style');
|
||||
});
|
||||
|
||||
it('escapes </style> inside an at-rule params block', () => {
|
||||
const result = sanitizeBrandingCss(
|
||||
'@media screen and (foo: bar)</style><script>x()</script> { .x { color: red; } }',
|
||||
);
|
||||
|
||||
expect(result.css.toLowerCase()).not.toContain('</style');
|
||||
});
|
||||
|
||||
it('escapes mixed-case </StYlE> in a value', () => {
|
||||
const result = sanitizeBrandingCss('.x { font-family: "</StYlE>foo"; }');
|
||||
|
||||
expect(result.css.toLowerCase()).not.toContain('</style');
|
||||
});
|
||||
|
||||
it('escapes </style> in an attribute selector value', () => {
|
||||
const result = sanitizeBrandingCss('[data-x="</style><script>alert(1)</script>"] { color: red; }');
|
||||
|
||||
expect(result.css.toLowerCase()).not.toContain('</style');
|
||||
});
|
||||
|
||||
it('preserves benign < not followed by /', () => {
|
||||
// `<script>` (no slash) is not a tag close; PostCSS leaves it as text
|
||||
// and the HTML parser treats it as text inside <style> rawtext mode.
|
||||
const result = sanitizeBrandingCss('.x { font-family: "<script>alert(1)</script>"; }');
|
||||
|
||||
// The output keeps the literal `<script>` (harmless) but escapes the
|
||||
// `</script>` end tag's `<` for the same reason it'd escape `</style>`.
|
||||
expect(result.css).toContain('<script>');
|
||||
expect(result.css.toLowerCase()).not.toContain('</style');
|
||||
});
|
||||
});
|
||||
|
||||
describe('malformed CSS', () => {
|
||||
// PostCSS is forgiving; an empty value parses without throwing.
|
||||
it('handles a declaration with an empty value gracefully', () => {
|
||||
const result = sanitizeBrandingCss('.x { color: }');
|
||||
|
||||
expect(result.warnings.filter((w) => w.kind === 'parse-error')).toEqual([]);
|
||||
expect(result.css).toContain('.x');
|
||||
});
|
||||
|
||||
it('reports a parse-error for clearly broken CSS', () => {
|
||||
// Unclosed brace.
|
||||
const result = sanitizeBrandingCss('.x { color: red');
|
||||
|
||||
// PostCSS may or may not throw on this; if it does, we get a
|
||||
// parse-error warning. If it tolerates it, the rule is sanitized.
|
||||
if (result.css === '') {
|
||||
expect(result.warnings.some((w) => w.kind === 'parse-error')).toBe(true);
|
||||
} else {
|
||||
expect(result.css).toContain('.x');
|
||||
}
|
||||
});
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,323 @@
|
||||
import type { AtRule, Container, Declaration, Rule } from 'postcss';
|
||||
import postcss from 'postcss';
|
||||
import selectorParser from 'postcss-selector-parser';
|
||||
import { z } from 'zod';
|
||||
|
||||
export const ZSanitizeBrandingCssWarningSchema = z.object({
|
||||
kind: z.enum(['selector', 'property', 'value', 'at-rule', 'parse-error']),
|
||||
detail: z.string(),
|
||||
line: z.number().optional(),
|
||||
});
|
||||
|
||||
export type SanitizeBrandingCssWarning = z.infer<typeof ZSanitizeBrandingCssWarningSchema>;
|
||||
|
||||
export type SanitizeBrandingCssResult = {
|
||||
css: string;
|
||||
warnings: SanitizeBrandingCssWarning[];
|
||||
};
|
||||
|
||||
/**
|
||||
* The class name the sanitised CSS will be wrapped in at render time using
|
||||
* CSS nesting (`.documenso-branded { <user css> }`). The sanitiser itself
|
||||
* does NOT prefix selectors — the wrapper is applied by `RecipientBranding`
|
||||
* on every render so we keep the user's original CSS intact in the database.
|
||||
*/
|
||||
export const SANITIZE_BRANDING_SCOPE_CLASS = 'documenso-branded';
|
||||
|
||||
const BLOCKED_PROPERTIES = new Set([
|
||||
'display',
|
||||
'visibility',
|
||||
'opacity',
|
||||
'pointer-events',
|
||||
'position',
|
||||
'inset',
|
||||
'top',
|
||||
'right',
|
||||
'bottom',
|
||||
'left',
|
||||
'z-index',
|
||||
'transform',
|
||||
'clip',
|
||||
'clip-path',
|
||||
'mask',
|
||||
'mask-image',
|
||||
'content',
|
||||
'width',
|
||||
'height',
|
||||
'min-width',
|
||||
'min-height',
|
||||
'max-width',
|
||||
'max-height',
|
||||
'overflow',
|
||||
'overflow-x',
|
||||
'overflow-y',
|
||||
'font-size',
|
||||
'letter-spacing',
|
||||
'word-spacing',
|
||||
'line-height',
|
||||
'text-indent',
|
||||
]);
|
||||
|
||||
const BLOCKED_VALUE_SUBSTRINGS = ['url(', 'expression(', '@import', 'javascript:'];
|
||||
|
||||
const BLOCKED_PSEUDO_ELEMENTS = new Set([
|
||||
'::before',
|
||||
'::after',
|
||||
'::backdrop',
|
||||
'::marker',
|
||||
// Single-colon legacy forms.
|
||||
':before',
|
||||
':after',
|
||||
]);
|
||||
|
||||
const BLOCKED_AT_RULES = new Set([
|
||||
'import',
|
||||
'font-face',
|
||||
'keyframes',
|
||||
'charset',
|
||||
'namespace',
|
||||
'supports',
|
||||
'page',
|
||||
'document',
|
||||
'viewport',
|
||||
]);
|
||||
|
||||
type SelectorValidationResult = { kind: 'ok' } | { kind: 'drop'; reason: string };
|
||||
|
||||
/**
|
||||
* Validate a selector for the rules we care about, but DO NOT rewrite it.
|
||||
* The sanitised output is later wrapped in `.documenso-branded { ... }` via
|
||||
* native CSS nesting by `RecipientBranding`, so scoping happens at render.
|
||||
*/
|
||||
const validateSelector = (rawSelector: string): SelectorValidationResult => {
|
||||
let dropReason: string | null = null;
|
||||
|
||||
const transform = selectorParser((selectors) => {
|
||||
selectors.each((selector) => {
|
||||
selector.walk((node) => {
|
||||
// Pseudo-element check (works at any depth — even nested pseudos like
|
||||
// `:is(::before)` should be rejected).
|
||||
if (node.type === 'pseudo') {
|
||||
const value = node.value;
|
||||
|
||||
if (BLOCKED_PSEUDO_ELEMENTS.has(value)) {
|
||||
dropReason = `pseudo-element "${value}" not allowed`;
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
if (dropReason !== null) {
|
||||
return;
|
||||
}
|
||||
|
||||
// Universal selector check — only when it is a direct child of the
|
||||
// top-level compound (i.e. `* { ... }` or `* .foo { ... }`).
|
||||
// Universal nodes nested inside attribute selectors (`[class*="x"]`)
|
||||
// are a different node type and won't appear here.
|
||||
selector.each((node) => {
|
||||
if (node.type === 'universal') {
|
||||
dropReason = 'universal "*" selector not allowed';
|
||||
}
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
try {
|
||||
// We don't keep the result — we only care about parsing and walking
|
||||
// to populate dropReason.
|
||||
transform.processSync(rawSelector);
|
||||
} catch (error) {
|
||||
return {
|
||||
kind: 'drop',
|
||||
reason: error instanceof Error ? error.message : 'failed to parse selector',
|
||||
};
|
||||
}
|
||||
|
||||
if (dropReason !== null) {
|
||||
return { kind: 'drop', reason: dropReason };
|
||||
}
|
||||
|
||||
return { kind: 'ok' };
|
||||
};
|
||||
|
||||
const valueIsBlocked = (rawValue: string): boolean => {
|
||||
const lowered = rawValue.toLowerCase();
|
||||
|
||||
return BLOCKED_VALUE_SUBSTRINGS.some((needle) => lowered.includes(needle));
|
||||
};
|
||||
|
||||
const sanitizeDeclarations = (container: Container, warnings: SanitizeBrandingCssWarning[]): void => {
|
||||
const toRemove: Declaration[] = [];
|
||||
|
||||
container.each((node) => {
|
||||
if (node.type !== 'decl') {
|
||||
return;
|
||||
}
|
||||
|
||||
const decl = node;
|
||||
const propLower = decl.prop.toLowerCase();
|
||||
|
||||
if (BLOCKED_PROPERTIES.has(propLower)) {
|
||||
warnings.push({
|
||||
kind: 'property',
|
||||
detail: `property "${decl.prop}" is not allowed`,
|
||||
line: decl.source?.start?.line,
|
||||
});
|
||||
toRemove.push(decl);
|
||||
|
||||
return;
|
||||
}
|
||||
|
||||
if (valueIsBlocked(decl.value)) {
|
||||
warnings.push({
|
||||
kind: 'value',
|
||||
detail: `value of "${decl.prop}" contains a disallowed token`,
|
||||
line: decl.source?.start?.line,
|
||||
});
|
||||
toRemove.push(decl);
|
||||
|
||||
return;
|
||||
}
|
||||
|
||||
if (decl.important) {
|
||||
decl.important = false;
|
||||
}
|
||||
});
|
||||
|
||||
for (const decl of toRemove) {
|
||||
decl.remove();
|
||||
}
|
||||
};
|
||||
|
||||
const sanitizeRule = (rule: Rule, warnings: SanitizeBrandingCssWarning[]): void => {
|
||||
const line = rule.source?.start?.line;
|
||||
const validation = validateSelector(rule.selector);
|
||||
|
||||
if (validation.kind === 'drop') {
|
||||
warnings.push({ kind: 'selector', detail: validation.reason, line });
|
||||
rule.remove();
|
||||
|
||||
return;
|
||||
}
|
||||
|
||||
// Selector is left as-is. Scoping is applied at render time by wrapping
|
||||
// the entire sanitised CSS in `.documenso-branded { ... }` (CSS nesting).
|
||||
|
||||
sanitizeDeclarations(rule, warnings);
|
||||
|
||||
// If the rule has no declarations left, leave the empty rule in place — the
|
||||
// output is still valid CSS and the user can see what happened. (Removing
|
||||
// it would also be acceptable; we keep it to make warnings easier to map.)
|
||||
};
|
||||
|
||||
const sanitizeAtRule = (atRule: AtRule, warnings: SanitizeBrandingCssWarning[]): void => {
|
||||
const name = atRule.name.toLowerCase();
|
||||
const line = atRule.source?.start?.line;
|
||||
|
||||
if (BLOCKED_AT_RULES.has(name)) {
|
||||
warnings.push({
|
||||
kind: 'at-rule',
|
||||
detail: `at-rule "@${atRule.name}" is not allowed`,
|
||||
line,
|
||||
});
|
||||
atRule.remove();
|
||||
|
||||
return;
|
||||
}
|
||||
|
||||
if (name !== 'media') {
|
||||
warnings.push({
|
||||
kind: 'at-rule',
|
||||
detail: `at-rule "@${atRule.name}" is not allowed`,
|
||||
line,
|
||||
});
|
||||
atRule.remove();
|
||||
|
||||
return;
|
||||
}
|
||||
|
||||
// Recurse into @media children.
|
||||
const children = atRule.nodes ? [...atRule.nodes] : [];
|
||||
|
||||
for (const child of children) {
|
||||
if (child.type === 'rule') {
|
||||
sanitizeRule(child, warnings);
|
||||
} else if (child.type === 'atrule') {
|
||||
sanitizeAtRule(child, warnings);
|
||||
}
|
||||
// Comments and stray declarations inside @media are left alone /
|
||||
// declarations directly under @media are invalid CSS anyway.
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* Defence in depth against `<style>` element breakout.
|
||||
*
|
||||
* The sanitised CSS is inlined into a `<style>` element via SSR
|
||||
* `dangerouslySetInnerHTML`. The browser's HTML parser (in RAWTEXT mode for
|
||||
* `<style>` content) terminates the element on a literal `</style` —
|
||||
* regardless of whether it appears inside a CSS string, comment, or at-rule
|
||||
* params. PostCSS's serializer escapes `<` to `\3c` whenever it would form
|
||||
* `</...`, which means a normal round-trip is already safe.
|
||||
*
|
||||
* That escape is implicit in PostCSS, not enforced by our own logic. If a
|
||||
* future PostCSS version, plugin, or alternative serializer regresses, we
|
||||
* still want the output to be safe to inline. This regex is the explicit
|
||||
* tripwire — case-insensitive `</style` anywhere in the final output is a
|
||||
* hard fail.
|
||||
*/
|
||||
const STYLE_CLOSE_TAG_REGEX = /<\s*\/\s*style/i;
|
||||
|
||||
export const sanitizeBrandingCss = (input: string): SanitizeBrandingCssResult => {
|
||||
const warnings: SanitizeBrandingCssWarning[] = [];
|
||||
|
||||
if (input.trim() === '') {
|
||||
return { css: '', warnings };
|
||||
}
|
||||
|
||||
let root;
|
||||
|
||||
try {
|
||||
root = postcss.parse(input);
|
||||
} catch (error) {
|
||||
return {
|
||||
css: '',
|
||||
warnings: [
|
||||
{
|
||||
kind: 'parse-error',
|
||||
detail: error instanceof Error ? error.message : 'failed to parse CSS',
|
||||
},
|
||||
],
|
||||
};
|
||||
}
|
||||
|
||||
// Iterate over a snapshot of top-level children so removal during the loop
|
||||
// is safe.
|
||||
const topLevelChildren = root.nodes ? [...root.nodes] : [];
|
||||
|
||||
for (const node of topLevelChildren) {
|
||||
if (node.type === 'rule') {
|
||||
sanitizeRule(node, warnings);
|
||||
} else if (node.type === 'atrule') {
|
||||
sanitizeAtRule(node, warnings);
|
||||
}
|
||||
// Top-level decls / comments are left as-is.
|
||||
}
|
||||
|
||||
const output = root.toString();
|
||||
|
||||
if (STYLE_CLOSE_TAG_REGEX.test(output)) {
|
||||
return {
|
||||
css: '',
|
||||
warnings: [
|
||||
...warnings,
|
||||
{
|
||||
kind: 'parse-error',
|
||||
detail: 'output contained a literal </style sequence and was rejected',
|
||||
},
|
||||
],
|
||||
};
|
||||
}
|
||||
|
||||
return { css: output, warnings };
|
||||
};
|
||||
@@ -191,6 +191,8 @@ export const generateDefaultTeamSettings = (): Omit<TeamGlobalSettings, 'id' | '
|
||||
brandingLogo: null,
|
||||
brandingUrl: null,
|
||||
brandingCompanyDetails: null,
|
||||
brandingColors: null,
|
||||
brandingCss: null,
|
||||
|
||||
emailDocumentSettings: null,
|
||||
emailId: null,
|
||||
|
||||
@@ -0,0 +1,7 @@
|
||||
-- AlterTable
|
||||
ALTER TABLE "OrganisationGlobalSettings" ADD COLUMN "brandingColors" JSONB,
|
||||
ADD COLUMN "brandingCss" TEXT NOT NULL DEFAULT '';
|
||||
|
||||
-- AlterTable
|
||||
ALTER TABLE "TeamGlobalSettings" ADD COLUMN "brandingColors" JSONB,
|
||||
ADD COLUMN "brandingCss" TEXT;
|
||||
@@ -831,7 +831,7 @@ enum OrganisationMemberInviteStatus {
|
||||
DECLINED
|
||||
}
|
||||
|
||||
/// @zod.import(["import { ZDocumentEmailSettingsSchema } from '@documenso/lib/types/document-email';", "import { ZDefaultRecipientsSchema } from '@documenso/lib/types/default-recipients';", "import { ZEnvelopeExpirationPeriod as ZEnvelopeExpirationPeriodSchema } from '@documenso/lib/constants/envelope-expiration';", "import { ZEnvelopeReminderSettings as ZEnvelopeReminderSettingsSchema } from '@documenso/lib/constants/envelope-reminder';"])
|
||||
/// @zod.import(["import { ZDocumentEmailSettingsSchema } from '@documenso/lib/types/document-email';", "import { ZDefaultRecipientsSchema } from '@documenso/lib/types/default-recipients';", "import { ZEnvelopeExpirationPeriod as ZEnvelopeExpirationPeriodSchema } from '@documenso/lib/constants/envelope-expiration';", "import { ZEnvelopeReminderSettings as ZEnvelopeReminderSettingsSchema } from '@documenso/lib/constants/envelope-reminder';", "import { ZCssVarsSchema } from '@documenso/lib/types/css-vars';"])
|
||||
model OrganisationGlobalSettings {
|
||||
id String @id
|
||||
organisation Organisation?
|
||||
@@ -862,6 +862,8 @@ model OrganisationGlobalSettings {
|
||||
brandingLogo String @default("")
|
||||
brandingUrl String @default("")
|
||||
brandingCompanyDetails String @default("")
|
||||
brandingColors Json? /// [TCssVarsSchema] @zod.custom.use(ZCssVarsSchema)
|
||||
brandingCss String @default("")
|
||||
|
||||
envelopeExpirationPeriod Json? /// [EnvelopeExpirationPeriod] @zod.custom.use(ZEnvelopeExpirationPeriodSchema)
|
||||
|
||||
@@ -871,7 +873,7 @@ model OrganisationGlobalSettings {
|
||||
aiFeaturesEnabled Boolean @default(false)
|
||||
}
|
||||
|
||||
/// @zod.import(["import { ZDocumentEmailSettingsSchema } from '@documenso/lib/types/document-email';", "import { ZDefaultRecipientsSchema } from '@documenso/lib/types/default-recipients';", "import { ZEnvelopeExpirationPeriod as ZEnvelopeExpirationPeriodSchema } from '@documenso/lib/constants/envelope-expiration';", "import { ZEnvelopeReminderSettings as ZEnvelopeReminderSettingsSchema } from '@documenso/lib/constants/envelope-reminder';"])
|
||||
/// @zod.import(["import { ZDocumentEmailSettingsSchema } from '@documenso/lib/types/document-email';", "import { ZDefaultRecipientsSchema } from '@documenso/lib/types/default-recipients';", "import { ZEnvelopeExpirationPeriod as ZEnvelopeExpirationPeriodSchema } from '@documenso/lib/constants/envelope-expiration';", "import { ZEnvelopeReminderSettings as ZEnvelopeReminderSettingsSchema } from '@documenso/lib/constants/envelope-reminder';", "import { ZCssVarsSchema } from '@documenso/lib/types/css-vars';"])
|
||||
model TeamGlobalSettings {
|
||||
id String @id
|
||||
team Team?
|
||||
@@ -903,6 +905,8 @@ model TeamGlobalSettings {
|
||||
brandingLogo String?
|
||||
brandingUrl String?
|
||||
brandingCompanyDetails String?
|
||||
brandingColors Json? /// [TCssVarsSchema] @zod.custom.use(ZCssVarsSchema)
|
||||
brandingCss String?
|
||||
|
||||
envelopeExpirationPeriod Json? /// [EnvelopeExpirationPeriod] @zod.custom.use(ZEnvelopeExpirationPeriodSchema)
|
||||
|
||||
|
||||
@@ -1,6 +1,8 @@
|
||||
import { ORGANISATION_MEMBER_ROLE_PERMISSIONS_MAP } from '@documenso/lib/constants/organisations';
|
||||
import { AppError, AppErrorCode } from '@documenso/lib/errors/app-error';
|
||||
import { normalizeBrandingColors } from '@documenso/lib/utils/normalize-branding-colors';
|
||||
import { buildOrganisationWhereQuery } from '@documenso/lib/utils/organisations';
|
||||
import { type SanitizeBrandingCssWarning, sanitizeBrandingCss } from '@documenso/lib/utils/sanitize-branding-css';
|
||||
import { prisma } from '@documenso/prisma';
|
||||
import { OrganisationType, Prisma } from '@prisma/client';
|
||||
|
||||
@@ -45,6 +47,8 @@ export const updateOrganisationSettingsRoute = authenticatedProcedure
|
||||
brandingLogo,
|
||||
brandingUrl,
|
||||
brandingCompanyDetails,
|
||||
brandingColors,
|
||||
brandingCss,
|
||||
|
||||
// Email related settings.
|
||||
emailId,
|
||||
@@ -127,6 +131,24 @@ export const updateOrganisationSettingsRoute = authenticatedProcedure
|
||||
});
|
||||
}
|
||||
|
||||
// Sanitize custom branding CSS at write time so we can store the safe
|
||||
// result and skip per-render sanitisation. Warnings are returned to the
|
||||
// UI so the user can see what was dropped.
|
||||
let cssWarnings: SanitizeBrandingCssWarning[] | undefined;
|
||||
let sanitizedBrandingCss: string | undefined;
|
||||
|
||||
if (brandingCss !== undefined) {
|
||||
const result = sanitizeBrandingCss(brandingCss);
|
||||
sanitizedBrandingCss = result.css;
|
||||
cssWarnings = result.warnings;
|
||||
}
|
||||
|
||||
// Strip empty-string colour values; collapse to `null` when the payload
|
||||
// contains no overrides. Keeps the stored row clean and avoids storing
|
||||
// `{}` as a real "override of nothing" (matters more for teams, but the
|
||||
// org row stays tidy this way too).
|
||||
const normalizedBrandingColors = normalizeBrandingColors(brandingColors);
|
||||
|
||||
await prisma.organisation.update({
|
||||
where: {
|
||||
id: organisationId,
|
||||
@@ -155,6 +177,8 @@ export const updateOrganisationSettingsRoute = authenticatedProcedure
|
||||
brandingLogo,
|
||||
brandingUrl,
|
||||
brandingCompanyDetails,
|
||||
brandingColors: normalizedBrandingColors === null ? Prisma.DbNull : normalizedBrandingColors,
|
||||
brandingCss: sanitizedBrandingCss,
|
||||
|
||||
// Email related settings.
|
||||
emailId,
|
||||
@@ -168,4 +192,8 @@ export const updateOrganisationSettingsRoute = authenticatedProcedure
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
return {
|
||||
cssWarnings: cssWarnings && cssWarnings.length > 0 ? cssWarnings : undefined,
|
||||
};
|
||||
});
|
||||
|
||||
@@ -1,10 +1,13 @@
|
||||
import { BRANDING_CSS_MAX_LENGTH } from '@documenso/lib/constants/branding';
|
||||
import { ZEnvelopeExpirationPeriod } from '@documenso/lib/constants/envelope-expiration';
|
||||
import { ZEnvelopeReminderSettings } from '@documenso/lib/constants/envelope-reminder';
|
||||
import { SUPPORTED_LANGUAGE_CODES } from '@documenso/lib/constants/i18n';
|
||||
import { ZCssVarsSchema } from '@documenso/lib/types/css-vars';
|
||||
import { ZDefaultRecipientsSchema } from '@documenso/lib/types/default-recipients';
|
||||
import { ZDocumentEmailSettingsSchema } from '@documenso/lib/types/document-email';
|
||||
import { ZDocumentMetaDateFormatSchema, ZDocumentMetaTimezoneSchema } from '@documenso/lib/types/document-meta';
|
||||
import { DocumentVisibility } from '@documenso/lib/types/document-visibility';
|
||||
import { ZSanitizeBrandingCssWarningSchema } from '@documenso/lib/utils/sanitize-branding-css';
|
||||
import { zEmail } from '@documenso/lib/utils/zod';
|
||||
import { z } from 'zod';
|
||||
|
||||
@@ -32,6 +35,8 @@ export const ZUpdateOrganisationSettingsRequestSchema = z.object({
|
||||
brandingLogo: z.string().optional(),
|
||||
brandingUrl: z.string().optional(),
|
||||
brandingCompanyDetails: z.string().optional(),
|
||||
brandingColors: ZCssVarsSchema.nullish(),
|
||||
brandingCss: z.string().max(BRANDING_CSS_MAX_LENGTH).optional(),
|
||||
|
||||
// Email related settings.
|
||||
emailId: z.string().nullish(),
|
||||
@@ -44,4 +49,6 @@ export const ZUpdateOrganisationSettingsRequestSchema = z.object({
|
||||
}),
|
||||
});
|
||||
|
||||
export const ZUpdateOrganisationSettingsResponseSchema = z.void();
|
||||
export const ZUpdateOrganisationSettingsResponseSchema = z.object({
|
||||
cssWarnings: z.array(ZSanitizeBrandingCssWarningSchema).optional(),
|
||||
});
|
||||
|
||||
@@ -1,7 +1,9 @@
|
||||
import { ORGANISATION_MEMBER_ROLE_PERMISSIONS_MAP } from '@documenso/lib/constants/organisations';
|
||||
import { TEAM_MEMBER_ROLE_PERMISSIONS_MAP } from '@documenso/lib/constants/teams';
|
||||
import { AppError, AppErrorCode } from '@documenso/lib/errors/app-error';
|
||||
import { normalizeBrandingColors } from '@documenso/lib/utils/normalize-branding-colors';
|
||||
import { buildOrganisationWhereQuery } from '@documenso/lib/utils/organisations';
|
||||
import { type SanitizeBrandingCssWarning, sanitizeBrandingCss } from '@documenso/lib/utils/sanitize-branding-css';
|
||||
import { buildTeamWhereQuery } from '@documenso/lib/utils/teams';
|
||||
import { prisma } from '@documenso/prisma';
|
||||
import { OrganisationType, Prisma } from '@prisma/client';
|
||||
@@ -43,6 +45,8 @@ export const updateTeamSettingsRoute = authenticatedProcedure
|
||||
brandingLogo,
|
||||
brandingUrl,
|
||||
brandingCompanyDetails,
|
||||
brandingColors,
|
||||
brandingCss,
|
||||
|
||||
// Email related settings.
|
||||
emailId,
|
||||
@@ -127,6 +131,27 @@ export const updateTeamSettingsRoute = authenticatedProcedure
|
||||
});
|
||||
}
|
||||
|
||||
// Sanitize custom branding CSS at write time. `null` means inherit-from-org
|
||||
// for teams, so only run the sanitiser when an explicit string is provided.
|
||||
// An empty string after sanitisation is collapsed to `null` so the team
|
||||
// row inherits rather than persisting an empty override.
|
||||
let cssWarnings: SanitizeBrandingCssWarning[] | undefined;
|
||||
let sanitizedBrandingCss: string | null | undefined;
|
||||
|
||||
if (brandingCss === null) {
|
||||
sanitizedBrandingCss = null;
|
||||
} else if (typeof brandingCss === 'string') {
|
||||
const result = sanitizeBrandingCss(brandingCss);
|
||||
sanitizedBrandingCss = result.css.trim() === '' ? null : result.css;
|
||||
cssWarnings = result.warnings;
|
||||
}
|
||||
|
||||
// Strip empty-string colour values; collapse to `null` when the payload
|
||||
// contains no overrides. For teams this matters because brandingEnabled
|
||||
// = null inherits from the org — leaving `{}` here would persist a real
|
||||
// override of nothing once a team toggles brandingEnabled = true.
|
||||
const normalizedBrandingColors = normalizeBrandingColors(brandingColors);
|
||||
|
||||
await prisma.team.update({
|
||||
where: {
|
||||
id: teamId,
|
||||
@@ -154,6 +179,8 @@ export const updateTeamSettingsRoute = authenticatedProcedure
|
||||
brandingLogo,
|
||||
brandingUrl,
|
||||
brandingCompanyDetails,
|
||||
brandingColors: normalizedBrandingColors === null ? Prisma.DbNull : normalizedBrandingColors,
|
||||
brandingCss: sanitizedBrandingCss,
|
||||
|
||||
// Email related settings.
|
||||
emailId,
|
||||
@@ -168,4 +195,8 @@ export const updateTeamSettingsRoute = authenticatedProcedure
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
return {
|
||||
cssWarnings: cssWarnings && cssWarnings.length > 0 ? cssWarnings : undefined,
|
||||
};
|
||||
});
|
||||
|
||||
@@ -1,10 +1,13 @@
|
||||
import { BRANDING_CSS_MAX_LENGTH } from '@documenso/lib/constants/branding';
|
||||
import { ZEnvelopeExpirationPeriod } from '@documenso/lib/constants/envelope-expiration';
|
||||
import { ZEnvelopeReminderSettings } from '@documenso/lib/constants/envelope-reminder';
|
||||
import { SUPPORTED_LANGUAGE_CODES } from '@documenso/lib/constants/i18n';
|
||||
import { ZCssVarsSchema } from '@documenso/lib/types/css-vars';
|
||||
import { ZDefaultRecipientsSchema } from '@documenso/lib/types/default-recipients';
|
||||
import { ZDocumentEmailSettingsSchema } from '@documenso/lib/types/document-email';
|
||||
import { ZDocumentMetaDateFormatSchema, ZDocumentMetaTimezoneSchema } from '@documenso/lib/types/document-meta';
|
||||
import { DocumentVisibility } from '@documenso/lib/types/document-visibility';
|
||||
import { ZSanitizeBrandingCssWarningSchema } from '@documenso/lib/utils/sanitize-branding-css';
|
||||
import { zEmail } from '@documenso/lib/utils/zod';
|
||||
import { z } from 'zod';
|
||||
|
||||
@@ -35,6 +38,8 @@ export const ZUpdateTeamSettingsRequestSchema = z.object({
|
||||
brandingLogo: z.string().nullish(),
|
||||
brandingUrl: z.string().nullish(),
|
||||
brandingCompanyDetails: z.string().nullish(),
|
||||
brandingColors: ZCssVarsSchema.nullish(),
|
||||
brandingCss: z.string().max(BRANDING_CSS_MAX_LENGTH).nullish(),
|
||||
|
||||
// Email related settings.
|
||||
emailId: z.string().nullish(),
|
||||
@@ -49,4 +54,6 @@ export const ZUpdateTeamSettingsRequestSchema = z.object({
|
||||
}),
|
||||
});
|
||||
|
||||
export const ZUpdateTeamSettingsResponseSchema = z.void();
|
||||
export const ZUpdateTeamSettingsResponseSchema = z.object({
|
||||
cssWarnings: z.array(ZSanitizeBrandingCssWarningSchema).optional(),
|
||||
});
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
import type { HTMLAttributes } from 'react';
|
||||
import { useState } from 'react';
|
||||
import { useEffect, useState } from 'react';
|
||||
|
||||
import { HexColorInput, HexColorPicker } from 'react-colorful';
|
||||
import { HexColorInput, HexColorPicker, setNonce } from 'react-colorful';
|
||||
|
||||
import { cn } from '../lib/utils';
|
||||
import { Popover, PopoverContent, PopoverTrigger } from './popover';
|
||||
@@ -11,6 +11,7 @@ export type ColorPickerProps = {
|
||||
value: string;
|
||||
defaultValue?: string;
|
||||
onChange: (color: string) => void;
|
||||
nonce?: string;
|
||||
} & HTMLAttributes<HTMLDivElement>;
|
||||
|
||||
export const ColorPicker = ({
|
||||
@@ -19,6 +20,7 @@ export const ColorPicker = ({
|
||||
value,
|
||||
defaultValue = '#000000',
|
||||
onChange,
|
||||
nonce,
|
||||
...props
|
||||
}: ColorPickerProps) => {
|
||||
const [color, setColor] = useState(value || defaultValue);
|
||||
@@ -39,6 +41,12 @@ export const ColorPicker = ({
|
||||
onChange(inputColor);
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
if (nonce) {
|
||||
setNonce(nonce);
|
||||
}
|
||||
}, [nonce]);
|
||||
|
||||
return (
|
||||
<Popover>
|
||||
<PopoverTrigger>
|
||||
@@ -57,6 +65,7 @@ export const ColorPicker = ({
|
||||
color={color}
|
||||
onChange={onColorChange}
|
||||
aria-disabled={disabled}
|
||||
nonce={nonce}
|
||||
{...props}
|
||||
/>
|
||||
|
||||
@@ -72,6 +81,7 @@ export const ColorPicker = ({
|
||||
}
|
||||
}}
|
||||
disabled={disabled}
|
||||
nonce={nonce}
|
||||
/>
|
||||
</PopoverContent>
|
||||
</Popover>
|
||||
|
||||
Reference in New Issue
Block a user