@kanf/wema-kake 0.0.0-stage → 0.1.0

package/dist/lib/worker/sanitize.d.ts

@@ -0,0 +1,4 @@
+export declare class SanitizeError extends Error {
+}
+/** 許可していないタグ、属性、URL スキーム、style の宣言を除いた HTML を返す */
+export declare function sanitizeHtml(html: string): Promise<string>;

package/dist/lib/worker/sanitize.js

@@ -0,0 +1,135 @@
+// 付箋の text（HTML）のサニタイズ。許可リストは wema の src/utils/sanitize.ts に合わせている。
+// wema は DOMParser で木を作ってから処理するが、HTMLRewriter は字句を順に流すだけなので、
+// 次の 2 点を wema より厳しくしている。
+// - 中身が生のテキストとして扱われる要素や SVG / MathML は、タグを外すと中身がマークアップとして
+//   解釈されるので、中身ごと除去する
+// - 出力が変わらなくなるまで繰り返し、タグを外した結果できた不許可の要素を残さない
+const ALLOWED_TAGS = new Set([
+    'b', 'strong', 'i', 'em', 'u', 's', 'br', 'span',
+    'ul', 'ol', 'li', 'a', 'input', 'img', 'iframe', 'video', 'audio', 'div', 'p',
+    // 文字のツールバーの引用ボタンが作る付箋（wema 0.12.0）
+    'blockquote',
+]);
+/** class と style はどのタグでも許可する */
+const TAG_ATTRIBUTES = {
+    a: new Set(['href', 'target', 'rel']),
+    input: new Set(['type', 'checked']),
+    img: new Set(['src', 'alt', 'width', 'height']),
+    iframe: new Set(['src', 'width', 'height', 'sandbox', 'allow', 'allowfullscreen', 'frameborder', 'title']),
+    video: new Set(['src', 'controls', 'preload', 'width', 'height', 'poster']),
+    audio: new Set(['src', 'controls', 'preload']),
+};
+const URL_ATTRIBUTES = new Set(['href', 'src', 'poster']);
+/** 中身ごと除去するタグ */
+const REMOVE_TAGS = new Set([
+    'script', 'style', 'noscript', 'object', 'embed', 'applet',
+    'textarea', 'title', 'xmp', 'plaintext', 'noembed', 'noframes', 'svg', 'math',
+]);
+const ALLOWED_CSS_PROPS = new Set([
+    'color', 'background-color', 'font-size', 'font-weight', 'font-style',
+    'text-decoration', 'text-align', 'margin', 'padding', 'display',
+    'list-style-type', 'white-space',
+]);
+/** wema の SAFE_URL_SCHEMES と同じ */
+const ALLOWED_SCHEMES = new Set(['http', 'https', 'mailto', 'tel']);
+const MAX_PASSES = 4;
+export class SanitizeError extends Error {
+}
+/**
+ * スキームを許可リストで判定する。HTMLRewriter は属性値のエンティティを復号しないので、
+ * スキームの位置にエンティティがある値（`javascript:` など）は拒否する。
+ *
+ * wema は画像などの `data:` URL を許可するが、ここでは受け付けない。画像は R2 に置き、
+ * text には URL だけを入れる（data URL は text の大きさの上限にすぐ達するため）。
+ */
+function isSafeUrl(value) {
+    // ブラウザは URL 中の空白と制御文字を無視してスキームを解釈する
+    const compact = value.replace(/[\u0000- ]/g, '');
+    const head = compact.split(/[/?#]/, 1)[0];
+    if (head.includes('&'))
+        return false;
+    const colon = head.indexOf(':');
+    if (colon === -1)
+        return true;
+    return ALLOWED_SCHEMES.has(head.slice(0, colon).toLowerCase());
+}
+/** 許可した宣言だけを残す。何も除かなかったときは元の文字列をそのまま返す */
+function sanitizeStyle(value) {
+    if (/[&\\]/.test(value))
+        return '';
+    const declarations = value.split(';').filter((d) => d.trim() !== '');
+    const kept = declarations.filter((d) => {
+        const colon = d.indexOf(':');
+        if (colon === -1)
+            return false;
+        const prop = d.slice(0, colon).trim().toLowerCase();
+        const val = d.slice(colon + 1);
+        return ALLOWED_CSS_PROPS.has(prop) && !/url\(|expression\(|@import|[<>]/i.test(val);
+    });
+    if (kept.length === declarations.length)
+        return value;
+    return kept.map((d) => d.trim()).join('; ');
+}
+function sanitizeElement(el) {
+    const tag = el.tagName.toLowerCase();
+    if (REMOVE_TAGS.has(tag)) {
+        el.remove();
+        return;
+    }
+    if (!ALLOWED_TAGS.has(tag)) {
+        el.removeAndKeepContent();
+        return;
+    }
+    if (tag === 'input' && el.getAttribute('type')?.toLowerCase() !== 'checkbox') {
+        el.remove();
+        return;
+    }
+    const allowed = TAG_ATTRIBUTES[tag];
+    for (const [rawName, value] of [...el.attributes]) {
+        const name = rawName.toLowerCase();
+        if (name === 'class')
+            continue;
+        if (name === 'style') {
+            const style = sanitizeStyle(value);
+            if (style === '')
+                el.removeAttribute(rawName);
+            else if (style !== value)
+                el.setAttribute(rawName, style);
+            continue;
+        }
+        if (!allowed?.has(name)) {
+            el.removeAttribute(rawName);
+            continue;
+        }
+        if (URL_ATTRIBUTES.has(name) && !isSafeUrl(value)) {
+            el.removeAttribute(rawName);
+        }
+    }
+    // iframe の中身は生のテキストで、表示には使われない
+    if (tag === 'iframe')
+        el.setInnerContent('');
+}
+function sanitizeOnce(html) {
+    return new HTMLRewriter()
+        .on('*', { element: sanitizeElement })
+        .onDocument({
+        comments(comment) {
+            comment.remove();
+        },
+    })
+        .transform(new Response(html))
+        .text();
+}
+/** 許可していないタグ、属性、URL スキーム、style の宣言を除いた HTML を返す */
+export async function sanitizeHtml(html) {
+    if (!html.includes('<'))
+        return html;
+    let current = html;
+    for (let i = 0; i < MAX_PASSES; i++) {
+        const next = await sanitizeOnce(current);
+        if (next === current)
+            return next;
+        current = next;
+    }
+    throw new SanitizeError('text could not be sanitized');
+}

package/dist/lib/worker/validate.d.ts

@@ -0,0 +1,21 @@
+import type { BoardContent, HistoryDelta, WemaNote } from '../shared/delta';
+/** ops の 1 行（body と fixups の合計）の上限。DO の SQLite は 1 行 2MB まで */
+export declare const MAX_OP_BYTES = 1800000;
+/** 変更を受け付けられないときに投げる。`current` は送信元が手元の状態を直すためのもの */
+export declare class RejectError extends Error {
+    readonly current?: BoardContent | undefined;
+    constructor(reason: string, current?: BoardContent | undefined);
+}
+export type Obj = Record<string, unknown>;
+/** 省略できない接続線のフィールド。未設定に戻す指定は無視する */
+export declare const REQUIRED_EDGE_FIELDS: string[];
+/** 件数の指定を整数にして範囲に収める。数値でなければ `fallback` を使う */
+export declare function clampLimit(value: unknown, fallback: number, max: number): number;
+/** `s` の UTF-8 でのバイト数が `max` を超えるか。長さだけで決まるときはエンコードしない */
+export declare function exceedsBytes(s: string, max: number): boolean;
+declare function id(v: unknown, what: string): string;
+export { id as parseId };
+/** 付箋の、id と zIndex 以外のフィールド */
+export type NoteField = Exclude<keyof WemaNote, 'id' | 'zIndex'>;
+/** 外から来たデルタの形を検証し、既知のフィールドだけを持つデルタにして返す */
+export declare function parseDeltas(input: unknown): HistoryDelta[];

package/dist/lib/worker/validate.js

@@ -0,0 +1,218 @@
+import { CHILD_PAGE_KEY } from '../shared/hierarchy';
+import { isValidSlug } from '../shared/slug';
+const MAX_DELTAS = 2000;
+/**
+ * text 1 つの上限（JSON 文字列にしたときのバイト数）。text の更新 1 回で ops の行に
+ * before / after / fixup の 3 つが入っても MAX_OP_BYTES に収まる大きさにしている
+ */
+const MAX_TEXT_BYTES = 500_000;
+/** ops の 1 行（body と fixups の合計）の上限。DO の SQLite は 1 行 2MB まで */
+export const MAX_OP_BYTES = 1_800_000;
+/** 変更を受け付けられないときに投げる。`current` は送信元が手元の状態を直すためのもの */
+export class RejectError extends Error {
+    current;
+    constructor(reason, current) {
+        super(reason);
+        this.current = current;
+    }
+}
+const ID_RE = /^[\w-]{1,64}$/;
+const COLOR_RE = /^[#\w(),.%\s-]{1,64}$/;
+const ANCHORS = ['top', 'right', 'bottom', 'left', 'auto'];
+const EDGE_STYLES = ['arrow', 'line', 'dashed'];
+const LINE_STYLES = ['solid', 'dashed', 'dotted'];
+const ARROW_HEADS = ['none', 'start', 'end', 'both'];
+const ROUTINGS = ['curve', 'polyline'];
+/** 省略できない接続線のフィールド。未設定に戻す指定は無視する */
+export const REQUIRED_EDGE_FIELDS = ['fromAnchor', 'toAnchor', 'style'];
+/** 件数の指定を整数にして範囲に収める。数値でなければ `fallback` を使う */
+export function clampLimit(value, fallback, max) {
+    return Math.min(Math.max(Math.trunc(Number(value)) || fallback, 1), max);
+}
+const encoder = new TextEncoder();
+/** `s` の UTF-8 でのバイト数が `max` を超えるか。長さだけで決まるときはエンコードしない */
+export function exceedsBytes(s, max) {
+    if (s.length > max)
+        return true;
+    if (s.length * 3 <= max)
+        return false;
+    return encoder.encode(s).length > max;
+}
+function obj(v, what) {
+    if (typeof v !== 'object' || v === null || Array.isArray(v)) {
+        throw new RejectError(`${what} must be an object`);
+    }
+    return v;
+}
+function id(v, what) {
+    if (typeof v !== 'string' || !ID_RE.test(v))
+        throw new RejectError(`invalid ${what}`);
+    return v;
+}
+export { id as parseId };
+function num(v, what) {
+    if (typeof v !== 'number' || !Number.isFinite(v))
+        throw new RejectError(`invalid ${what}`);
+    return v;
+}
+function bool(v, what) {
+    if (typeof v !== 'boolean')
+        throw new RejectError(`invalid ${what}`);
+    return v;
+}
+function oneOf(v, values, what) {
+    if (typeof v !== 'string' || !values.includes(v))
+        throw new RejectError(`invalid ${what}`);
+    return v;
+}
+function text(v) {
+    if (typeof v !== 'string')
+        throw new RejectError('invalid text');
+    // JSON にすると 1 文字が最大 6 バイト（\uXXXX）になる。明らかに収まるときは計算を省く
+    if (v.length * 6 + 2 > MAX_TEXT_BYTES && exceedsBytes(JSON.stringify(v), MAX_TEXT_BYTES)) {
+        throw new RejectError('text too large');
+    }
+    return v;
+}
+function color(v) {
+    if (typeof v !== 'string' || !COLOR_RE.test(v))
+        throw new RejectError('invalid color');
+    return v;
+}
+function label(v) {
+    if (typeof v !== 'string' || v.length > 500)
+        throw new RejectError('invalid label');
+    return v;
+}
+const META_KEY_RE = /^[\w-]{1,32}$/;
+const MAX_META_KEYS = 8;
+const MAX_META_VALUE_LENGTH = 256;
+/**
+ * 付箋の meta（利用側のデータ。wema は中身を解釈しない）。値は文字列だけ。
+ * wema は大きさと形を制限しないので、ここで制限する。キーは並べ替えて返す（保存した値を、
+ * 文字列にして比べられるようにするため）。
+ *
+ * `page` は、子ページの付箋が指す子ページのスラッグ（src/shared/hierarchy.ts）
+ */
+function meta(v) {
+    const entries = Object.entries(obj(v, 'meta')).sort(([a], [b]) => (a < b ? -1 : 1));
+    if (entries.length > MAX_META_KEYS)
+        throw new RejectError('invalid meta');
+    for (const [key, value] of entries) {
+        if (!META_KEY_RE.test(key) || typeof value !== 'string' || value.length > MAX_META_VALUE_LENGTH) {
+            throw new RejectError('invalid meta');
+        }
+    }
+    const out = Object.fromEntries(entries);
+    if (CHILD_PAGE_KEY in out && !isValidSlug(out[CHILD_PAGE_KEY]))
+        throw new RejectError('invalid meta');
+    return out;
+}
+/**
+ * 付箋の、id と zIndex 以外のフィールド。zIndex は同期しないので更新では捨てる。
+ * **wema が足したフィールドは、ここに足すまで型エラーになる**（`pick` は知らないフィールドを黙って
+ * 捨てるので、足し忘れると、そのフィールドだけが保存されない）
+ */
+const NOTE_FIELDS = {
+    x: (v) => num(v, 'x'),
+    y: (v) => num(v, 'y'),
+    width: (v) => num(v, 'width'),
+    height: (v) => num(v, 'height'),
+    text,
+    color,
+    autoSize: (v) => bool(v, 'autoSize'),
+    foldable: (v) => bool(v, 'foldable'),
+    meta,
+};
+/** 接続線の、id / from / to 以外のフィールド。from / to は変更できないので更新では捨てる */
+const EDGE_FIELDS = {
+    fromAnchor: (v) => oneOf(v, ANCHORS, 'fromAnchor'),
+    toAnchor: (v) => oneOf(v, ANCHORS, 'toAnchor'),
+    style: (v) => oneOf(v, EDGE_STYLES, 'style'),
+    label,
+    lineStyle: (v) => oneOf(v, LINE_STYLES, 'lineStyle'),
+    strokeWidth: (v) => num(v, 'strokeWidth'),
+    arrowHead: (v) => oneOf(v, ARROW_HEADS, 'arrowHead'),
+    arrowSize: (v) => num(v, 'arrowSize'),
+    routing: (v) => oneOf(v, ROUTINGS, 'routing'),
+    collapsed: (v) => bool(v, 'collapsed'),
+};
+/** 既知のフィールドだけを検証して取り出す。値が null / undefined のキーは無いものとして扱う */
+function pick(source, fields) {
+    const out = {};
+    for (const [key, parse] of Object.entries(fields)) {
+        if (source[key] != null)
+            out[key] = parse(source[key]);
+    }
+    return out;
+}
+function requireKeys(o, keys, what) {
+    for (const key of keys) {
+        if (!(key in o))
+            throw new RejectError(`${what}.${key} is required`);
+    }
+}
+function parseNote(v) {
+    const o = obj(v, 'note');
+    const fields = pick(o, NOTE_FIELDS);
+    requireKeys(fields, ['x', 'y', 'width', 'height', 'text', 'color'], 'note');
+    const zIndex = o.zIndex == null ? 0 : num(o.zIndex, 'zIndex');
+    return { ...fields, id: id(o.id, 'note id'), zIndex: Math.trunc(zIndex) };
+}
+function parseEdge(v) {
+    const o = obj(v, 'edge');
+    const fields = pick(o, EDGE_FIELDS);
+    requireKeys(fields, REQUIRED_EDGE_FIELDS, 'edge');
+    return {
+        ...fields,
+        id: id(o.id, 'edge id'),
+        from: id(o.from, 'edge from'),
+        to: id(o.to, 'edge to'),
+    };
+}
+function parseUpdate(d, fields) {
+    return {
+        before: pick(obj(d.before ?? {}, 'before'), fields),
+        after: pick(obj(d.after, 'after'), fields),
+    };
+}
+function parseDelta(v) {
+    const d = obj(v, 'delta');
+    switch (d.type) {
+        case 'note:create':
+        case 'note:delete':
+            return { type: d.type, note: parseNote(d.note) };
+        case 'note:update':
+            return { type: d.type, noteId: id(d.noteId, 'noteId'), ...parseUpdate(d, NOTE_FIELDS) };
+        case 'edge:create':
+        case 'edge:delete':
+            return { type: d.type, edge: parseEdge(d.edge) };
+        case 'edge:update':
+            return { type: d.type, edgeId: id(d.edgeId, 'edgeId'), ...parseUpdate(d, EDGE_FIELDS) };
+        default:
+            throw new RejectError('unknown delta type');
+    }
+}
+/** 外から来たデルタの形を検証し、既知のフィールドだけを持つデルタにして返す */
+export function parseDeltas(input) {
+    if (!Array.isArray(input) || input.length === 0)
+        throw new RejectError('invalid deltas');
+    if (input.length > MAX_DELTAS) {
+        throw new RejectError(`too many deltas (${input.length}, limit ${MAX_DELTAS})`);
+    }
+    // サニタイズは text の量に比例して時間がかかる。記録できない大きさの入力は、
+    // サニタイズに回す前にここで断る（記録時の MAX_OP_BYTES の検査より手前で止める）
+    let textLength = 0;
+    return input.map((v) => {
+        const d = parseDelta(v);
+        if (d.type === 'note:create') {
+            textLength += d.note.text.length;
+        }
+        else if (d.type === 'note:update') {
+            textLength += (d.before.text?.length ?? 0) + (d.after.text?.length ?? 0);
+        }
+        if (textLength > MAX_OP_BYTES)
+            throw new RejectError('operation too large');
+        return d;
+    });
+}