From 05c906cdb6c7f658ba7cee4af1a40941555f7250 Mon Sep 17 00:00:00 2001 From: Garth Braithwaite Date: Thu, 4 Apr 2024 16:53:16 -0600 Subject: [PATCH] fix: sanitized query strings on the website (#240) --- docs/ui/package.json | 2 +- docs/ui/src/index.js | 4 ++-- docs/ui/src/js/addFromURL.js | 3 ++- docs/ui/src/js/params.js | 4 ++-- docs/ui/src/js/utils.js | 16 +++++++++++++++- docs/ui/src/theme.js | 4 ++-- pnpm-lock.yaml | 6 +++--- 7 files changed, 27 insertions(+), 12 deletions(-) diff --git a/docs/ui/package.json b/docs/ui/package.json index 19181498..e42c9646 100644 --- a/docs/ui/package.json +++ b/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" diff --git a/docs/ui/src/index.js b/docs/ui/src/index.js index d71c618e..de40f71b 100644 --- a/docs/ui/src/index.js +++ b/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; diff --git a/docs/ui/src/js/addFromURL.js b/docs/ui/src/js/addFromURL.js index e25d103f..6ffd104e 100644 --- a/docs/ui/src/js/addFromURL.js +++ b/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; diff --git a/docs/ui/src/js/params.js b/docs/ui/src/js/params.js index ed78deec..c203dac6 100644 --- a/docs/ui/src/js/params.js +++ b/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; diff --git a/docs/ui/src/js/utils.js b/docs/ui/src/js/utils.js index f154df82..a5f6882d 100644 --- a/docs/ui/src/js/utils.js +++ b/docs/ui/src/js/utils.js @@ -778,6 +778,19 @@ function colorPickerInput(e) { } } +function sanitizeQueryString(string) { + const map = { + '&': '&', + '<': '<', + '>': '>', + '"': '"', + "'": ''', + '/': '/' + }; + 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 }; diff --git a/docs/ui/src/theme.js b/docs/ui/src/theme.js index bd31e314..952d1777 100644 --- a/docs/ui/src/theme.js +++ b/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 diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 72fab525..14b82341 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -6542,7 +6542,7 @@ packages: dependencies: chokidar: 3.5.3 immutable: 4.3.5 - source-map-js: 1.0.2 + source-map-js: 1.2.0 dev: true /sax@1.3.0: @@ -6686,8 +6686,8 @@ packages: yargs: 15.4.1 dev: true - /source-map-js@1.0.2: - resolution: {integrity: sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==} + /source-map-js@1.2.0: + resolution: {integrity: sha512-itJW8lvSA0TXEphiRoawsCksnlf8SyvmFzIhltqAHluXd88pkCd+cXJVHTDwdCr0IzwptSm035IHQktUu1QUMg==} engines: {node: '>=0.10.0'} dev: true