Skip to content

SVG Support #10

@Aymkdn

Description

@Aymkdn

For people who would like to add svg support, you need to add it in lower case, as well as path, to the white list.

A better solution is to change makeSanitizedCopy to get an upper case version of the tag name, and in that case we can use SVG and PATH:

function makeSanitizedCopy(node) {
  let newNode, nodeTagName = (node.tagName||"").toUpperCase();

  if (node.nodeType == Node.TEXT_NODE) {
    newNode = node.cloneNode(true);
  } else if (node.nodeType == Node.ELEMENT_NODE && (tagWhitelist_[nodeTagName] || contentTagWhiteList_[nodeTagName])) {
    //remove useless empty spans (lots of those when pasting from MS Outlook)
    if ((nodeTagName == "SPAN" || nodeTagName == "B" || nodeTagName == "I" || nodeTagName == "U")
      && node.innerHTML.trim() == "") {
      return document.createDocumentFragment();
    }

    if (contentTagWhiteList_[nodeTagName])
      newNode = iframedoc.createElement('DIV'); //convert to DIV
    else
      newNode = iframedoc.createElement(nodeTagName);

    for (let i = 0; i < node.attributes.length; i++) {
      let attr = node.attributes[i];
      if (attributeWhitelist_[attr.name]) {
        if (attr.name == "style") {
          for (let s = 0; s < node.style.length; s++) {
            let styleName = node.style[s];
            if (cssWhitelist_[styleName])
              newNode.style.setProperty(styleName, node.style.getPropertyValue(styleName));
          }
        }
        else {
          if (uriAttributes_[attr.name]) { //if this is a "uri" attribute, that can have "javascript:" or something
            if (attr.value.indexOf(":") > -1 && !startsWithAny(attr.value, schemaWhiteList_))
              continue;
          }
          newNode.setAttribute(attr.name, attr.value);
        }
      }
    }
    for (let i = 0; i < node.childNodes.length; i++) {
      let subCopy = makeSanitizedCopy(node.childNodes[i]);
      newNode.appendChild(subCopy, false);
    }
  } else {
    newNode = document.createDocumentFragment();
  }
  return newNode;
}

Don't forget to also add the attributes (like xmlns, viewbox, d, fill, …)

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions