Merge 8a04a09a6804b49e9d7867ff9991aeb8342c5bd1 into c3695765ad8b3e46b4dcc89496a2daa331215a81

core/modules/config.js

@@ -38,4 +38,16 @@ exports.htmlBlockElements = "address,article,aside,audio,blockquote,canvas,dd,de
 
 exports.htmlUnsafeElements = "script".split(",");
 
+// Custom Web Components: https://html.spec.whatwg.org/#valid-custom-element-name
+exports.htmlForbiddenTags = "annotation-xml,color-profile,font-face,font-face-src,font-face-uri,font-face-format,font-face-name,missing-glyph".split(",");
+
+// (EBNF notation) - PotentialCustomElementName ::= [a-z] (PCENChar)* '-' (PCENChar)*
+// Unicode table with ranges see: https://symbl.cc/en/unicode-table
+exports.htmlCustomPrimitives = {
+	prefix: "[a-z]",
+	validPCENChar: ".|[0-9]|_|[a-z]|\xB7|[\xC0-\xD6]|[\xD8-\xF6]|[\u00F8-\u037D]|[\u037F-\u1FFF]|[\u200C-\u200D]|[\u203F-\u2040]|[\u2070-\u218F]|[\u2C00-\u2FEF]|[\u3001-\uD7FF]|[\uF900-\uFDCF]|[\uFDF0-\uFFFD]",
+	sanitizePCENChar: "[\x00-\x2C]|\x2F|[\x3A-\x40]|[\x5B-\x60]|[\x7B-\xB6]|[\xB8-\xBF]|\xD7|\xF7|\x37E|[\u2000\u200B]|[\u200E-\u203E]|[\u2041-\u206F]|[\u2190-\u2BFF]|[\u2FF0-\u3000]|[\uD800-\uF8FF]|[\uFDD0-\uFDEF]|[\uFFFE-\uFFFF]"
+	};
+exports.htmlCustomPrimitives.nonValidPCENChar = "[A-Z]|" + exports.htmlCustomPrimitives.sanitizePCENChar;
+
 })();

core/modules/editor/engines/framed.js

@@ -48,10 +48,7 @@ function FramedEngine(options) {
 	this.iframeDoc.body.style.padding = "0";
 	this.widget.domNodes.push(this.iframeNode);
 	// Construct the textarea or input node
-	var tag = this.widget.editTag;
-	if($tw.config.htmlUnsafeElements.indexOf(tag) !== -1) {
-		tag = "input";
-	}
+	var tag = $tw.utils.makeTagNameSafe(this.widget.editTag,"input");
 	this.domNode = this.iframeDoc.createElement(tag);
 	// Set the text
 	if(this.widget.editTag === "textarea") {
@@ -200,7 +197,7 @@ FramedEngine.prototype.handleFocusEvent = function(event) {
 Handle a keydown event
  */
 FramedEngine.prototype.handleKeydownEvent = function(event) {
-	if ($tw.keyboardManager.handleKeydownEvent(event, {onlyPriority: true})) {
+	if($tw.keyboardManager.handleKeydownEvent(event, {onlyPriority: true})) {
 		return true;
 	}
 

core/modules/editor/engines/simple.js

@@ -22,10 +22,7 @@ function SimpleEngine(options) {
 	this.parentNode = options.parentNode;
 	this.nextSibling = options.nextSibling;
 	// Construct the textarea or input node
-	var tag = this.widget.editTag;
-	if($tw.config.htmlUnsafeElements.indexOf(tag) !== -1) {
-		tag = "input";
-	}
+	var tag = $tw.utils.makeTagNameSafe(this.widget.editTag,"input");
 	this.domNode = this.widget.document.createElement(tag);
 	// Set the text
 	if(this.widget.editTag === "textarea") {

core/modules/utils/dom/dom.js

@@ -316,8 +316,8 @@ Collect DOM variables
 */
 exports.collectDOMVariables = function(selectedNode,domNode,event) {
 	var variables = {},
-	    selectedNodeRect,
-	    domNodeRect;
+		selectedNodeRect,
+		domNodeRect;
 	if(selectedNode) {
 		$tw.utils.each(selectedNode.attributes,function(attribute) {
 			variables["dom-" + attribute.name] = attribute.value.toString();
@@ -376,7 +376,7 @@ exports.collectDOMVariables = function(selectedNode,domNode,event) {
 };
 
 /*
-Make sure the CSS selector is not invalid
+Make sure the CSS selector is valid
 */
 exports.querySelectorSafe = function(selector,baseElement) {
 	baseElement = baseElement || document;
@@ -396,4 +396,45 @@ exports.querySelectorAllSafe = function(selector,baseElement) {
 	}
 };
 
+/*
+Sanitize HTML tag- and custom web component names
+	1. Check the string, if it is a valid html tag - using this spec: https://html.spec.whatwg.org/#syntax-tag-name
+		1.1 Tag names are "case insensitive"
+    2. Extend 1. and allow hyphens: "-"
+		2.1 Browsers allow "AA-AA", so do we. Be aware there may be styling problems
+
+	3. Sanitize input parameters - spec: https://html.spec.whatwg.org/#valid-custom-element-name
+    4. Implement a forbidden list: exports.htmlForbiddenTags - see: $:/core/modules/config.js
+    5. Check function parameters for invalid character ranges up to \uFFFF. This detects problems in a range JS RegExp can handle
+    6. We assume that everything out of js RegExp-range is valid, which is OK for \u10000-\uEFFFF according to the spec
+
+	Unicode overview: https://symbl.cc/en/unicode-table/
+*/
+exports.makeTagNameSafe = function(tag,defaultTag) {
+	// Custom web-components need to be "lowercase()"
+	var regxSanitizeChars = new RegExp($tw.config.htmlCustomPrimitives.sanitizePCENChar,"mg");
+	// Sanitize inputs to make the logic simple
+	defaultTag = (defaultTag) ? defaultTag.replace(regxSanitizeChars,"") : "SPAN";
+	tag = (tag) ? tag.replace(regxSanitizeChars,"") : defaultTag;
+
+	// RegExp for valid standard HTML element, extended including hyphen "-"
+	var regexStandardChars = /(?:[a-z]|[A-Z]|[0-9]|-)+/g,
+		result = "";
+
+	// Check if tag matches standard HTML spec
+	if(tag.match(regexStandardChars)[0] === tag) {
+		result = tag;
+	}
+	// Check for unsafe tag and unsafe defaultTag
+	if($tw.config.htmlUnsafeElements.indexOf(result.toLowerCase()) !== -1) {
+		result = ($tw.config.htmlUnsafeElements.indexOf(defaultTag.toLowerCase()) !== -1) ? "safe-" + defaultTag : defaultTag;
+	}
+	// Check for forbidden tag names according to spec and log info to help users
+	if($tw.config.htmlForbiddenTags.indexOf(result.toLowerCase()) >= 0) {
+		console.log("Forbidden custom element:\"" + result.toLowerCase() + "\" See: https://html.spec.whatwg.org/#valid-custom-element-name")
+		result = "safe-" + result;
+	}
+	return result;
+};
+
 })();

core/modules/widgets/button.js

@@ -38,9 +38,7 @@ ButtonWidget.prototype.render = function(parent,nextSibling) {
 	this.computeAttributes();
 	this.execute();
 	// Create element
-	if(this.buttonTag && $tw.config.htmlUnsafeElements.indexOf(this.buttonTag) === -1) {
-		tag = this.buttonTag;
-	}
+	tag = $tw.utils.makeTagNameSafe(this.buttonTag,tag)
 	domNode = this.document.createElement(tag);
 	this.domNode = domNode;
 	// Assign classes
@@ -74,7 +72,7 @@ ButtonWidget.prototype.render = function(parent,nextSibling) {
 	if(this["aria-label"]) {
 		domNode.setAttribute("aria-label",this["aria-label"]);
 	}
-	if (this.role) {
+	if(this.role) {
 		domNode.setAttribute("role", this.role);
 	}
 	if(this.popup || this.popupTitle) {

core/modules/widgets/draggable.js

@@ -38,10 +38,7 @@ DraggableWidget.prototype.render = function(parent,nextSibling) {
 	// Execute our logic
 	this.execute();
 	// Sanitise the specified tag
-	tag = this.draggableTag;
-	if($tw.config.htmlUnsafeElements.indexOf(tag) !== -1) {
-		tag = "div";
-	}
+	tag = $tw.utils.makeTagNameSafe(this.draggableTag,"div");
 	// Create our element
 	domNode = this.document.createElement(tag);
 	// Assign classes

core/modules/widgets/droppable.js

@@ -35,9 +35,7 @@ DroppableWidget.prototype.render = function(parent,nextSibling) {
 	// Compute attributes and execute state
 	this.computeAttributes();
 	this.execute();
-	if(this.droppableTag && $tw.config.htmlUnsafeElements.indexOf(this.droppableTag) === -1) {
-		tag = this.droppableTag;
-	}
+	tag = $tw.utils.makeTagNameSafe(this.droppableTag,tag);
 	// Create element and assign classes
 	domNode = this.document.createElement(tag);
 	this.domNode = domNode;

core/modules/widgets/element.js

@@ -29,15 +29,10 @@ Render this widget into the DOM
 ElementWidget.prototype.render = function(parent,nextSibling) {
 	this.parentDomNode = parent;
 	this.computeAttributes();
-	// Neuter blacklisted elements
+	// Eliminate blacklisted elements
 	this.tag = this.parseTreeNode.tag;
-	if($tw.config.htmlUnsafeElements.indexOf(this.tag) !== -1) {
-		this.tag = "safe-" + this.tag;
-	}
-	// Restrict tag name to digits, letts and dashes
-	this.tag = this.tag.replace(/[^0-9a-zA-Z\-]/mg,"");
-	// Default to a span
-	this.tag = this.tag || "span";
+	// Sanitize tag name if needed according to Custom Web-Componenets spec
+	this.tag = $tw.utils.makeTagNameSafe(this.tag, "safe-" + this.tag);
 	// Adjust headings by the current base level
 	var headingLevel = ["h1","h2","h3","h4","h5","h6"].indexOf(this.tag);
 	if(headingLevel !== -1) {

core/modules/widgets/eventcatcher.js

@@ -35,9 +35,7 @@ EventWidget.prototype.render = function(parent,nextSibling) {
 	this.execute();
 	// Create element
 	var tag = this.parseTreeNode.isBlock ? "div" : "span";
-	if(this.elementTag && $tw.config.htmlUnsafeElements.indexOf(this.elementTag) === -1) {
-		tag = this.elementTag;
-	}
+	tag = $tw.utils.makeTagNameSafe(this.elementTag,tag)
 	var domNode = this.document.createElement(tag);
 	this.domNode = domNode;
 	// Assign classes

core/modules/widgets/keyboard.js

@@ -34,9 +34,7 @@ KeyboardWidget.prototype.render = function(parent,nextSibling) {
 	this.computeAttributes();
 	this.execute();
 	var tag = this.parseTreeNode.isBlock ? "div" : "span";
-	if(this.tag && $tw.config.htmlUnsafeElements.indexOf(this.tag) === -1) {
-		tag = this.tag;
-	}
+	tag = $tw.utils.makeTagNameSafe(this.tag,tag);
 	// Create element
 	var domNode = this.document.createElement(tag);
 	// Assign classes
@@ -53,7 +51,7 @@ KeyboardWidget.prototype.render = function(parent,nextSibling) {
 };
 
 KeyboardWidget.prototype.handleChangeEvent = function(event) {
-	if ($tw.keyboardManager.handleKeydownEvent(event, {onlyPriority: true})) {
+	if($tw.keyboardManager.handleKeydownEvent(event, {onlyPriority: true})) {
 		return true;
 	}
 

core/modules/widgets/link.js

@@ -61,9 +61,7 @@ LinkWidget.prototype.renderLink = function(parent,nextSibling) {
 	var self = this;
 	// Sanitise the specified tag
 	var tag = this.linkTag;
-	if($tw.config.htmlUnsafeElements.indexOf(tag) !== -1) {
-		tag = "a";
-	}
+	tag = $tw.utils.makeTagNameSafe(tag,"a");
 	// Create our element
 	var namespace = this.getVariable("namespace",{defaultValue: "http://www.w3.org/1999/xhtml"}),
 		domNode = this.document.createElementNS(namespace,tag);

core/modules/widgets/reveal.js

@@ -33,9 +33,7 @@ RevealWidget.prototype.render = function(parent,nextSibling) {
 	this.computeAttributes();
 	this.execute();
 	var tag = this.parseTreeNode.isBlock ? "div" : "span";
-	if(this.revealTag && $tw.config.htmlUnsafeElements.indexOf(this.revealTag) === -1) {
-		tag = this.revealTag;
-	}
+	tag = $tw.utils.makeTagNameSafe(this.revealTag,tag);
 	var domNode = this.document.createElement(tag);
 	this.domNode = domNode;
 	this.assignDomNodeClasses();
@@ -96,9 +94,9 @@ RevealWidget.prototype.positionPopup = function(domNode) {
 		left = Math.max(0,left);
 		top = Math.max(0,top);
 	}
-	if (this.popup.absolute) {
+	if(this.popup.absolute) {
 		// Traverse the offsetParent chain and correct the offset to make it relative to the parent node.
-		for (var offsetParentDomNode = domNode.offsetParent; offsetParentDomNode; offsetParentDomNode = offsetParentDomNode.offsetParent) {
+		for(var offsetParentDomNode = domNode.offsetParent; offsetParentDomNode; offsetParentDomNode = offsetParentDomNode.offsetParent) {
 			left -= offsetParentDomNode.offsetLeft;
 			top -= offsetParentDomNode.offsetTop;
 		}