@akinon/pz-theme 2.0.162-rc.0 → 2.0.163-beta.0

package/src/utils/__tests__/sanitize-rich-text.test.ts

@@ -1,80 +0,0 @@
-import { sanitizeRichText } from '../sanitize-rich-text';
-
-describe('sanitizeRichText', () => {
-  it('keeps the markup the editor writes', () => {
-    const html =
-      '<p>Sipariş <b>verirseniz</b> <i>yarın</i> <u>kapınızda</u></p><ul><li>bir</li></ul><h2>Başlık</h2><br>';
-
-    expect(sanitizeRichText(html)).toBe(
-      '<p>Sipariş <b>verirseniz</b> <i>yarın</i> <u>kapınızda</u></p><ul><li>bir</li></ul><h2>Başlık</h2><br />'
-    );
-  });
-
-  it('drops scripts, event handlers and unknown tags but keeps their text', () => {
-    const html =
-      '<p onclick="x()">a<script>alert(1)</script><custom>b</custom><img src=x onerror=alert(1)></p>';
-
-    expect(sanitizeRichText(html)).toBe('<p>ab</p>');
-  });
-
-  it('keeps only safe links and forces rel on new-tab links', () => {
-    expect(
-      sanitizeRichText(
-        '<a href="javascript:alert(1)">x</a><a href="https://gant.com" target="_blank">y</a><a href="/sss">z</a>'
-      )
-    ).toBe(
-      '<a>x</a><a href="https://gant.com" target="_blank" rel="noopener noreferrer">y</a><a href="/sss">z</a>'
-    );
-  });
-
-  it('keeps only the colour and emphasis styles', () => {
-    expect(
-      sanitizeRichText(
-        '<span style="color: #9a2320; position: fixed; background: url(x)">a</span>'
-      )
-    ).toBe('<span style="color: #9a2320">a</span>');
-  });
-
-  it('leaves text, entities and placeholders untouched', () => {
-    expect(sanitizeRichText('{{countdown}} &amp; {{add_day|4}}')).toBe(
-      '{{countdown}} &amp; {{add_day|4}}'
-    );
-    expect(sanitizeRichText('')).toBe('');
-  });
-
-  it('reads tag names the way the browser does, so no element slips through as text', () => {
-    expect(
-      sanitizeRichText(
-        '<x_y onmouseover=alert(1) style=position:fixed;inset:0>a</x_y>'
-      )
-    ).toBe('a');
-    expect(sanitizeRichText('<svg/onload=alert(1)>b')).toBe('b');
-  });
-
-  it('never lets an unfinished tag run into the markup that follows', () => {
-    expect(sanitizeRichText('<img src=x onerror=alert(1)')).toBe(
-      '&lt;img src=x onerror=alert(1)'
-    );
-    expect(sanitizeRichText('<p>a</p><b')).toBe('<p>a</p>&lt;b');
-  });
-
-  it('escapes every < that does not become a kept tag', () => {
-    expect(sanitizeRichText('a < b <3 c')).toBe('a &lt; b &lt;3 c');
-    expect(sanitizeRichText('<!DOCTYPE html><?xml version="1.0"?>x')).toBe(
-      '&lt;!DOCTYPE html>&lt;?xml version="1.0"?>x'
-    );
-    expect(sanitizeRichText('</>')).toBe('&lt;/>');
-  });
-
-  it('reads a quoted attribute value holding > as part of the tag', () => {
-    expect(sanitizeRichText('<a href="/x" title="a>b">t</a>')).toBe(
-      '<a href="/x">t</a>'
-    );
-  });
-
-  it('drops an unterminated comment or script to the end', () => {
-    expect(sanitizeRichText('a<!-- b')).toBe('a');
-    expect(sanitizeRichText('<!-->x')).toBe('x');
-    expect(sanitizeRichText('a<script>alert(1)')).toBe('a');
-  });
-});

package/src/utils/sanitize-rich-text.ts

@@ -1,215 +0,0 @@
-const ALLOWED_TAGS = new Set([
-  'p',
-  'div',
-  'br',
-  'h1',
-  'h2',
-  'h3',
-  'h4',
-  'h5',
-  'h6',
-  'ul',
-  'ol',
-  'li',
-  'b',
-  'strong',
-  'i',
-  'em',
-  'u',
-  's',
-  'span',
-  'a'
-]);
-
-const VOID_TAGS = new Set(['br']);
-
-const DROPPED_WITH_CONTENT = new Set([
-  'script',
-  'style',
-  'iframe',
-  'object',
-  'embed',
-  'template',
-  'noscript'
-]);
-
-const ALLOWED_STYLE_PROPERTIES = new Set([
-  'color',
-  'background-color',
-  'font-weight',
-  'font-style',
-  'text-decoration',
-  'text-decoration-line',
-  'text-align'
-]);
-
-const SAFE_HREF = /^(?:https?:\/\/|mailto:|tel:|\/(?!\/)|#|\?)/i;
-
-const ATTRIBUTE_PATTERN =
-  /([a-zA-Z-]+)\s*=\s*(?:"([^"]*)"|'([^']*)'|([^\s"'>]+))/g;
-
-const escapeAttribute = (value: string): string =>
-  value
-    .replace(/&/g, '&')
-    .replace(/"/g, '"')
-    .replace(/</g, '&lt;')
-    .replace(/>/g, '&gt;');
-
-const readAttributes = (raw: string): Record<string, string> => {
-  const attributes: Record<string, string> = {};
-  let match = ATTRIBUTE_PATTERN.exec(raw);
-  while (match) {
-    attributes[match[1].toLowerCase()] = match[2] ?? match[3] ?? match[4] ?? '';
-    match = ATTRIBUTE_PATTERN.exec(raw);
-  }
-  ATTRIBUTE_PATTERN.lastIndex = 0;
-  return attributes;
-};
-
-const safeStyle = (value: string): string =>
-  value
-    .split(';')
-    .map((declaration) => declaration.trim())
-    .filter(Boolean)
-    .map((declaration) => {
-      const colon = declaration.indexOf(':');
-      if (colon === -1) return null;
-      const property = declaration.slice(0, colon).trim().toLowerCase();
-      const propertyValue = declaration.slice(colon + 1).trim();
-      if (!ALLOWED_STYLE_PROPERTIES.has(property)) return null;
-      if (/url\(|expression\(|javascript:|\\/i.test(propertyValue)) return null;
-      return `${property}: ${propertyValue}`;
-    })
-    .filter((declaration): declaration is string => declaration !== null)
-    .join('; ');
-
-const openingTag = (name: string, raw: string): string => {
-  const attributes = readAttributes(raw);
-  const kept: string[] = [];
-
-  if (name === 'a') {
-    const href = attributes.href?.trim() ?? '';
-    if (href && SAFE_HREF.test(href)) {
-      kept.push(`href="${escapeAttribute(href)}"`);
-      if (attributes.target === '_blank') {
-        kept.push('target="_blank"', 'rel="noopener noreferrer"');
-      }
-    }
-  }
-
-  const style = attributes.style ? safeStyle(attributes.style) : '';
-  if (style) kept.push(`style="${escapeAttribute(style)}"`);
-
-  const suffix = kept.length ? ` ${kept.join(' ')}` : '';
-  return VOID_TAGS.has(name) ? `<${name}${suffix} />` : `<${name}${suffix}>`;
-};
-
-/**
- * One tag, read the way the HTML tokenizer reads it: the name runs up to
- * whitespace, `/` or `>` (so `x_y`, `svg/onload` and friends are names, not
- * text), attribute values may be quoted and may hold `>`, and the tag closes
- * at the first unquoted `>`.
- *
- * `null` when the input ends inside the tag. The browser would keep reading
- * into whatever markup follows — on the server that is React's own closing
- * tag — so an unfinished tag is never passed on; the caller escapes its `<`.
- */
-interface TagToken {
-  name: string;
-  attributes: string;
-  closing: boolean;
-  end: number;
-}
-
-const isAsciiLetter = (char: string): boolean => /^[A-Za-z]$/.test(char);
-const endsTagName = (char: string): boolean => /^[\s/>]$/.test(char);
-
-const readTag = (html: string, start: number): TagToken | null => {
-  let index = start + 1;
-  const closing = html.charAt(index) === '/';
-  if (closing) index += 1;
-
-  if (!isAsciiLetter(html.charAt(index))) return null;
-  const nameStart = index;
-  while (index < html.length && !endsTagName(html.charAt(index))) index += 1;
-  const name = html.slice(nameStart, index).toLowerCase();
-
-  const attributesStart = index;
-  let quote: string | null = null;
-  while (index < html.length) {
-    const char = html.charAt(index);
-    if (quote) {
-      if (char === quote) quote = null;
-    } else if (char === '"' || char === "'") {
-      quote = char;
-    } else if (char === '>') {
-      return {
-        name,
-        attributes: html.slice(attributesStart, index),
-        closing,
-        end: index + 1
-      };
-    }
-    index += 1;
-  }
-
-  return null;
-};
-
-/**
- * The output holds no `<` this function did not write itself: every `<` in
- * the input either becomes a rebuilt, allowlisted tag with escaped attribute
- * values, or `&lt;`. Comments are dropped, the content of script-like
- * elements with them. Text and entities are otherwise left as written, so the
- * editor's `&nbsp;` and the message placeholders survive.
- */
-export const sanitizeRichText = (html: string): string => {
-  if (!html) return '';
-
-  const output: string[] = [];
-  let dropUntil: string | null = null;
-  let position = 0;
-
-  const emit = (text: string) => {
-    if (!dropUntil && text) output.push(text);
-  };
-
-  while (position < html.length) {
-    const lt = html.indexOf('<', position);
-    if (lt === -1) {
-      emit(html.slice(position));
-      break;
-    }
-    emit(html.slice(position, lt));
-
-    if (html.startsWith('<!--', lt)) {
-      const end = html.indexOf('-->', lt + 2);
-      position = end === -1 ? html.length : end + 3;
-      continue;
-    }
-
-    const tag = readTag(html, lt);
-    if (!tag) {
-      emit('&lt;');
-      position = lt + 1;
-      continue;
-    }
-    position = tag.end;
-
-    if (dropUntil) {
-      if (tag.closing && tag.name === dropUntil) dropUntil = null;
-    } else if (DROPPED_WITH_CONTENT.has(tag.name)) {
-      if (!tag.closing) dropUntil = tag.name;
-    } else if (ALLOWED_TAGS.has(tag.name)) {
-      output.push(
-        tag.closing
-          ? VOID_TAGS.has(tag.name)
-            ? ''
-            : `</${tag.name}>`
-          : openingTag(tag.name, tag.attributes)
-      );
-    }
-  }
-
-  return output.join('');
-};