CVE-2022-21802 (TypeScript, published 2022-07-25T14:15Z)
Description: value: The package grapesjs before 0.19.5 are vulnerable to Cross-site Scripting (XSS) due to an improper sanitization of the class name in Selector Manager.
Severity: nan (CVSS v3 base score: 6.1)
Weakness: CWE-79 \u2014 Improper Neutralization of Input During Web Page Generation ('Cross-site Scripting')
The product does not neutralize or incorrectly neutralizes user-controllable input before it is placed in output that is used as a web page that is served to other users.
Repository: https://github.com/artf/grapesjs
Files changed:
src/selector_manager/view/ClassTagView.ts
src/selector_manager/view/ClassTagsView.ts
Commit message: Protect Selector Manager views from XSS. Closes #4411


Vulnerable code:
    return `
      <span id="${pfx}close" class="${pfx}tag-close" data-tag-remove>
        ${config.iconTagRemove}
      </span>
    return `
    <div id="${pfx}up" class="${pfx}header">
      <div id="${pfx}label" class="${pfx}header-label">${labelHead}</div>
      <div id="${pfx}status-c" class="${pfx}header-status">
        <span id="${pfx}input-c" data-states-c>
          <div class="${ppfx}field ${ppfx}select">
            <span id="${ppfx}input-holder">
              <select id="${pfx}states" data-states></select>
            </span>
            <div class="${ppfx}sel-arrow">
              <div class="${ppfx}d-s-arrow"></div>
          </div>
        </span>
    </div>
    <div id="${pfx}tags-field" class="${ppfx}field">
      <div id="${pfx}tags-c" data-selectors></div>
      <input id="${pfx}new" data-input/>
      <span id="${pfx}add-tag" class="${pfx}tags-btn ${pfx}tags-btn__add" data-add>
        ${iconAdd}
      </span>
      <span class="${pfx}tags-btn ${pfx}tags-btn__sync" style="display: none" data-sync-style>
        ${iconSync}
      </span>
    </div>
    <div class="${pfx}sels-info">
      <div class="${pfx}label-sel">${labelInfo}:</div>
      <div class="${pfx}sels" data-selected></div>
    </div>`;

Fixed code:
import html from '../../utils/html';
    return html`
      <span id="${pfx}close" class="${pfx}tag-close" data-tag-remove> $${config.iconTagRemove} </span>
    return html` <div id="${pfx}up" class="${pfx}header">
        <div id="${pfx}label" class="${pfx}header-label">${labelHead}</div>
        <div id="${pfx}status-c" class="${pfx}header-status">
          <span id="${pfx}input-c" data-states-c>
            <div class="${ppfx}field ${ppfx}select">
              <span id="${ppfx}input-holder">
                <select id="${pfx}states" data-states></select>
              </span>
              <div class="${ppfx}sel-arrow">
                <div class="${ppfx}d-s-arrow"></div>
              </div>
          </span>
        </div>
      <div id="${pfx}tags-field" class="${ppfx}field">
        <div id="${pfx}tags-c" data-selectors></div>
        <input id="${pfx}new" data-input />
        <span id="${pfx}add-tag" class="${pfx}tags-btn ${pfx}tags-btn__add" data-add> $${iconAdd} </span>
        <span class="${pfx}tags-btn ${pfx}tags-btn__sync" style="display: none" data-sync-style> $${iconSync} </span>
      </div>
      <div class="${pfx}sels-info">
        <div class="${pfx}label-sel">${labelInfo}:</div>
        <div class="${pfx}sels" data-selected></div>
      </div>`;