Ma/ueblueprint
1
0
Fork 0
mirror of https://github.com/barsdeveloper/ueblueprint.git synced 2026-02-03 23:55:04 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

Protect against script injection

Browse Source
This commit is contained in:
barsdeveloper
2021-12-16 22:57:47 +01:00
parent 43439bbcd3
commit 8f0893447e
14 changed files with 178 additions and 107 deletions
Download Patch File Download Diff File Expand all files Collapse all files

187
dist/ueblueprint.js vendored
View File

@@ -1,38 +1,3 @@
const html = String.raw;
const div = document.createElement("div");
function sanitizeText(value) {
div.textContent = value;
value = div.textContent;
div.innerHTML = "";
return value
}
/**
* @typedef {import("../graph/GraphElement").default} GraphElement
*/
class Template {
/**
* Computes the html content of the target element.
* @param {GraphElement} entity Element of the graph
* @returns The result html
*/
render(entity) {
return ""
}
/**
* Applies the style to the element.
* @param {GraphElement} element Element of the graph
*/
apply(element) {
// TODO replace with the safer element.setHTML(...) when it will be available
element.innerHTML = this.render(element);
}
}
class OrderedIndexArray {
/**
@@ -359,6 +324,47 @@ class GraphElement extends HTMLElement {
}
}
document.createElement("div");
const tagReplacement = {
'&': '&',
'<': '&lt;',
'>': '&gt;',
"'": '&#39;',
'"': '&quot;'
};
function sanitizeText(value) {
if (value.constructor === String) {
return value.replace(/[&<>'"]/g, tag => tagReplacement[tag])
}
return value
}
/**
* @typedef {import("../graph/GraphElement").default} GraphElement
*/
class Template {
/**
* Computes the html content of the target element.
* @param {GraphElement} entity Element of the graph
* @returns The result html
*/
render(entity) {
return ""
}
/**
* Applies the style to the element.
* @param {GraphElement} element Element of the graph
*/
apply(element) {
// TODO replace with the safer element.setHTML(...) when it will be available
element.innerHTML = this.render(element);
}
}
/**
* @typedef {import("../graph/GraphSelector").default} GraphSelector
*/
@@ -380,11 +386,11 @@ class SelectorTemplate extends Template {
*/
applyStartSelecting(selector, initialPosition) {
// Set initial position
selector.style.setProperty("--ueb-select-from-x", initialPosition[0]);
selector.style.setProperty("--ueb-select-from-y", initialPosition[1]);
selector.style.setProperty("--ueb-select-from-x", sanitizeText(initialPosition[0]));
selector.style.setProperty("--ueb-select-from-y", sanitizeText(initialPosition[1]));
// Final position coincide with the initial position, at the beginning of selection
selector.style.setProperty("--ueb-select-to-x", initialPosition[0]);
selector.style.setProperty("--ueb-select-to-y", initialPosition[1]);
selector.style.setProperty("--ueb-select-to-x", sanitizeText(initialPosition[0]));
selector.style.setProperty("--ueb-select-to-y", sanitizeText(initialPosition[1]));
selector.dataset.selecting = "true";
}
@@ -393,8 +399,8 @@ class SelectorTemplate extends Template {
* @param {GraphSelector} selector Selector element
*/
applyDoSelecting(selector, finalPosition) {
selector.style.setProperty("--ueb-select-to-x", finalPosition[0]);
selector.style.setProperty("--ueb-select-to-y", finalPosition[1]);
selector.style.setProperty("--ueb-select-to-x", sanitizeText(finalPosition[0]));
selector.style.setProperty("--ueb-select-to-y", sanitizeText(finalPosition[1]));
}
/**
@@ -443,6 +449,8 @@ class GraphSelector extends GraphElement {
customElements.define("ueb-selector", GraphSelector);
const html = String.raw;
/** @typedef {import("../Blueprint").default} Blueprint */
class BlueprintTemplate extends Template {
header(element) {
@@ -515,7 +523,7 @@ class BlueprintTemplate extends Template {
*/
applyZoom(blueprint, newZoom) {
blueprint.classList.remove(`ueb-zoom-${blueprint.zoom}`);
blueprint.classList.add(`ueb-zoom-${newZoom}`);
blueprint.classList.add(sanitizeText`ueb-zoom-${newZoom}`);
}
/**
@@ -523,8 +531,8 @@ class BlueprintTemplate extends Template {
* @param {Blueprint} brueprint The blueprint element
*/
applyExpand(blueprint) {
blueprint.gridElement.style.setProperty("--ueb-additional-x", blueprint.additional[0]);
blueprint.gridElement.style.setProperty("--ueb-additional-y", blueprint.additional[1]);
blueprint.gridElement.style.setProperty("--ueb-additional-x", sanitizeText(blueprint.additional[0]));
blueprint.gridElement.style.setProperty("--ueb-additional-y", sanitizeText(blueprint.additional[1]));
}
/**
@@ -532,8 +540,8 @@ class BlueprintTemplate extends Template {
* @param {Blueprint} brueprint The blueprint element
*/
applyTranlate(blueprint) {
blueprint.gridElement.style.setProperty("--ueb-translate-x", blueprint.translateValue[0]);
blueprint.gridElement.style.setProperty("--ueb-translate-y", blueprint.translateValue[1]);
blueprint.gridElement.style.setProperty("--ueb-translate-x", sanitizeText(blueprint.translateValue[0]));
blueprint.gridElement.style.setProperty("--ueb-translate-y", sanitizeText(blueprint.translateValue[1]));
}
}
@@ -1461,6 +1469,16 @@ class KeyboardShortcut extends Context {
};
}
/**
*
* @param {String} keyString
* @returns {Object}
*/
static keyOptionsParse(options, keyString) {
options.key = keyString;
return options
}
blueprintFocused() {
document.addEventListener("keydown", this.keyDownHandler);
}
@@ -1473,10 +1491,21 @@ class KeyboardShortcut extends Context {
}
}
class Configuration {
static deleteNodesKeyboardKey = "Delete"
}
class KeyvoardCanc extends KeyboardShortcut {
/**
*
* @param {HTMLElement} target
* @param {import("../Blueprint").default} blueprint
* @param {OBject} options
*/
constructor(target, blueprint, options = {}) {
options.key = "Delete";
options = KeyboardShortcut.keyOptionsParse(options, Configuration.deleteNodesKeyboardKey);
super(target, blueprint, options);
}
@@ -1506,33 +1535,6 @@ class MouseTracking extends Pointing {
}
}
/**
* @typedef {import("../graph/SelectableDraggable").default} SelectableDraggable
*/
class SelectableDraggableTemplate extends Template {
/**
* Returns the html elements rendered from this template.
* @param {SelectableDraggable} element Element of the graph
*/
applyLocation(element) {
element.style.setProperty("--ueb-position-x", element.location[0]);
element.style.setProperty("--ueb-position-y", element.location[1]);
}
/**
* Returns the html elements rendered from this template.
* @param {SelectableDraggable} element Element of the graph
*/
applySelected(element) {
if (element.selected) {
element.classList.add("ueb-selected");
} else {
element.classList.remove("ueb-selected");
}
}
}
/**
* @typedef {import("../graph/GraphPin").default} GraphPin
*/
@@ -1563,7 +1565,7 @@ class PinTemplate extends Template {
*/
apply(pin) {
super.apply(pin);
pin.classList.add("ueb-node-" + pin.isInput() ? "input" : "output", "ueb-node-value-" + pin.getType());
pin.classList.add("ueb-node-" + pin.isInput() ? "input" : "output", "ueb-node-value-" + sanitizeText(pin.getType()));
}
}
@@ -1610,6 +1612,33 @@ class GraphPin extends GraphElement {
customElements.define("ueb-pin", GraphPin);
/**
* @typedef {import("../graph/SelectableDraggable").default} SelectableDraggable
*/
class SelectableDraggableTemplate extends Template {
/**
* Returns the html elements rendered from this template.
* @param {SelectableDraggable} element Element of the graph
*/
applyLocation(element) {
element.style.setProperty("--ueb-position-x", sanitizeText(element.location[0]));
element.style.setProperty("--ueb-position-y", sanitizeText(element.location[1]));
}
/**
* Returns the html elements rendered from this template.
* @param {SelectableDraggable} element Element of the graph
*/
applySelected(element) {
if (element.selected) {
element.classList.add("ueb-selected");
} else {
element.classList.remove("ueb-selected");
}
}
}
/**
* @typedef {import("../graph/GraphNode").default} GraphNode
*/
@@ -1650,7 +1679,7 @@ class NodeTemplate extends SelectableDraggableTemplate {
<div class="ueb-node-header">
<span class="ueb-node-name">
<span class="ueb-node-symbol"></span>
<span class="ueb-node-text">${node.entity.getNodeDisplayName()}</span>
<span class="ueb-node-text">${sanitizeText(node.entity.getNodeDisplayName())}</span>
</span>
</div>
<div class="ueb-node-body">
@@ -1671,8 +1700,8 @@ class NodeTemplate extends SelectableDraggableTemplate {
if (node.selected) {
node.classList.add("ueb-selected");
}
node.style.setProperty("--ueb-position-x", node.location[0]);
node.style.setProperty("--ueb-position-y", node.location[1]);
node.style.setProperty("--ueb-position-x", sanitizeText(node.location[0]));
node.style.setProperty("--ueb-position-y", sanitizeText(node.location[1]));
/** @type {HTMLElement} */
let inputContainer = node.querySelector(".ueb-node-inputs");
/** @type {HTMLElement} */
@@ -2478,4 +2507,4 @@ function initializeSerializerFactory() {
initializeSerializerFactory();
export { Blueprint, GraphLink, GraphNode };
export { Blueprint, Configuration, GraphLink, GraphNode };

3
index.html
View File

@@ -14,7 +14,8 @@
<body>
<div>Hello</div>
<script type="module">
import { Blueprint, GraphNode } from "./dist/ueblueprint.js"
import { Blueprint, GraphNode, Configuration } from "./dist/ueblueprint.js"
Configuration.deleteNodesKeyboardKey = "Delete"
let node1 = GraphNode.fromSerializedObject(`Begin Object Class=/Script/BlueprintGraph.K2Node_CommutativeAssociativeBinaryOperator Name="K2Node_CommutativeAssociativeBinaryOperator_1"
bIsPureFunc=True
FunctionReference=(MemberParent=Class'"/Script/Engine.KismetStringLibrary"',MemberName="Concat_StrStr")

4
js/Configuration.js Normal file
View File

@@ -0,0 +1,4 @@
export default class Configuration {
static deleteNodesKeyboardKey = "Delete"
}

8
js/action/Actions.js Normal file
View File

@@ -0,0 +1,8 @@
export default class Action {
apply() {
}
revert() {
}
}

3
js/export.js
View File

@@ -1,4 +1,5 @@
import Blueprint from "./Blueprint"
import Configuration from "./Configuration"
import GraphLink from "./graph/GraphLink"
import GraphNode from "./graph/GraphNode"
@@ -6,4 +7,4 @@ import initializeSerializerFactory from "./serialization/initializeSerializerFac
initializeSerializerFactory()
export { Blueprint as Blueprint, GraphNode as GraphNode, GraphLink as GraphLink }
export { Blueprint as Blueprint, GraphNode as GraphNode, GraphLink as GraphLink, Configuration as Configuration }

11
js/input/KeyboardCanc.js
View File

@@ -1,10 +1,17 @@
import KeyboardShortcut from "./KeyboardShortcut";
import KeyboardShortcut from "./KeyboardShortcut"
import Configuration from "../Configuration"
export default class KeyvoardCanc extends KeyboardShortcut {
/**
*
* @param {HTMLElement} target
* @param {import("../Blueprint").default} blueprint
* @param {OBject} options
*/
constructor(target, blueprint, options = {}) {
options.key = "Delete"
options = KeyboardShortcut.keyOptionsParse(options, Configuration.deleteNodesKeyboardKey)
super(target, blueprint, options)
}

10
js/input/KeyboardShortcut.js
View File

@@ -27,6 +27,16 @@ export default class KeyboardShortcut extends Context {
}
}
/**
*
* @param {String} keyString
* @returns {Object}
*/
static keyOptionsParse(options, keyString) {
options.key = keyString
return options
}
blueprintFocused() {
document.addEventListener("keydown", this.keyDownHandler)
}

2
js/serialization/Grammar.js
View File

@@ -5,10 +5,10 @@ import LocalizedTextEntity from "../entity/LocalizedTextEntity"
import ObjectEntity from "../entity/ObjectEntity"
import ObjectReferenceEntity from "../entity/ObjectReferenceEntity"
import Parsimmon from "parsimmon"
import PathSymbolEntity from "../entity/PathSymbolEntity"
import PinEntity from "../entity/PinEntity"
import PinReferenceEntity from "../entity/PinReferenceEntity"
import Utility from "../Utility"
import PathSymbolEntity from "../entity/PathSymbolEntity"
let P = Parsimmon

12
js/template/BlueprintTemplate.js
View File

@@ -1,7 +1,7 @@
import GraphSelector from "../graph/GraphSelector"
import html from "./html"
import sanitizeText from "./sanitizeText"
import Template from "./Template"
import GraphSelector from "../graph/GraphSelector"
/** @typedef {import("../Blueprint").default} Blueprint */
export default class BlueprintTemplate extends Template {
@@ -75,7 +75,7 @@ export default class BlueprintTemplate extends Template {
*/
applyZoom(blueprint, newZoom) {
blueprint.classList.remove(`ueb-zoom-${blueprint.zoom}`)
blueprint.classList.add(`ueb-zoom-${newZoom}`)
blueprint.classList.add(sanitizeText`ueb-zoom-${newZoom}`)
}
/**
@@ -83,8 +83,8 @@ export default class BlueprintTemplate extends Template {
* @param {Blueprint} brueprint The blueprint element
*/
applyExpand(blueprint) {
blueprint.gridElement.style.setProperty("--ueb-additional-x", blueprint.additional[0])
blueprint.gridElement.style.setProperty("--ueb-additional-y", blueprint.additional[1])
blueprint.gridElement.style.setProperty("--ueb-additional-x", sanitizeText(blueprint.additional[0]))
blueprint.gridElement.style.setProperty("--ueb-additional-y", sanitizeText(blueprint.additional[1]))
}
/**
@@ -92,7 +92,7 @@ export default class BlueprintTemplate extends Template {
* @param {Blueprint} brueprint The blueprint element
*/
applyTranlate(blueprint) {
blueprint.gridElement.style.setProperty("--ueb-translate-x", blueprint.translateValue[0])
blueprint.gridElement.style.setProperty("--ueb-translate-y", blueprint.translateValue[1])
blueprint.gridElement.style.setProperty("--ueb-translate-x", sanitizeText(blueprint.translateValue[0]))
blueprint.gridElement.style.setProperty("--ueb-translate-y", sanitizeText(blueprint.translateValue[1]))
}
}

9
js/template/NodeTemplate.js
View File

@@ -1,7 +1,8 @@
import GraphPin from "../graph/GraphPin"
import html from "./html"
import PinEntity from "../entity/PinEntity"
import sanitizeText from "./sanitizeText"
import SelectableDraggableTemplate from "./SelectableDraggableTemplate"
import GraphPin from "../graph/GraphPin"
/**
* @typedef {import("../graph/GraphNode").default} GraphNode
@@ -43,7 +44,7 @@ export default class NodeTemplate extends SelectableDraggableTemplate {
<div class="ueb-node-header">
<span class="ueb-node-name">
<span class="ueb-node-symbol"></span>
<span class="ueb-node-text">${node.entity.getNodeDisplayName()}</span>
<span class="ueb-node-text">${sanitizeText(node.entity.getNodeDisplayName())}</span>
</span>
</div>
<div class="ueb-node-body">
@@ -64,8 +65,8 @@ export default class NodeTemplate extends SelectableDraggableTemplate {
if (node.selected) {
node.classList.add("ueb-selected")
}
node.style.setProperty("--ueb-position-x", node.location[0])
node.style.setProperty("--ueb-position-y", node.location[1])
node.style.setProperty("--ueb-position-x", sanitizeText(node.location[0]))
node.style.setProperty("--ueb-position-y", sanitizeText(node.location[1]))
/** @type {HTMLElement} */
let inputContainer = node.querySelector(".ueb-node-inputs")
/** @type {HTMLElement} */

3
js/template/PinTemplate.js
View File

@@ -1,4 +1,5 @@
import html from "./html"
import sanitizeText from "./sanitizeText"
import Template from "./Template"
/**
@@ -31,6 +32,6 @@ export default class PinTemplate extends Template {
*/
apply(pin) {
super.apply(pin)
pin.classList.add("ueb-node-" + pin.isInput() ? "input" : "output", "ueb-node-value-" + pin.getType())
pin.classList.add("ueb-node-" + pin.isInput() ? "input" : "output", "ueb-node-value-" + sanitizeText(pin.getType()))
}
}

6
js/template/SelectableDraggableTemplate.js
View File

@@ -1,4 +1,4 @@
import html from "./html"
import sanitizeText from "./sanitizeText"
import Template from "./Template"
/**
@@ -11,8 +11,8 @@ export default class SelectableDraggableTemplate extends Template {
* @param {SelectableDraggable} element Element of the graph
*/
applyLocation(element) {
element.style.setProperty("--ueb-position-x", element.location[0])
element.style.setProperty("--ueb-position-y", element.location[1])
element.style.setProperty("--ueb-position-x", sanitizeText(element.location[0]))
element.style.setProperty("--ueb-position-y", sanitizeText(element.location[1]))
}
/**

13
js/template/SelectorTemplate.js
View File

@@ -1,3 +1,4 @@
import sanitizeText from "./sanitizeText"
import Template from "./Template"
/**
@@ -21,11 +22,11 @@ export default class SelectorTemplate extends Template {
*/
applyStartSelecting(selector, initialPosition) {
// Set initial position
selector.style.setProperty("--ueb-select-from-x", initialPosition[0])
selector.style.setProperty("--ueb-select-from-y", initialPosition[1])
selector.style.setProperty("--ueb-select-from-x", sanitizeText(initialPosition[0]))
selector.style.setProperty("--ueb-select-from-y", sanitizeText(initialPosition[1]))
// Final position coincide with the initial position, at the beginning of selection
selector.style.setProperty("--ueb-select-to-x", initialPosition[0])
selector.style.setProperty("--ueb-select-to-y", initialPosition[1])
selector.style.setProperty("--ueb-select-to-x", sanitizeText(initialPosition[0]))
selector.style.setProperty("--ueb-select-to-y", sanitizeText(initialPosition[1]))
selector.dataset.selecting = "true"
}
@@ -34,8 +35,8 @@ export default class SelectorTemplate extends Template {
* @param {GraphSelector} selector Selector element
*/
applyDoSelecting(selector, finalPosition) {
selector.style.setProperty("--ueb-select-to-x", finalPosition[0])
selector.style.setProperty("--ueb-select-to-y", finalPosition[1])
selector.style.setProperty("--ueb-select-to-x", sanitizeText(finalPosition[0]))
selector.style.setProperty("--ueb-select-to-y", sanitizeText(finalPosition[1]))
}
/**

14
js/template/sanitizeText.js
View File

@@ -1,9 +1,17 @@
const div = document.createElement("div")
const tagReplacement = {
'&': '&amp;',
'<': '&lt;',
'>': '&gt;',
"'": '&#39;',
'"': '&quot;'
}
function sanitizeText(value) {
div.textContent = value
value = div.textContent
div.innerHTML = ""
if (value.constructor === String) {
return value.replace(/[&<>'"]/g, tag => tagReplacement[tag])
}
return value
}