mirror of
https://github.com/screentinker/screentinker.git
synced 2026-06-19 20:52:32 -06:00
4cc8ccb67e
Text could run off the edge (long/large headlines, nowrap) and shapes placed at the far edge (e.g. a bottom band at y=100) spilled over. - Server-side fit pass on every generated element: shrink text fontSize so it fits the canvas width (chars*fontSize*0.075, tuned for bold/uppercase headlines) and height (incl. line-height), then nudge x/y within 4% margins; clamp shapes so x+width<=100 and y+height<=100. Deterministic - doesn't rely on the model getting layout right. - Designer preview: vw -> cqw (+ container-type on the canvas) so text scales to the canvas, not the browser window. The preview was overstating size vs what actually publishes; now it matches. Published widget keeps vw (scales on the player). Verified: Playwright DOM check shows zero elements overflowing the canvas after generation; unit test asserts long text is shrunk + repositioned in-bounds. 62/62.
89 lines
4.1 KiB
JavaScript
89 lines
4.1 KiB
JavaScript
'use strict';
|
|
|
|
// #41: unit tests for the security-critical bits of the AI design route -
|
|
// normalizing untrusted LLM output, and the SSRF guard on the configurable
|
|
// endpoint. Node v20 built-ins only; db is mocked so requiring the route doesn't
|
|
// touch a real database. SELF_HOSTED=false so the SSRF guard is active.
|
|
|
|
const test = require('node:test');
|
|
const assert = require('node:assert/strict');
|
|
const Database = require('better-sqlite3');
|
|
|
|
process.env.JWT_SECRET = 'test-secret-ai';
|
|
process.env.SELF_HOSTED = 'false';
|
|
|
|
const db = new Database(':memory:');
|
|
const dbModulePath = require.resolve('../db/database');
|
|
require.cache[dbModulePath] = { id: dbModulePath, filename: dbModulePath, loaded: true, exports: { db, pruneTelemetry() {}, pruneScreenshots() {} } };
|
|
|
|
const ai = require('../routes/ai');
|
|
const { normalizeDesign, endpointAllowed } = ai;
|
|
|
|
test('normalizeDesign: keeps valid text+shape, sets background', () => {
|
|
const d = normalizeDesign({ background: '#102030', elements: [
|
|
{ type: 'text', x: 5, y: 5, text: 'HELLO', fontSize: 90, color: '#ffffff', bold: true },
|
|
{ type: 'shape', x: 0, y: 90, width: 100, height: 8, color: '#ff0000', opacity: 0.5 },
|
|
]});
|
|
assert.equal(d.background, '#102030');
|
|
assert.equal(d.elements.length, 2);
|
|
assert.equal(d.elements[0].text, 'HELLO');
|
|
assert.equal(d.elements[0].fontFamily, 'Arial');
|
|
});
|
|
|
|
test('normalizeDesign: converts pixel shape dims to %, clamps ranges', () => {
|
|
const d = normalizeDesign({ elements: [
|
|
{ type: 'shape', x: -10, y: 200, width: 1920, height: 1080, color: 'red', opacity: 5 },
|
|
]});
|
|
const s = d.elements[0];
|
|
assert.equal(s.x, 0, 'x clamped so full-width shape fits');
|
|
assert.equal(s.y, 0, 'y clamped so full-height shape fits (y+height<=100)');
|
|
assert.ok(Math.abs(s.width - 100) < 0.01, '1920px -> 100%');
|
|
assert.ok(Math.abs(s.height - 100) < 0.01, '1080px -> 100%');
|
|
assert.equal(s.color, '#3b82f6', 'non-hex color -> default');
|
|
assert.equal(s.opacity, 1, 'opacity clamped to 1');
|
|
});
|
|
|
|
test('normalizeDesign: strips HTML from text, drops empty/invalid', () => {
|
|
const d = normalizeDesign({ elements: [
|
|
{ type: 'text', text: '<img src=x onerror=alert(1)>Sale</b>', fontSize: 9999 },
|
|
{ type: 'text', text: ' ' },
|
|
{ type: 'bogus', text: 'x' },
|
|
null,
|
|
]});
|
|
assert.equal(d.elements.length, 1, 'only the one real text survives');
|
|
assert.equal(d.elements[0].text, 'Sale');
|
|
assert.ok(!/[<>]/.test(d.elements[0].text), 'no angle brackets');
|
|
assert.equal(d.elements[0].fontSize, 200, 'fontSize clamped to max');
|
|
});
|
|
|
|
test('normalizeDesign: caps element count + bad input', () => {
|
|
const many = { elements: Array.from({ length: 50 }, () => ({ type: 'text', text: 'x' })) };
|
|
assert.ok(normalizeDesign(many).elements.length <= 20);
|
|
assert.deepEqual(normalizeDesign(null).elements, []);
|
|
assert.equal(normalizeDesign({ background: 'notacolor' }).background, '#111827');
|
|
});
|
|
|
|
test('endpointAllowed: blocks private/internal when hosted, allows public https', () => {
|
|
assert.equal(endpointAllowed('https://api.openai.com/v1'), true);
|
|
assert.equal(endpointAllowed('http://localhost:11434/v1'), false);
|
|
assert.equal(endpointAllowed('http://127.0.0.1:1234'), false);
|
|
assert.equal(endpointAllowed('http://10.0.0.5/v1'), false);
|
|
assert.equal(endpointAllowed('http://192.168.1.9/v1'), false);
|
|
assert.equal(endpointAllowed('http://169.254.169.254/latest/meta-data'), false, 'cloud metadata blocked');
|
|
assert.equal(endpointAllowed('http://172.16.5.5/v1'), false);
|
|
assert.equal(endpointAllowed('ftp://example.com'), false, 'non-http blocked');
|
|
assert.equal(endpointAllowed('not a url'), false);
|
|
});
|
|
|
|
test('normalizeDesign: long/large text is shrunk + repositioned to fit canvas', () => {
|
|
const d = normalizeDesign({ elements: [
|
|
{ type: 'text', x: 30, y: 95, text: 'GRAND OPENING THIS FRIDAY EVERYONE WELCOME', fontSize: 160, color: '#fff' },
|
|
]});
|
|
const e = d.elements[0];
|
|
const w = e.text.length * e.fontSize * 0.075;
|
|
assert.ok(e.x + w <= 96.5, `fits horizontally (x=${e.x} w=${w.toFixed(1)})`);
|
|
assert.ok(e.y + e.fontSize * 0.22 <= 96.5, 'fits vertically');
|
|
assert.ok(e.fontSize < 160, 'fontSize was shrunk');
|
|
assert.ok(e.x >= 4 && e.y >= 4, 'within margins');
|
|
});
|