Реалізація WYSIWYG-редактора для користувацького контенту на сайті

Реалізація WYSIWYG-редактора для користувацького контенту на сайті

Уявіть: користувач додає відгук з жирним текстом, посиланням на шкідливий сайт і вбудованим скриптом. Без фільтрації це компрометує весь сайт. Нещодавно ми зіткнулися з проектом, де щомісяця фіксувалося до 50 XSS-атак через поле відгуку. Після впровадження TipTap з DOMPurify атаки припинилися, а час модерації скоротився на 70%. У цій статті ми покажемо, як впровадити WYSIWYG-редактор з повним захистом і передбачуваним форматуванням. Ви отримаєте готову архітектуру: від вибору інструмента до рендерингу збереженого HTML.

Вибір редактора: Quill, TipTap чи Lexical?

Для користувацького контенту підходять три основні редактори. Їх порівняння — у таблиці:

TipTap — найбільш збалансований вибір для користувацького контенту. Він у 2–3 рази продуктивніший за Quill на довгих документах завдяки віртуальному DOM ProseMirror і підтримує React Server Components. Lexical у 1.5 рази швидший за TipTap на операціях вставки, але вимагає більше boilerplate.

Як налаштувати TipTap під користувацькі сценарії?

Почнемо з встановлення пакетів і створення компонента. Включаємо StarterKit, обмежуємо заголовки (h2, h3), вимикаємо блоки коду. Посилання примусово відкриваємо в новій вкладці з rel="nofollow noopener noreferrer". Зображення завантажуємо через uploadFn.

// components/UserEditor.tsx import { useEditor, EditorContent } from '@tiptap/react' import StarterKit from '@tiptap/starter-kit' import Link from '@tiptap/extension-link' import Image from '@tiptap/extension-image' import Placeholder from '@tiptap/extension-placeholder' import { useCallback } from 'react' interface UserEditorProps { initialContent?: string onChange: (html: string) => void maxLength?: number } export function UserEditor({ initialContent, onChange, maxLength = 10000 }: UserEditorProps) { const editor = useEditor({ extensions: [ StarterKit.configure({ heading: { levels: [2, 3] }, codeBlock: false, horizontalRule: false, }), Link.configure({ openOnClick: false, HTMLAttributes: { rel: 'nofollow noopener noreferrer', target: '_blank', }, validate: href => /^https?:\/\//.test(href), }), Image.configure({ allowBase64: false, HTMLAttributes: { loading: 'lazy' }, }), Placeholder.configure({ placeholder: 'Напишіть щось...', }), ], content: initialContent, onUpdate: ({ editor }) => { const html = editor.getHTML() if (html.length <= maxLength) { onChange(html) } }, }) const addLink = useCallback(() => { const url = window.prompt('URL:') if (url) editor?.chain().focus().setLink({ href: url }).run() }, [editor]) if (!editor) return null return ( <div className="border rounded-lg overflow-hidden"> <div className="flex gap-1 p-2 border-b bg-gray-50 flex-wrap"> <ToolbarButton active={editor.isActive('bold')} onClick={() => editor.chain().focus().toggleBold().run()} title="Жирний">B</ToolbarButton> <ToolbarButton active={editor.isActive('italic')} onClick={() => editor.chain().focus().toggleItalic().run()} title="Курсив">I</ToolbarButton> <ToolbarButton active={editor.isActive('bulletList')} onClick={() => editor.chain().focus().toggleBulletList().run()} title="Список">•</ToolbarButton> <ToolbarButton active={editor.isActive('link')} onClick={addLink} title="Посилання">🔗</ToolbarButton> </div> <EditorContent editor={editor} className="prose max-w-none p-4 min-h-[150px] focus:outline-none" /> {maxLength && <div className="text-xs text-gray-400 px-4 py-1 border-t text-right">{editor.storage.characterCount?.characters?.() ?? 0} / {maxLength}</div>} </div> ) } 

Чому санітизація HTML обов'язкова?

Ніколи не зберігайте та не рендерте HTML від користувача без очищення. Навіть якщо редактор обмежує теги на фронтенді — прямий POST до API обходить це. Використовуйте DOMPurify на сервері з білим списком тегів і атрибутів. Забороніть style, onerror, onload — найчастіші вектори XSS. Як зазначають експерти OWASP, XSS-атаки залишаються в топ-10 вразливостей веб-додатків. Зниження ризику досягає 99% при правильному налаштуванні.

// lib/sanitize.ts import DOMPurify from 'isomorphic-dompurify' const ALLOWED_TAGS = ['p', 'br', 'strong', 'em', 'u', 's', 'h2', 'h3', 'ul', 'ol', 'li', 'blockquote', 'a', 'img'] const ALLOWED_ATTR = ['href', 'src', 'alt', 'loading', 'rel', 'target', 'class'] export function sanitizeUserHtml(dirty: string): string { return DOMPurify.sanitize(dirty, { ALLOWED_TAGS, ALLOWED_ATTR, FORBID_ATTR: ['style', 'onerror', 'onload'], ADD_ATTR: ['rel'], FORCE_BODY: false, }) } 

Як організувати завантаження зображень?

Користувачі захочуть вставляти картинки. Створіть ендпоінт, який перевіряє тип файлу (тільки JPEG, PNG, WebP), розмір (до 5 MB), оптимізує через sharp і завантажує в S3 з довготривалим кешуванням. В редакторі підключіть uploadFn.

// app/api/upload/route.ts import sharp from 'sharp' import { S3Client, PutObjectCommand } from '@aws-sdk/client-s3' const s3 = new S3Client({ region: process.env.AWS_REGION }) export async function POST(request: Request) { const form = await request.formData() const file = form.get('file') as File if (!file) return new Response('No file', { status: 400 }) if (file.size > 5 * 1024 * 1024) return new Response('Too large', { status: 413 }) if (!['image/jpeg', 'image/png', 'image/webp'].includes(file.type)) { return new Response('Invalid type', { status: 415 }) } const buffer = Buffer.from(await file.arrayBuffer()) const optimized = await sharp(buffer) .resize(1200, 1200, { fit: 'inside', withoutEnlargement: true }) .webp({ quality: 80 }) .toBuffer() const key = `user-uploads/${Date.now()}-${crypto.randomUUID()}.webp` await s3.send(new PutObjectCommand({ Bucket: process.env.S3_BUCKET, Key: key, Body: optimized, ContentType: 'image/webp', CacheControl: 'public, max-age=31536000, immutable', })) return Response.json({ url: `${process.env.CDN_URL}/${key}` }) } 

Покроковий план інтеграції WYSIWYG-редактора

1. Вибір редактора під ваш стек (React, Vue, Angular, CMS). Оцініть розмір бандла та необхідні розширення.
2. Налаштування тулбару: дозвольте обмежений набір елементів (жирний, курсив, список, посилання, зображення).
3. Серверна санітизація: розгорніть DOMPurify з білим списком тегів і атрибутів.
4. Інтеграція завантаження зображень: створіть API-ендпоінт з перевіркою типу та розміру, оптимізацією та CDN.
5. Рендеринг з повторною санітизацією при виведенні. Використовуйте той самий список дозволених тегів.

Рендеринг збереженого HTML

При виведенні повторно санітизуйте HTML — на випадок, якщо дані застаріли або зберігаються в нечищеному вигляді. Використовуйте той самий список тегів.

// components/UserContent.tsx import DOMPurify from 'isomorphic-dompurify' export function UserContent({ html }: { html: string }) { const clean = DOMPurify.sanitize(html, { ALLOWED_TAGS, ALLOWED_ATTR }) return ( <div className="prose prose-sm max-w-none prose-a:text-blue-600 prose-a:no-underline hover:prose-a:underline prose-img:rounded-lg prose-img:mx-auto" dangerouslySetInnerHTML={{ __html: clean }} /> ) } 

Що входить в реалізацію під ключ

Ми пропонуємо повний цикл впровадження WYSIWYG-редактора для користувацького контенту:

• Вибір редактора під ваш стек (React, Vue, Angular, CMS).
• Налаштування тулбару: дозволені елементи, посилання, зображення.
• Серверна санітизація з розгортанням DOMPurify.
• Інтеграція завантаження зображень з оптимізацією та CDN.
• Автоматична модерація контенту (перевірка на спам-посилання, флаг через API).
• Навчання команди та документація.
• Гарантія на безпеку та підтримка після запуску.

Терміни та вартість

Базовий редактор з санітизацією: від 2 до 3 днів. Із завантаженням зображень та CDN: до 5 днів. Вартість розраховується індивідуально — зв'яжіться з нами для оцінки вашого проекту. Ми реалізуємо рішення під ключ, спираючись на 5+ років досвіду та 50+ успішних проектів у цій області.

Чому обирають нас?

• 5+ років досвіду у веб-розробці та безпеці.
• 50+ проектів з користувацьким контентом.
• Гарантуємо коректну роботу на всіх популярних браузерах.
• Повна прозорість: ви отримуєте код, документацію та доступи.

Замовте впровадження WYSIWYG-редактора під ключ — забезпечте безпеку та зручність вашим користувачам. Отримайте консультацію щодо вашого проекту вже сьогодні.