fix: sanitized query strings on the website

docs/ui/package.json

@@ -99,11 +99,11 @@
     "gh-pages": "^3.2.3",
     "highlight.js": "^11.2.0",
     "parcel": "^2.11.0",
+    "path-browserify": "^1.0.0",
     "posthtml": "^0.16.5",
     "posthtml-doctype": "^1.1.1",
     "posthtml-include": "^1.7.2",
     "posthtml-modules": "^0.7.4",
-    "path-browserify": "^1.0.0",
     "process": "^0.11.10",
     "sass": "^1.23.6",
     "vm-browserify": "^1.1.2"

docs/ui/src/index.js

@@ -70,7 +70,7 @@ loadIcons('./spectrum-css-icons.svg');
 loadIcons('./spectrum-icons.svg');
 
 // Import local Javascript functions
-import {throttle} from './js/utils';
+import {throttle, sanitizeQueryString} from './js/utils';
 import {openPanelTab, openTab, openAppTab, openSideNavItem} from './js/tabs';
 import toggleTooltip from './js/tooltip';
 
@@ -87,7 +87,7 @@ posthtml()
 
 // Redirect for URL parameters
 let url = new URL(window.location);
-let params = new URLSearchParams(url.search.slice(1));
+let params = new URLSearchParams(sanitizeQueryString(url.search.slice(1)));
 
 if (params.has('colorKeys') || params.has('name')) {
   let newURL;

docs/ui/src/js/addFromURL.js

@@ -10,6 +10,7 @@ governing permissions and limitations under the License.
 */
 
 import {addColorScaleUpdate} from './colorScale';
+import {sanitizeQueryString} from './utils';
 
 function addFromURLDialog() {
   let button = document.getElementById('addFromURLButton');
@@ -33,7 +34,7 @@ function addFromURL() {
   let value = input.value;
 
   let url = new URL(value);
-  let params = new URLSearchParams(url.search.slice(1));
+  let params = new URLSearchParams(sanitizeQueryString(url.search.slice(1)));
   let pathName = url.pathname;
 
   let crs, ratios, mode;

docs/ui/src/js/params.js

@@ -14,13 +14,13 @@ import {addColorScale} from './colorScale';
 import {addRatioInputs, sortRatios} from './ratios';
 import {getRandomColorName, getClosestColorName} from './predefinedColorNames';
 import {baseScaleOptions} from './createBaseScaleOptions';
-import {round} from './utils';
+import {round, sanitizeQueryString} from './utils';
 import {_theme, tempGray} from './initialTheme';
 
 function paramSetup() {
   let setFirstColorSmoothing = false;
   let url = new URL(window.location);
-  let params = new URLSearchParams(url.search.slice(1));
+  let params = new URLSearchParams(sanitizeQueryString(url.search.slice(1)));
   let themeBase = document.getElementById('themeBase');
   let RATIOS;
   let RATIOCOLORS;

docs/ui/src/js/utils.js

@@ -778,6 +778,19 @@ function colorPickerInput(e) {
   }
 }
 
+function sanitizeQueryString(string) {
+  const map = {
+    '&': '&',
+    '<': '&lt;',
+    '>': '&gt;',
+    '"': '&quot;',
+    "'": '&#x27;',
+    '/': '&#x2F;'
+  };
+  const reg = /[&<>"'/]/gi;
+  return string.replace(reg, (match) => map[match]);
+}
+
 module.exports = {
   randomId,
   throttle,
@@ -808,5 +821,6 @@ module.exports = {
   getChannelsAndFunction,
   orderColorsByLuminosity,
   shuffleArray,
-  colorPickerInput
+  colorPickerInput,
+  sanitizeQueryString
 };

docs/ui/src/theme.js

@@ -75,7 +75,7 @@ import ClipboardJS from 'clipboard';
 // Import local Javascript functions
 import {_theme} from './js/initialTheme';
 import {paramSetup} from './js/params';
-import {throttle} from './js/utils';
+import {throttle, sanitizeQueryString} from './js/utils';
 import {getThemeContrastRatios, getContrastRatioInputs} from './js/getThemeData';
 import {addColorScale, addColorScaleUpdate} from './js/colorScale';
 import {addColorsFromImage} from './js/addColorsFromImage';
@@ -132,7 +132,7 @@ function updateParams() {
     formula: _theme.formula
   };
   let url = new URL(window.location);
-  let params = new URLSearchParams(url.search.slice(1));
+  let params = new URLSearchParams(sanitizeQueryString(url.search.slice(1)));
 
   params.set('name', name); // Theme name
   params.set('config', JSON.stringify(theme)); // Configurations