OpenFrame/lib/validation.ts

/**
 * Validates that a URL uses only safe schemes (http/https)
 * Prevents javascript:, data:, and other potentially dangerous URI schemes
 */
export function isValidHttpUrl(urlString: string): boolean {
    try {
        const url = new URL(urlString);
        return url.protocol === 'http:' || url.protocol === 'https:';
    } catch {
        return false;
    }
}

// Matches exactly 6-digit hex colours produced by the annotation canvas (e.g. #FF3B30)
const ANNOTATION_COLOR_RE = /^#[0-9a-fA-F]{6}$/;
const MAX_STROKES = 500;
const MAX_POINTS_PER_STROKE = 2000;
const MIN_STROKE_WIDTH = 1;
const MAX_STROKE_WIDTH = 20;

/**
 * Validates and returns a safe copy of annotation stroke data.
 *
 * Accepts only an array of plain stroke objects with the exact shape created
 * by AnnotationCanvas. Rejects anything that could trigger prototype pollution
 * or carry unexpected properties into the renderer.
 *
 * Returns null when the input is absent or structurally invalid.
 */
export function validateAnnotationStrokes(
    data: unknown
): { points: { x: number; y: number }[]; color: string; width: number }[] | null {
    if (data === null || data === undefined) return null;
    if (!Array.isArray(data)) return null;
    if (data.length > MAX_STROKES) return null;

    const result: { points: { x: number; y: number }[]; color: string; width: number }[] = [];

    for (const stroke of data) {
        if (stroke === null || typeof stroke !== 'object' || Array.isArray(stroke)) return null;

        const { points, color, width } = stroke as Record<string, unknown>;

        if (!Array.isArray(points)) return null;
        if (points.length > MAX_POINTS_PER_STROKE) return null;

        const safePoints: { x: number; y: number }[] = [];
        for (const pt of points) {
            if (pt === null || typeof pt !== 'object' || Array.isArray(pt)) return null;
            const { x, y } = pt as Record<string, unknown>;
            if (typeof x !== 'number' || !isFinite(x)) return null;
            if (typeof y !== 'number' || !isFinite(y)) return null;
            safePoints.push({ x, y });
        }

        if (typeof color !== 'string' || !ANNOTATION_COLOR_RE.test(color)) return null;
        if (typeof width !== 'number' || width < MIN_STROKE_WIDTH || width > MAX_STROKE_WIDTH) return null;

        result.push({ points: safePoints, color, width });
    }

    return result;
}

/**
 * Validates a URL and returns an error message if invalid
 */
export function validateUrl(urlString: string, fieldName: string = 'URL'): string | null {
    if (!urlString || typeof urlString !== 'string') {
        return `${fieldName} is required`;
    }

    if (!isValidHttpUrl(urlString)) {
        return `${fieldName} must be a valid HTTP or HTTPS URL`;
    }

    return null;
}

/**
 * Validates an optional URL - returns null if empty/undefined, error if invalid
 */
export function validateOptionalUrl(urlString: string | null | undefined, fieldName: string = 'URL'): string | null {
    if (!urlString) {
        return null; // Optional URLs can be empty
    }

    return validateUrl(urlString, fieldName);
}