mirror of
https://github.com/Psychotoxical/psysonic.git
synced 2026-07-21 14:55:43 +00:00
Psychotoxical
23f032b274
* feat(themes): free-form community themes with a security floor Community themes are no longer token-only. The in-app guard (validateThemeCss) now enforces only a security floor — no network (@import / non-data url()), no scripts (<style>/<script>/expression()/ javascript:/-moz-binding), no @property, @keyframes namespaced as <id>-, and a 256 KB cap — and otherwise allows any selectors, structure and animations. validateThemePackage checks the manifest plus that floor. Themes can react to app state via same-element attributes set on the theme root: data-playing, data-fullscreen, data-sidebar-collapsed, data-lyrics-open. The local-import confirm dialog now notes that imported themes aren't reviewed and are installed at the user's own risk. Removes the now-unused bundled token whitelist. * docs(themes): note free-form themes in the Theme Store entry Add PR #1015 and a free-form bullet to the still-unreleased Theme Store changelog and credits entry.
123 lines
4.8 KiB
TypeScript
123 lines
4.8 KiB
TypeScript
/**
|
|
* Tests for the runtime theme-CSS security floor and <head> injection sync.
|
|
* Community themes are free-form; the floor only blocks the hard safety
|
|
* invariants (network, scripts, breakout, unscoped @keyframes, size).
|
|
*/
|
|
import { afterEach, describe, expect, it } from 'vitest';
|
|
import {
|
|
validateThemeCss,
|
|
injectTheme,
|
|
syncInjectedThemes,
|
|
} from './themeInjection';
|
|
import type { InstalledTheme } from '../../store/installedThemesStore';
|
|
|
|
const ATTR = 'data-installed-theme';
|
|
|
|
function mk(id: string, css: string): InstalledTheme {
|
|
return { id, name: id, author: 'a', version: '1.0.0', description: '', mode: 'dark', css, installedAt: 0 };
|
|
}
|
|
const block = (id: string, body = '--accent:#fff;') => `[data-theme='${id}']{ ${body} }`;
|
|
const injected = () => document.head.querySelectorAll(`style[${ATTR}]`);
|
|
|
|
afterEach(() => {
|
|
document.head.querySelectorAll(`style[${ATTR}]`).forEach((el) => el.remove());
|
|
});
|
|
|
|
describe('validateThemeCss (security floor)', () => {
|
|
it('accepts a simple scoped rule', () => {
|
|
expect(validateThemeCss(block('dracula'), 'dracula')).not.toBeNull();
|
|
});
|
|
|
|
it('accepts free-form selectors and structure', () => {
|
|
const css = `html { color: red; } .sidebar { background: #000; } [data-theme='x'] .player-bar { opacity: 0.9; }`;
|
|
expect(validateThemeCss(css, 'x')).not.toBeNull();
|
|
});
|
|
|
|
it('accepts @media and multiple rules', () => {
|
|
const css = `${block('x')} @media (min-width: 600px) { .sidebar { width: 200px; } }`;
|
|
expect(validateThemeCss(css, 'x')).not.toBeNull();
|
|
});
|
|
|
|
it('accepts @keyframes namespaced with the theme id, and its animation use', () => {
|
|
const css = `@keyframes x-pulse { from { opacity: 1 } to { opacity: 0.5 } } .sidebar { animation: x-pulse 2s infinite; }`;
|
|
expect(validateThemeCss(css, 'x')).not.toBeNull();
|
|
});
|
|
|
|
it('accepts a data: url()', () => {
|
|
const css = block('x', `--select-arrow: url("data:image/svg+xml,%3Csvg%3E%3C/svg%3E");`);
|
|
expect(validateThemeCss(css, 'x')).not.toBeNull();
|
|
});
|
|
|
|
it('rejects @keyframes not namespaced with the theme id', () => {
|
|
expect(validateThemeCss(`@keyframes pulse { from {} to {} } ${block('x')}`, 'x')).toBeNull();
|
|
});
|
|
|
|
it('rejects @import', () => {
|
|
expect(validateThemeCss(`@import 'evil.css'; ${block('x')}`, 'x')).toBeNull();
|
|
});
|
|
|
|
it('rejects @property (global custom-prop registration)', () => {
|
|
const css = `@property --x { syntax: '<color>'; inherits: false; initial-value: red; } ${block('x')}`;
|
|
expect(validateThemeCss(css, 'x')).toBeNull();
|
|
});
|
|
|
|
it('rejects a non-data url()', () => {
|
|
expect(validateThemeCss(block('x', `--accent: url(https://evil.test/x.png);`), 'x')).toBeNull();
|
|
});
|
|
|
|
it('rejects </style> / <script> breakout', () => {
|
|
expect(validateThemeCss(`${block('x')}</style><script>`, 'x')).toBeNull();
|
|
});
|
|
|
|
it('rejects expression() / javascript:', () => {
|
|
expect(validateThemeCss(block('x', '--accent: expression(alert(1));'), 'x')).toBeNull();
|
|
expect(validateThemeCss(block('x', '--accent: javascript:alert(1);'), 'x')).toBeNull();
|
|
});
|
|
|
|
it('rejects an oversized css blob', () => {
|
|
const huge = `[data-theme='x']{ ${'--accent:#ffffff;'.repeat(20000)} }`;
|
|
expect(huge.length).toBeGreaterThan(256 * 1024);
|
|
expect(validateThemeCss(huge, 'x')).toBeNull();
|
|
});
|
|
|
|
it('ignores comments when validating', () => {
|
|
expect(validateThemeCss(`/* hi */ ${block('x')}`, 'x')).not.toBeNull();
|
|
// A comment cannot smuggle an @import past the floor.
|
|
expect(validateThemeCss(`${block('x')} /* */ @import 'x';`, 'x')).toBeNull();
|
|
});
|
|
});
|
|
|
|
describe('syncInjectedThemes', () => {
|
|
it('injects one <style> per installed theme', () => {
|
|
syncInjectedThemes([mk('a', block('a')), mk('b', block('b'))]);
|
|
expect(injected()).toHaveLength(2);
|
|
expect(document.head.querySelector(`style[${ATTR}="a"]`)?.textContent).toContain('data-theme');
|
|
});
|
|
|
|
it('removes styles for themes no longer installed', () => {
|
|
syncInjectedThemes([mk('a', block('a')), mk('b', block('b'))]);
|
|
syncInjectedThemes([mk('a', block('a'))]);
|
|
expect(injected()).toHaveLength(1);
|
|
expect(document.head.querySelector(`style[${ATTR}="b"]`)).toBeNull();
|
|
});
|
|
|
|
it('is idempotent (no duplicate elements)', () => {
|
|
syncInjectedThemes([mk('a', block('a'))]);
|
|
syncInjectedThemes([mk('a', block('a'))]);
|
|
expect(injected()).toHaveLength(1);
|
|
});
|
|
|
|
it('updates textContent when the css changes', () => {
|
|
injectTheme(mk('a', block('a', '--accent:#111;')));
|
|
injectTheme(mk('a', block('a', '--accent:#222;')));
|
|
const el = document.head.querySelector(`style[${ATTR}="a"]`);
|
|
expect(injected()).toHaveLength(1);
|
|
expect(el?.textContent).toContain('#222');
|
|
});
|
|
|
|
it('does not inject css that fails the floor', () => {
|
|
syncInjectedThemes([mk('a', `@import 'evil.css'; ${block('a')}`)]);
|
|
expect(injected()).toHaveLength(0);
|
|
});
|
|
});
|