Added Handlebar Sanitization helpers.

package-lock.json

@@ -20,6 +20,7 @@
 				"gulp-sass": "^5.1.0",
 				"gulp-sourcemaps": "^3.0.0",
 				"gulp-uglify": "^3.0.2",
+				"lodash-es": "^4.17.21",
 				"mkdirp": "^1.0.4",
 				"open": "^8.4.0",
 				"sass": "^1.50.1",
@@ -31,16 +32,19 @@
 			},
 			"devDependencies": {
 				"@babel/preset-react": "^7.18.6",
+				"@braintree/sanitize-url": "^6.0.0",
 				"@modular-css/rollup": "^28.2.2",
 				"@rollup/plugin-babel": "^5.3.1",
 				"@rollup/plugin-commonjs": "^22.0.2",
 				"@rollup/plugin-node-resolve": "^13.3.0",
 				"@rollup/plugin-replace": "^4.0.0",
+				"escape-html": "^1.0.3",
 				"react": "^18.2.0",
 				"react-dom": "^18.2.0",
 				"rollup": "^2.77.2",
 				"rollup-plugin-copy": "^3.4.0",
 				"rollup-plugin-jsx": "^1.0.3",
+				"sanitize-html": "^2.7.1",
 				"styled-components": "^5.3.5"
 			}
 		},
@@ -475,6 +479,12 @@
 				"node": ">=6.9.0"
 			}
 		},
+		"node_modules/@braintree/sanitize-url": {
+			"version": "6.0.0",
+			"resolved": "https://registry.npmjs.org/@braintree/sanitize-url/-/sanitize-url-6.0.0.tgz",
+			"integrity": "sha512-mgmE7XBYY/21erpzhexk4Cj1cyTQ9LzvnTxtzM17BJ7ERMNE6W72mQRo0I1Ud8eFJ+RVVIcBNhLFZ3GX4XFz5w==",
+			"dev": true
+		},
 		"node_modules/@emotion/is-prop-valid": {
 			"version": "1.2.0",
 			"resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-1.2.0.tgz",
@@ -3893,6 +3903,61 @@
 			"resolved": "https://registry.npmjs.org/dlv/-/dlv-1.1.3.tgz",
 			"integrity": "sha512-+HlytyjlPKnIG8XuRG8WvmBP8xs8P71y+SKKS6ZXWoEgLuePxtDoUEiH7WkdePWrQ5JBpE6aoVqfZfJUQkjXwA=="
 		},
+		"node_modules/dom-serializer": {
+			"version": "1.4.1",
+			"resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-1.4.1.tgz",
+			"integrity": "sha512-VHwB3KfrcOOkelEG2ZOfxqLZdfkil8PtJi4P8N2MMXucZq2yLp75ClViUlOVwyoHEDjYU433Aq+5zWP61+RGag==",
+			"dev": true,
+			"dependencies": {
+				"domelementtype": "^2.0.1",
+				"domhandler": "^4.2.0",
+				"entities": "^2.0.0"
+			},
+			"funding": {
+				"url": "https://github.com/cheeriojs/dom-serializer?sponsor=1"
+			}
+		},
+		"node_modules/domelementtype": {
+			"version": "2.3.0",
+			"resolved": "https://registry.npmjs.org/domelementtype/-/domelementtype-2.3.0.tgz",
+			"integrity": "sha512-OLETBj6w0OsagBwdXnPdN0cnMfF9opN69co+7ZrbfPGrdpPVNBUj02spi6B1N7wChLQiPn4CSH/zJvXw56gmHw==",
+			"dev": true,
+			"funding": [
+				{
+					"type": "github",
+					"url": "https://github.com/sponsors/fb55"
+				}
+			]
+		},
+		"node_modules/domhandler": {
+			"version": "4.3.1",
+			"resolved": "https://registry.npmjs.org/domhandler/-/domhandler-4.3.1.tgz",
+			"integrity": "sha512-GrwoxYN+uWlzO8uhUXRl0P+kHE4GtVPfYzVLcUxPL7KNdHKj66vvlhiweIHqYYXWlw+T8iLMp42Lm67ghw4WMQ==",
+			"dev": true,
+			"dependencies": {
+				"domelementtype": "^2.2.0"
+			},
+			"engines": {
+				"node": ">= 4"
+			},
+			"funding": {
+				"url": "https://github.com/fb55/domhandler?sponsor=1"
+			}
+		},
+		"node_modules/domutils": {
+			"version": "2.8.0",
+			"resolved": "https://registry.npmjs.org/domutils/-/domutils-2.8.0.tgz",
+			"integrity": "sha512-w96Cjofp72M5IIhpjgobBimYEfoPjx1Vx0BSX9P30WBdZW2WIKU0T1Bd0kz2eNZ9ikjKgHbEyKx8BB6H1L3h3A==",
+			"dev": true,
+			"dependencies": {
+				"dom-serializer": "^1.0.1",
+				"domelementtype": "^2.2.0",
+				"domhandler": "^4.2.0"
+			},
+			"funding": {
+				"url": "https://github.com/fb55/domutils?sponsor=1"
+			}
+		},
 		"node_modules/dot-prop": {
 			"version": "4.2.1",
 			"resolved": "https://registry.npmjs.org/dot-prop/-/dot-prop-4.2.1.tgz",
@@ -4098,6 +4163,15 @@
 				"node": ">= 0.6"
 			}
 		},
+		"node_modules/entities": {
+			"version": "2.2.0",
+			"resolved": "https://registry.npmjs.org/entities/-/entities-2.2.0.tgz",
+			"integrity": "sha512-p92if5Nz619I0w+akJrLZH0MX0Pb5DX39XOwQTtXSdQQOaYH03S1uIQp4mhOZtAXrxq4ViO67YTiLBo2638o9A==",
+			"dev": true,
+			"funding": {
+				"url": "https://github.com/fb55/entities?sponsor=1"
+			}
+		},
 		"node_modules/env-paths": {
 			"version": "1.0.0",
 			"resolved": "https://registry.npmjs.org/env-paths/-/env-paths-1.0.0.tgz",
@@ -6570,6 +6644,25 @@
 			"resolved": "https://registry.npmjs.org/hosted-git-info/-/hosted-git-info-2.8.9.tgz",
 			"integrity": "sha512-mxIDAb9Lsm6DoOJ7xH+5+X4y1LU/4Hi50L9C5sIswK3JzULS4bwk1FvjdBgvYR4bzT4tuUQiC15FE2f5HbLvYw=="
 		},
+		"node_modules/htmlparser2": {
+			"version": "6.1.0",
+			"resolved": "https://registry.npmjs.org/htmlparser2/-/htmlparser2-6.1.0.tgz",
+			"integrity": "sha512-gyyPk6rgonLFEDGoeRgQNaEUvdJ4ktTmmUh/h2t7s+M8oPpIPxgNACWa+6ESR57kXstwqPiCut0V8NRpcwgU7A==",
+			"dev": true,
+			"funding": [
+				"https://github.com/fb55/htmlparser2?sponsor=1",
+				{
+					"type": "github",
+					"url": "https://github.com/sponsors/fb55"
+				}
+			],
+			"dependencies": {
+				"domelementtype": "^2.0.1",
+				"domhandler": "^4.0.0",
+				"domutils": "^2.5.2",
+				"entities": "^2.0.0"
+			}
+		},
 		"node_modules/http-cache-semantics": {
 			"version": "3.8.1",
 			"resolved": "https://registry.npmjs.org/http-cache-semantics/-/http-cache-semantics-3.8.1.tgz",
@@ -8170,6 +8263,11 @@
 			"resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
 			"integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg=="
 		},
+		"node_modules/lodash-es": {
+			"version": "4.17.21",
+			"resolved": "https://registry.npmjs.org/lodash-es/-/lodash-es-4.17.21.tgz",
+			"integrity": "sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw=="
+		},
 		"node_modules/lodash.clonedeep": {
 			"version": "4.5.0",
 			"resolved": "https://registry.npmjs.org/lodash.clonedeep/-/lodash.clonedeep-4.5.0.tgz",
@@ -9049,7 +9147,6 @@
 			"resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.4.tgz",
 			"integrity": "sha512-MqBkQh/OHTS2egovRtLk45wEyNXwF+cokD+1YPf9u5VfJiRdAiRwB2froX5Co9Rh20xs4siNPm8naNotSD6RBw==",
 			"dev": true,
-			"peer": true,
 			"bin": {
 				"nanoid": "bin/nanoid.cjs"
 			},
@@ -10574,6 +10671,12 @@
 				"node": ">=0.10.0"
 			}
 		},
+		"node_modules/parse-srcset": {
+			"version": "1.0.2",
+			"resolved": "https://registry.npmjs.org/parse-srcset/-/parse-srcset-1.0.2.tgz",
+			"integrity": "sha512-/2qh0lav6CmI15FzA3i/2Bzk2zCgQhGMkvhOhKNcBVQ1ldgpbfiNTVslmooUmWJcADi1f1kIeynbDRVzNlfR6Q==",
+			"dev": true
+		},
 		"node_modules/parseurl": {
 			"version": "1.3.3",
 			"resolved": "https://registry.npmjs.org/parseurl/-/parseurl-1.3.3.tgz",
@@ -10959,7 +11062,6 @@
 					"url": "https://tidelift.com/funding/github/npm/postcss"
 				}
 			],
-			"peer": true,
 			"dependencies": {
 				"nanoid": "^3.3.4",
 				"picocolors": "^1.0.0",
@@ -12022,6 +12124,20 @@
 			"resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz",
 			"integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg=="
 		},
+		"node_modules/sanitize-html": {
+			"version": "2.7.1",
+			"resolved": "https://registry.npmjs.org/sanitize-html/-/sanitize-html-2.7.1.tgz",
+			"integrity": "sha512-oOpe8l4J8CaBk++2haoN5yNI5beekjuHv3JRPKUx/7h40Rdr85pemn4NkvUB3TcBP7yjat574sPlcMAyv4UQig==",
+			"dev": true,
+			"dependencies": {
+				"deepmerge": "^4.2.2",
+				"escape-string-regexp": "^4.0.0",
+				"htmlparser2": "^6.0.0",
+				"is-plain-object": "^5.0.0",
+				"parse-srcset": "^1.0.2",
+				"postcss": "^8.3.11"
+			}
+		},
 		"node_modules/sass": {
 			"version": "1.54.4",
 			"resolved": "https://registry.npmjs.org/sass/-/sass-1.54.4.tgz",
@@ -16216,6 +16332,12 @@
 				"to-fast-properties": "^2.0.0"
 			}
 		},
+		"@braintree/sanitize-url": {
+			"version": "6.0.0",
+			"resolved": "https://registry.npmjs.org/@braintree/sanitize-url/-/sanitize-url-6.0.0.tgz",
+			"integrity": "sha512-mgmE7XBYY/21erpzhexk4Cj1cyTQ9LzvnTxtzM17BJ7ERMNE6W72mQRo0I1Ud8eFJ+RVVIcBNhLFZ3GX4XFz5w==",
+			"dev": true
+		},
 		"@emotion/is-prop-valid": {
 			"version": "1.2.0",
 			"resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-1.2.0.tgz",
@@ -18905,6 +19027,43 @@
 			"resolved": "https://registry.npmjs.org/dlv/-/dlv-1.1.3.tgz",
 			"integrity": "sha512-+HlytyjlPKnIG8XuRG8WvmBP8xs8P71y+SKKS6ZXWoEgLuePxtDoUEiH7WkdePWrQ5JBpE6aoVqfZfJUQkjXwA=="
 		},
+		"dom-serializer": {
+			"version": "1.4.1",
+			"resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-1.4.1.tgz",
+			"integrity": "sha512-VHwB3KfrcOOkelEG2ZOfxqLZdfkil8PtJi4P8N2MMXucZq2yLp75ClViUlOVwyoHEDjYU433Aq+5zWP61+RGag==",
+			"dev": true,
+			"requires": {
+				"domelementtype": "^2.0.1",
+				"domhandler": "^4.2.0",
+				"entities": "^2.0.0"
+			}
+		},
+		"domelementtype": {
+			"version": "2.3.0",
+			"resolved": "https://registry.npmjs.org/domelementtype/-/domelementtype-2.3.0.tgz",
+			"integrity": "sha512-OLETBj6w0OsagBwdXnPdN0cnMfF9opN69co+7ZrbfPGrdpPVNBUj02spi6B1N7wChLQiPn4CSH/zJvXw56gmHw==",
+			"dev": true
+		},
+		"domhandler": {
+			"version": "4.3.1",
+			"resolved": "https://registry.npmjs.org/domhandler/-/domhandler-4.3.1.tgz",
+			"integrity": "sha512-GrwoxYN+uWlzO8uhUXRl0P+kHE4GtVPfYzVLcUxPL7KNdHKj66vvlhiweIHqYYXWlw+T8iLMp42Lm67ghw4WMQ==",
+			"dev": true,
+			"requires": {
+				"domelementtype": "^2.2.0"
+			}
+		},
+		"domutils": {
+			"version": "2.8.0",
+			"resolved": "https://registry.npmjs.org/domutils/-/domutils-2.8.0.tgz",
+			"integrity": "sha512-w96Cjofp72M5IIhpjgobBimYEfoPjx1Vx0BSX9P30WBdZW2WIKU0T1Bd0kz2eNZ9ikjKgHbEyKx8BB6H1L3h3A==",
+			"dev": true,
+			"requires": {
+				"dom-serializer": "^1.0.1",
+				"domelementtype": "^2.2.0",
+				"domhandler": "^4.2.0"
+			}
+		},
 		"dot-prop": {
 			"version": "4.2.1",
 			"resolved": "https://registry.npmjs.org/dot-prop/-/dot-prop-4.2.1.tgz",
@@ -19080,6 +19239,12 @@
 			"resolved": "https://registry.npmjs.org/engine.io-parser/-/engine.io-parser-5.0.4.tgz",
 			"integrity": "sha512-+nVFp+5z1E3HcToEnO7ZIj3g+3k9389DvWtvJZz0T6/eOCPIyyxehFcedoYrZQrp0LgQbD9pPXhpMBKMd5QURg=="
 		},
+		"entities": {
+			"version": "2.2.0",
+			"resolved": "https://registry.npmjs.org/entities/-/entities-2.2.0.tgz",
+			"integrity": "sha512-p92if5Nz619I0w+akJrLZH0MX0Pb5DX39XOwQTtXSdQQOaYH03S1uIQp4mhOZtAXrxq4ViO67YTiLBo2638o9A==",
+			"dev": true
+		},
 		"env-paths": {
 			"version": "1.0.0",
 			"resolved": "https://registry.npmjs.org/env-paths/-/env-paths-1.0.0.tgz",
@@ -21030,6 +21195,18 @@
 			"resolved": "https://registry.npmjs.org/hosted-git-info/-/hosted-git-info-2.8.9.tgz",
 			"integrity": "sha512-mxIDAb9Lsm6DoOJ7xH+5+X4y1LU/4Hi50L9C5sIswK3JzULS4bwk1FvjdBgvYR4bzT4tuUQiC15FE2f5HbLvYw=="
 		},
+		"htmlparser2": {
+			"version": "6.1.0",
+			"resolved": "https://registry.npmjs.org/htmlparser2/-/htmlparser2-6.1.0.tgz",
+			"integrity": "sha512-gyyPk6rgonLFEDGoeRgQNaEUvdJ4ktTmmUh/h2t7s+M8oPpIPxgNACWa+6ESR57kXstwqPiCut0V8NRpcwgU7A==",
+			"dev": true,
+			"requires": {
+				"domelementtype": "^2.0.1",
+				"domhandler": "^4.0.0",
+				"domutils": "^2.5.2",
+				"entities": "^2.0.0"
+			}
+		},
 		"http-cache-semantics": {
 			"version": "3.8.1",
 			"resolved": "https://registry.npmjs.org/http-cache-semantics/-/http-cache-semantics-3.8.1.tgz",
@@ -22211,6 +22388,11 @@
 			"resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
 			"integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg=="
 		},
+		"lodash-es": {
+			"version": "4.17.21",
+			"resolved": "https://registry.npmjs.org/lodash-es/-/lodash-es-4.17.21.tgz",
+			"integrity": "sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw=="
+		},
 		"lodash.clonedeep": {
 			"version": "4.5.0",
 			"resolved": "https://registry.npmjs.org/lodash.clonedeep/-/lodash.clonedeep-4.5.0.tgz",
@@ -22898,8 +23080,7 @@
 			"version": "3.3.4",
 			"resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.4.tgz",
 			"integrity": "sha512-MqBkQh/OHTS2egovRtLk45wEyNXwF+cokD+1YPf9u5VfJiRdAiRwB2froX5Co9Rh20xs4siNPm8naNotSD6RBw==",
-			"dev": true,
+			"dev": true
-			"peer": true
 		},
 		"nanomatch": {
 			"version": "1.2.13",
@@ -24034,6 +24215,12 @@
 			"resolved": "https://registry.npmjs.org/parse-passwd/-/parse-passwd-1.0.0.tgz",
 			"integrity": "sha512-1Y1A//QUXEZK7YKz+rD9WydcE1+EuPr6ZBgKecAB8tmoW6UFv0NREVJe1p+jRxtThkcbbKkfwIbWJe/IeE6m2Q=="
 		},
+		"parse-srcset": {
+			"version": "1.0.2",
+			"resolved": "https://registry.npmjs.org/parse-srcset/-/parse-srcset-1.0.2.tgz",
+			"integrity": "sha512-/2qh0lav6CmI15FzA3i/2Bzk2zCgQhGMkvhOhKNcBVQ1ldgpbfiNTVslmooUmWJcADi1f1kIeynbDRVzNlfR6Q==",
+			"dev": true
+		},
 		"parseurl": {
 			"version": "1.3.3",
 			"resolved": "https://registry.npmjs.org/parseurl/-/parseurl-1.3.3.tgz",
@@ -24310,7 +24497,6 @@
 			"resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.16.tgz",
 			"integrity": "sha512-ipHE1XBvKzm5xI7hiHCZJCSugxvsdq2mPnsq5+UF+VHCjiBvtDrlxJfMBToWaP9D5XlgNmcFGqoHmUn0EYEaRQ==",
 			"dev": true,
-			"peer": true,
 			"requires": {
 				"nanoid": "^3.3.4",
 				"picocolors": "^1.0.0",
@@ -25123,6 +25309,20 @@
 			"resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz",
 			"integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg=="
 		},
+		"sanitize-html": {
+			"version": "2.7.1",
+			"resolved": "https://registry.npmjs.org/sanitize-html/-/sanitize-html-2.7.1.tgz",
+			"integrity": "sha512-oOpe8l4J8CaBk++2haoN5yNI5beekjuHv3JRPKUx/7h40Rdr85pemn4NkvUB3TcBP7yjat574sPlcMAyv4UQig==",
+			"dev": true,
+			"requires": {
+				"deepmerge": "^4.2.2",
+				"escape-string-regexp": "^4.0.0",
+				"htmlparser2": "^6.0.0",
+				"is-plain-object": "^5.0.0",
+				"parse-srcset": "^1.0.2",
+				"postcss": "^8.3.11"
+			}
+		},
 		"sass": {
 			"version": "1.54.4",
 			"resolved": "https://registry.npmjs.org/sass/-/sass-1.54.4.tgz",

package.json

@@ -23,6 +23,10 @@
 		"gulp-sass": "^5.1.0",
 		"gulp-sourcemaps": "^3.0.0",
 		"gulp-uglify": "^3.0.2",
+		"lodash-es": "^4.17.21",
+		"@braintree/sanitize-url": "^6.0.0",
+		"escape-html": "^1.0.3",
+		"sanitize-html": "^2.7.1",
 		"mkdirp": "^1.0.4",
 		"open": "^8.4.0",
 		"sass": "^1.50.1",

server.js

@@ -14,6 +14,9 @@ import gulpSass from 'gulp-sass';
 import sourcemaps from "gulp-sourcemaps";
 import fs from "fs/promises";
 import open from "open";
+import {sanitizeUrl} from "@braintree/sanitize-url";
+import sanitizeHtml from 'sanitize-html';
+import {escape} from "lodash-es";
 
 /**
  * Constants
@@ -37,6 +40,21 @@ const app = express();
 
 const hbs = create({
   extname: '.hbs', defaultLayout: false, partialsDir: ['.'],
+  helpers: {
+    esc_attr(attr) {
+      return escape(attr);
+    },
+    esc_url(url) {
+      return sanitizeUrl(url);
+    },
+    esc_html(html) {
+      // TODO: Check if we can remove this helper.
+      return html;
+    },
+    safe_html(html) {
+      return sanitizeHtml(html);
+    }
+  }
 });
 
 app.engine('.hbs', hbs.engine);
@@ -48,6 +66,9 @@ const dataFiles = prepareListOfDataFiles(await fs.readdir('./data'));
 app.get('/', async (req, res) => {
   let jsonFileName = req.query.data ? req.query.data : 'default';
   const data = await getBlockConfigs(jsonFileName);
+  if (data.error && data.errorMessage) {
+    return res.send(data.errorMessage);
+  }
 
   data.helpers = {
     port: port,
@@ -61,6 +82,9 @@ app.get('/', async (req, res) => {
 app.get('/view/:baseView', async (req, res) => {
   let jsonFileName = req.query.data ? req.query.data : 'default';
   const data = await getBlockConfigs(jsonFileName);
+  if (data.error && data.errorMessage) {
+    return res.send(data.errorMessage);
+  }
 
   data.helpers = {
     include_partial: (path) => projectDir + path,
@@ -166,7 +190,16 @@ async function getBlockConfigs(jsonFileName) {
     jsonFileName = 'default';
   }
 
-  const data = await fsExtra.readJson(`./data/${jsonFileName}.json`);
+  let data = {};
+
+  try {
+    data = await fsExtra.readJson(`./data/${jsonFileName}.json`);
+  } catch (e) {
+    return {
+      error: true,
+      errorMessage: getErrorHtml("JSON Syntax error. Please make sure the dataFile is valid.", e),
+    };
+  }
 
   Object.assign(data, {
     config: Object.assign(
@@ -187,3 +220,10 @@ async function getBlockConfigs(jsonFileName) {
 
   return data;
 }
+
+function getErrorHtml(message = '', errorMessage = '') {
+  return `<div style="padding: 10px 15px; font-family: Arial, sans-serif">
+    <p>${message}</p>
+    <pre style="padding: 10px 15px; background-color: #ffd0d0; border: 1px solid red;">${errorMessage}</pre>
+  </div>`;
+}