diff --git a/.circleci/config.yml b/.circleci/config.yml index f18f84943..d405486b5 100644 --- a/.circleci/config.yml +++ b/.circleci/config.yml @@ -76,6 +76,9 @@ jobs: - run: name: Test - Routes command: npm run test:route + - run: + name: Test - HTML sanitization + command: npm run test:safehtml - run: name: Test - Coverage command: npm run test:coverage diff --git a/client/homebrew/brewRenderer/brewRenderer.jsx b/client/homebrew/brewRenderer/brewRenderer.jsx index 031303def..8fc631eb5 100644 --- a/client/homebrew/brewRenderer/brewRenderer.jsx +++ b/client/homebrew/brewRenderer/brewRenderer.jsx @@ -16,8 +16,7 @@ const Frame = require('react-frame-component').default; const dedent = require('dedent-tabs').default; const { printCurrentBrew } = require('../../../shared/helpers.js'); -const DOMPurify = require('dompurify'); -const purifyConfig = { FORCE_BODY: true, SANITIZE_DOM: false }; +import { safeHTML } from './safeHTML.js'; const PAGE_HEIGHT = 1056; @@ -29,6 +28,7 @@ const INITIAL_CONTENT = dedent`
`; + //v=====----------------------< Brew Page Component >---------------------=====v// const BrewPage = (props)=>{ props = { @@ -36,7 +36,7 @@ const BrewPage = (props)=>{ index : 0, ...props }; - const cleanText = props.contents; //DOMPurify.sanitize(props.contents, purifyConfig); + const cleanText = safeHTML(props.contents); return
; @@ -77,19 +77,19 @@ const BrewRenderer = (props)=>{ rawPages = props.text.split(/^\\page$/gm); } - const scrollToHash = (hash) => { - if (!hash) return; + const scrollToHash = (hash)=>{ + if(!hash) return; const iframeDoc = document.getElementById('BrewRenderer').contentDocument; let anchor = iframeDoc.querySelector(hash); - if (anchor) { + if(anchor) { anchor.scrollIntoView({ behavior: 'smooth' }); } else { // Use MutationObserver to wait for the element if it's not immediately available - new MutationObserver((mutations, obs) => { - anchor = iframeDoc.querySelector(hash); - if (anchor) { + new MutationObserver((mutations, obs)=>{ + anchor = iframeDoc.querySelector(hash); + if(anchor) { anchor.scrollIntoView({ behavior: 'smooth' }); obs.disconnect(); } @@ -125,9 +125,9 @@ const BrewRenderer = (props)=>{ }; const renderStyle = ()=>{ - const cleanStyle = props.style; //DOMPurify.sanitize(props.style, purifyConfig); const themeStyles = props.themeBundle?.joinedStyles ?? ''; - return
${cleanStyle} ` }} />; + const cleanStyle = safeHTML(`${themeStyles} \n\n `); + return
; }; const renderPage = (pageText, index)=>{ @@ -201,8 +201,8 @@ const BrewRenderer = (props)=>{ styleObject.backgroundImage = `url("data:image/svg+xml;utf8,${global.config.deployment}")`; } - const renderedStyle = useMemo(()=> renderStyle(), [props.style, props.themeBundle]); - renderedPages = useMemo(() => renderPages(), [props.text]); + const renderedStyle = useMemo(()=>renderStyle(), [props.style, props.themeBundle]); + renderedPages = useMemo(()=>renderPages(), [props.text]); return ( <> diff --git a/client/homebrew/brewRenderer/safeHTML.js b/client/homebrew/brewRenderer/safeHTML.js new file mode 100644 index 000000000..2574f4cfe --- /dev/null +++ b/client/homebrew/brewRenderer/safeHTML.js @@ -0,0 +1,46 @@ +// Derived from the vue-html-secure package, customized for Homebrewery + +let doc = null; +let div = null; + +function safeHTML(htmlString) { + // If the Document interface doesn't exist, exit + if(typeof document == 'undefined') return null; + // If the test document and div don't exist, create them + if(!doc) doc = document.implementation.createHTMLDocument(''); + if(!div) div = doc.createElement('div'); + + // Set the test div contents to the evaluation string + div.innerHTML = htmlString; + // Grab all nodes from the test div + const elements = div.querySelectorAll('*'); + + // Blacklisted tags + const blacklistTags = ['script', 'noscript', 'noembed']; + // Tests to remove attributes + const blacklistAttrs = [ + (test)=>{return test.localName.indexOf('on') == 0;}, + (test)=>{return test.localName.indexOf('type') == 0 && test.value.match(/submit/i);}, + (test)=>{return test.value.replace(/[\u0000-\u0020\u00A0\u1680\u180E\u2000-\u2029\u205f\u3000]/g, '').toLowerCase().trim().indexOf('javascript:') == 0;} + ]; + + + elements.forEach((element)=>{ + // Check each element for blacklisted type + if(blacklistTags.includes(element?.localName?.toLowerCase())) { + element.remove(); + return; + } + // Check remaining elements for blacklisted attributes + for (const attribute of element.attributes){ + if(blacklistAttrs.some((test)=>{return test(attribute);})) { + element.removeAttribute(attribute.localName); + break; + }; + }; + }); + + return div.innerHTML; +}; + +module.exports.safeHTML = safeHTML; \ No newline at end of file diff --git a/client/homebrew/pages/vaultPage/vaultPage.less b/client/homebrew/pages/vaultPage/vaultPage.less index b925a7d3e..3832daf6f 100644 --- a/client/homebrew/pages/vaultPage/vaultPage.less +++ b/client/homebrew/pages/vaultPage/vaultPage.less @@ -5,373 +5,369 @@ *:not(input) { user-select : none; } - .content { + .dataGroup { + width : 100%; height : 100%; - background : #2C3E50; + background : white; - .dataGroup { - width : 100%; - height : 100%; - background : white; + &.form .brewLookup { + position : relative; + padding : 50px clamp(20px, 4vw, 50px); - &.form .brewLookup { - position : relative; - padding : 50px clamp(20px, 4vw, 50px); - - small { - font-size : 10pt; - color : #555555; + small { + font-size : 10pt; + color : #555555; - a { color : #333333; } - } + a { color : #333333; } + } - code { - padding-inline : 5px; - font-family : monospace; - background : lightgrey; - border-radius : 5px; - } + code { + padding-inline : 5px; + font-family : monospace; + background : lightgrey; + border-radius : 5px; + } - h1, h2, h3, h4 { - font-family : 'CodeBold'; - letter-spacing : 2px; - } + h1, h2, h3, h4 { + font-family : 'CodeBold'; + letter-spacing : 2px; + } - legend { - h3 { - margin-block : 30px 20px; - font-size : 20px; - text-align : center; - border-bottom : 2px solid; - } - ul { - padding-inline : 30px 10px; - li { - margin-block : 5px; - line-height : calc(1em + 5px); - list-style : disc; - } - } - } - - &::after { - position : absolute; - top : 0; - right : 0; - left : 0; - display : block; - padding : 10px; - font-weight : 900; - color : white; - white-space : pre-wrap; - content : 'Error:\A At least one renderer should be enabled to make a search'; - background : rgb(255, 60, 60); - opacity : 0; - transition : opacity 0.5s; - } - &:not(:has(input[type='checkbox']:checked))::after { opacity : 1; } - - .formTitle { - margin : 20px 0; - font-size : 30px; - color : black; + legend { + h3 { + margin-block : 30px 20px; + font-size : 20px; text-align : center; border-bottom : 2px solid; } - - .formContents { - position : relative; - display : flex; - flex-direction : column; - - label { - display : flex; - align-items : center; - margin : 10px 0; + ul { + padding-inline : 30px 10px; + li { + margin-block : 5px; + line-height : calc(1em + 5px); + list-style : disc; } - select { margin : 0 10px; } - - input { - margin : 0 10px; - - &:invalid { background : rgb(255, 188, 181); } - - &[type='checkbox'] { - position : relative; - display : inline-block; - width : 50px; - height : 30px; - font-family : 'WalterTurncoat'; - font-size : 20px; - font-weight : 800; - color : white; - letter-spacing : 2px; - appearance : none; - background : red; - isolation : isolate; - border-radius : 5px; - - &::before,&::after { - position : absolute; - inset : 0; - z-index : 5; - padding-top : 2px; - text-align : center; - } - - &::before { - display : block; - content : 'No'; - } - - &::after { - display : none; - content : 'Yes'; - } - - &:checked { - background : green; - - &::before { display : none; } - &::after { display : block; } - } - } - } - - #searchButton { - position : absolute; - right : 20px; - bottom : 0; - - i { - margin-left : 10px; - animation-duration : 1000s; - } - } - } + } } - &.resultsContainer { + &::after { + position : absolute; + top : 0; + right : 0; + left : 0; + display : block; + padding : 10px; + font-weight : 900; + color : white; + white-space : pre-wrap; + content : 'Error:\A At least one renderer should be enabled to make a search'; + background : rgb(255, 60, 60); + opacity : 0; + transition : opacity 0.5s; + } + &:not(:has(input[type='checkbox']:checked))::after { opacity : 1; } + + .formTitle { + margin : 20px 0; + font-size : 30px; + color : black; + text-align : center; + border-bottom : 2px solid; + } + + .formContents { + position : relative; display : flex; flex-direction : column; - height : 100%; - overflow-y : auto; - font-family : 'BookInsanityRemake'; - font-size : 0.34cm; - - h3 { - font-family : 'Open Sans'; - font-weight : 900; - color : white; + + label { + display : flex; + align-items : center; + margin : 10px 0; } + select { margin : 0 10px; } - .sort-container { - display : flex; - flex-wrap : wrap; - column-gap : 15px; - justify-content : center; - height : 30px; - color : white; - background-color : #555555; - border-top : 1px solid #666666; - border-bottom : 1px solid #666666; + input { + margin : 0 10px; + + &:invalid { background : rgb(255, 188, 181); } - .sort-option { - display : flex; - align-items : center; - padding : 0 8px; - - &:hover { background-color : #444444; } - - &.active { - background-color : #333333; - - button { - font-weight : 800; - color : white; - - & + .sortDir { padding-left : 5px; } - } + &[type='checkbox'] { + position : relative; + display : inline-block; + width : 50px; + height : 30px; + font-family : 'WalterTurncoat'; + font-size : 20px; + font-weight : 800; + color : white; + letter-spacing : 2px; + appearance : none; + background : red; + isolation : isolate; + border-radius : 5px; + + &::before,&::after { + position : absolute; + inset : 0; + z-index : 5; + padding-top : 2px; + text-align : center; } - button { - padding : 0; - font-size : 11px; - font-weight : normal; - color : #CCCCCC; - text-transform : uppercase; - background-color : transparent; - - &:hover { background : none; } - } - } - } - - .foundBrews { - position : relative; - width : 100%; - height : 100%; - max-height : 100%; - padding : 50px 50px 70px 50px; - overflow-y : scroll; - background-color : #2C3E50; - - h3 { font-size : 25px; } - - &.noBrews { - display : grid; - place-items : center; - color : white; - } - - &.searching { - display : grid; - place-items : center; - color : white; - - h3 { position : relative; } - - h3.searchAnim::after { - position : absolute; - top : 50%; - right : 0; - width : max-content; - height : 1em; - content : ''; - translate : calc(100% + 5px) -50%; - animation : trailingDots 2s ease infinite; - } - } - - .totalBrews { - position : fixed; - right : 0; - bottom : 0; - z-index : 1000; - padding : 8px 10px; - font-family : 'Open Sans'; - font-size : 11px; - font-weight : 800; - color : white; - background-color : #333333; - - .searchAnim { - position : relative; - display : inline-block; - width : 3ch; - height : 1em; + &::before { + display : block; + content : 'No'; } - .searchAnim::after { - position : absolute; - top : 50%; - right : 0; - width : max-content; - height : 1em; - content : ''; - translate : -50% -50%; - animation : trailingDots 2s ease infinite; - } - } - - .brewItem { - width : 47%; - margin-right : 40px; - color : black; - isolation : isolate; - &::after { - position : absolute; - inset : 0; - z-index : -2; - display : block; - content : ''; - background-image : url('/assets/parchmentBackground.jpg'); + display : none; + content : 'Yes'; } - &:nth-child(even of .brewItem) { margin-right : 0; } + &:checked { + background : green; - h2 { - font-family : 'MrEavesRemake'; - font-size : 0.75cm; - font-weight : 800; - line-height : 0.988em; - color : var(--HB_Color_HeaderText); + &::before { display : none; } + &::after { display : block; } } - .info { - position : relative; - z-index : 2; - font-family : 'ScalySansRemake'; - font-size : 1.2em; - - >span { - margin-right : 12px; - line-height : 1.5em; - } - } - .links { z-index : 2; } - - hr { - margin : 0px; - visibility : hidden; - } - - .thumbnail { z-index : -1; } } + } - .paginationControls { - position : absolute; - left : 50%; - display : grid; - grid-template-areas : 'previousPage currentPage nextPage'; - grid-template-columns : 50px 1fr 50px; - place-items : center; - width : auto; - translate : -50%; - - .pages { - display : flex; - grid-area : currentPage; - justify-content : space-evenly; - width : 100%; - height : 100%; - padding : 5px 8px; - text-align : center; - - .pageNumber { - margin-inline : 1vw; - font-family : 'Open Sans'; - font-weight : 900; - color : white; - text-underline-position : under; - text-wrap : nowrap; - cursor : pointer; - - &.currentPage { - color : gold; - text-decoration : underline; - pointer-events : none; - } - - &.firstPage { margin-right : -5px; } - - &.lastPage { margin-left : -5px; } - } - } - - button { - width : max-content; - - &.previousPage { grid-area : previousPage; } - - &.nextPage { grid-area : nextPage; } - } + #searchButton { + position : absolute; + right : 20px; + bottom : 0; + i { + margin-left : 10px; + animation-duration : 1000s; } } } } + + &.resultsContainer { + display : flex; + flex-direction : column; + height : 100%; + overflow-y : auto; + font-family : 'BookInsanityRemake'; + font-size : 0.34cm; + + h3 { + font-family : 'Open Sans'; + font-weight : 900; + color : white; + } + + .sort-container { + display : flex; + flex-wrap : wrap; + column-gap : 15px; + justify-content : center; + height : 30px; + color : white; + background-color : #555555; + border-top : 1px solid #666666; + border-bottom : 1px solid #666666; + + .sort-option { + display : flex; + align-items : center; + padding : 0 8px; + + &:hover { background-color : #444444; } + + &.active { + background-color : #333333; + + button { + font-weight : 800; + color : white; + + & + .sortDir { padding-left : 5px; } + } + } + + button { + padding : 0; + font-size : 11px; + font-weight : normal; + color : #CCCCCC; + text-transform : uppercase; + background-color : transparent; + + &:hover { background : none; } + } + } + } + + .foundBrews { + position : relative; + width : 100%; + height : 100%; + max-height : 100%; + padding : 50px 50px 70px 50px; + overflow-y : scroll; + background-color : #2C3E50; + + h3 { font-size : 25px; } + + &.noBrews { + display : grid; + place-items : center; + color : white; + } + + &.searching { + display : grid; + place-items : center; + color : white; + + h3 { position : relative; } + + h3.searchAnim::after { + position : absolute; + top : 50%; + right : 0; + width : max-content; + height : 1em; + content : ''; + translate : calc(100% + 5px) -50%; + animation : trailingDots 2s ease infinite; + } + } + + .totalBrews { + position : fixed; + right : 0; + bottom : 0; + z-index : 1000; + padding : 8px 10px; + font-family : 'Open Sans'; + font-size : 11px; + font-weight : 800; + color : white; + background-color : #333333; + + .searchAnim { + position : relative; + display : inline-block; + width : 3ch; + height : 1em; + } + + .searchAnim::after { + position : absolute; + top : 50%; + right : 0; + width : max-content; + height : 1em; + content : ''; + translate : -50% -50%; + animation : trailingDots 2s ease infinite; + } + } + + .brewItem { + width : 47%; + margin-right : 40px; + color : black; + isolation : isolate; + + &::after { + position : absolute; + inset : 0; + z-index : -2; + display : block; + content : ''; + background-image : url('/assets/parchmentBackground.jpg'); + } + + &:nth-child(even of .brewItem) { margin-right : 0; } + + h2 { + font-family : 'MrEavesRemake'; + font-size : 0.75cm; + font-weight : 800; + line-height : 0.988em; + color : var(--HB_Color_HeaderText); + } + .info { + position : relative; + z-index : 2; + font-family : 'ScalySansRemake'; + font-size : 1.2em; + + >span { + margin-right : 12px; + line-height : 1.5em; + } + } + .links { z-index : 2; } + + hr { + margin : 0px; + visibility : hidden; + } + + .thumbnail { z-index : -1; } + } + + .paginationControls { + position : absolute; + left : 50%; + display : grid; + grid-template-areas : 'previousPage currentPage nextPage'; + grid-template-columns : 50px 1fr 50px; + place-items : center; + width : auto; + translate : -50%; + + .pages { + display : flex; + grid-area : currentPage; + justify-content : space-evenly; + width : 100%; + height : 100%; + padding : 5px 8px; + text-align : center; + + .pageNumber { + margin-inline : 1vw; + font-family : 'Open Sans'; + font-weight : 900; + color : white; + text-underline-position : under; + text-wrap : nowrap; + cursor : pointer; + + &.currentPage { + color : gold; + text-decoration : underline; + pointer-events : none; + } + + &.firstPage { margin-right : -5px; } + + &.lastPage { margin-left : -5px; } + } + } + + button { + width : max-content; + + &.previousPage { grid-area : previousPage; } + + &.nextPage { grid-area : nextPage; } + } + + } + } + } } + } @keyframes trailingDots { @@ -388,7 +384,7 @@ // media query for when the page is smaller than 1079 px in width @media screen and (max-width : 1079px) { - .vaultPage .content { + .vaultPage { .dataGroup.form .brewLookup { padding : 1px 20px 20px 10px; } diff --git a/client/homebrew/utils/customIDBStore.js b/client/homebrew/utils/customIDBStore.js new file mode 100644 index 000000000..6a3c84400 --- /dev/null +++ b/client/homebrew/utils/customIDBStore.js @@ -0,0 +1,19 @@ +import * as IDB from 'idb-keyval/dist/index.js'; + +export function initCustomStore(db, store){ + const createCustomStore = async ()=>IDB.createStore(db, store); + + return { + entries : async ()=>IDB.entries(await createCustomStore()), + keys : async ()=>IDB.keys(await createCustomStore()), + values : async ()=>IDB.values(await createCustomStore()), + clear : async ()=>IDB.clear(await createCustomStore), + get : async (key)=>IDB.get(key, await createCustomStore()), + getMany : async (keys)=>IDB.getMany(keys, await createCustomStore()), + set : async (key, value)=>IDB.set(key, value, await createCustomStore()), + setMany : async (entries)=>IDB.setMany(entries, await createCustomStore()), + update : async (key, updateFn)=>IDB.update(key, updateFn, await createCustomStore()), + del : async (key)=>IDB.del(key, await createCustomStore()), + delMany : async (keys)=>IDB.delMany(keys, await createCustomStore()) + }; +}; \ No newline at end of file diff --git a/client/homebrew/utils/versionHistory.js b/client/homebrew/utils/versionHistory.js index a23af844a..ec3bd74e1 100644 --- a/client/homebrew/utils/versionHistory.js +++ b/client/homebrew/utils/versionHistory.js @@ -1,4 +1,4 @@ -import * as IDB from 'idb-keyval/dist/index.js'; +import { initCustomStore } from './customIDBStore.js'; export const HISTORY_PREFIX = 'HOMEBREWERY-HISTORY'; export const HISTORY_SLOTS = 5; @@ -21,13 +21,15 @@ const HISTORY_SAVE_DELAYS = { // '5' : 5 // }; -const HB_DB = 'HOMEBREWERY-DB'; -const HB_STORE = 'HISTORY'; - const GARBAGE_COLLECT_DELAY = 28 * 24 * 60; // const GARBAGE_COLLECT_DELAY = 10; +const HB_DB = 'HOMEBREWERY-DB'; +const HB_STORE = 'HISTORY'; + +const IDB = initCustomStore(HB_DB, HB_STORE); + function getKeyBySlot(brew, slot){ // Return a string representing the key for this brew and history slot return `${HISTORY_PREFIX}-${brew.shareId}-${slot}`; @@ -53,11 +55,6 @@ function parseBrewForStorage(brew, slot = 0) { return [key, archiveBrew]; } -// Create a custom IDB store -async function createHBStore(){ - return await IDB.createStore(HB_DB, HB_STORE); -} - export async function loadHistory(brew){ const DEFAULT_HISTORY_ITEM = { expireAt: '2000-01-01T00:00:00.000Z', shareId: brew.shareId, noData: true }; @@ -69,7 +66,7 @@ export async function loadHistory(brew){ }; // Load all keys from IDB at once - const dataArray = await IDB.getMany(historyKeys, await createHBStore()); + const dataArray = await IDB.getMany(historyKeys); return dataArray.map((data)=>{ return data ?? DEFAULT_HISTORY_ITEM; }); } @@ -97,7 +94,7 @@ export async function updateHistory(brew) { // Update the most recent brew historyUpdate.push(parseBrewForStorage(brew, 1)); - await IDB.setMany(historyUpdate, await createHBStore()); + await IDB.setMany(historyUpdate); // Break out of data checks because we found an expired value break; @@ -106,14 +103,17 @@ export async function updateHistory(brew) { }; export async function versionHistoryGarbageCollection(){ + const entries = await IDB.entries(); - const entries = await IDB.entries(await createHBStore()); - + const expiredKeys = []; for (const [key, value] of entries){ const expireAt = new Date(value.savedAt); expireAt.setMinutes(expireAt.getMinutes() + GARBAGE_COLLECT_DELAY); if(new Date() > expireAt){ - await IDB.del(key, await createHBStore()); + expiredKeys.push(key); }; }; + if(expiredKeys.length > 0){ + await IDB.delMany(expiredKeys); + } }; \ No newline at end of file diff --git a/package-lock.json b/package-lock.json index 3cdad9cb9..6bf553002 100644 --- a/package-lock.json +++ b/package-lock.json @@ -58,6 +58,7 @@ "globals": "^15.11.0", "jest": "^29.7.0", "jest-expect-message": "^1.1.3", + "jsdom-global": "^3.0.2", "postcss-less": "^6.0.0", "stylelint": "^16.10.0", "stylelint-config-recess-order": "^5.1.1", @@ -5036,12 +5037,81 @@ "node": ">=4" } }, + "node_modules/cssstyle": { + "version": "4.1.0", + "resolved": "https://registry.npmjs.org/cssstyle/-/cssstyle-4.1.0.tgz", + "integrity": "sha512-h66W1URKpBS5YMI/V8PyXvTMFT8SupJ1IzoIV8IeBC/ji8WVmrO8dGlTi+2dh6whmdk6BiKJLD/ZBkhWbcg6nA==", + "dev": true, + "license": "MIT", + "peer": true, + "dependencies": { + "rrweb-cssom": "^0.7.1" + }, + "engines": { + "node": ">=18" + } + }, "node_modules/dash-ast": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/dash-ast/-/dash-ast-1.0.0.tgz", "integrity": "sha512-Vy4dx7gquTeMcQR/hDkYLGUnwVil6vk4FOOct+djUnHOUWt+zJPJAaRIXaAFkPXtJjvlY7o3rfRu0/3hpnwoUA==", "license": "Apache-2.0" }, + "node_modules/data-urls": { + "version": "5.0.0", + "resolved": "https://registry.npmjs.org/data-urls/-/data-urls-5.0.0.tgz", + "integrity": "sha512-ZYP5VBHshaDAiVZxjbRVcFJpc+4xGgT0bK3vzy1HLN8jTO975HEbuYzZJcHoQEY5K1a0z8YayJkyVETa08eNTg==", + "dev": true, + "license": "MIT", + "peer": true, + "dependencies": { + "whatwg-mimetype": "^4.0.0", + "whatwg-url": "^14.0.0" + }, + "engines": { + "node": ">=18" + } + }, + "node_modules/data-urls/node_modules/tr46": { + "version": "5.0.0", + "resolved": "https://registry.npmjs.org/tr46/-/tr46-5.0.0.tgz", + "integrity": "sha512-tk2G5R2KRwBd+ZN0zaEXpmzdKyOYksXwywulIX95MBODjSzMIuQnQ3m8JxgbhnL1LeVo7lqQKsYa1O3Htl7K5g==", + "dev": true, + "license": "MIT", + "peer": true, + "dependencies": { + "punycode": "^2.3.1" + }, + "engines": { + "node": ">=18" + } + }, + "node_modules/data-urls/node_modules/webidl-conversions": { + "version": "7.0.0", + "resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-7.0.0.tgz", + "integrity": "sha512-VwddBukDzu71offAQR975unBIGqfKZpM+8ZX6ySk8nYhVoo5CYaZyzt3YBvYtRtO+aoGlqxPg/B87NGVZ/fu6g==", + "dev": true, + "license": "BSD-2-Clause", + "peer": true, + "engines": { + "node": ">=12" + } + }, + "node_modules/data-urls/node_modules/whatwg-url": { + "version": "14.0.0", + "resolved": "https://registry.npmjs.org/whatwg-url/-/whatwg-url-14.0.0.tgz", + "integrity": "sha512-1lfMEm2IEr7RIV+f4lUNPOqfFL+pO+Xw3fJSqmjX9AbXcXcYOkCe1P6+9VBZB6n94af16NfZf+sSk0JCBZC9aw==", + "dev": true, + "license": "MIT", + "peer": true, + "dependencies": { + "tr46": "^5.0.0", + "webidl-conversions": "^7.0.0" + }, + "engines": { + "node": ">=18" + } + }, "node_modules/data-view-buffer": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/data-view-buffer/-/data-view-buffer-1.0.1.tgz", @@ -5112,6 +5182,14 @@ } } }, + "node_modules/decimal.js": { + "version": "10.4.3", + "resolved": "https://registry.npmjs.org/decimal.js/-/decimal.js-10.4.3.tgz", + "integrity": "sha512-VBBaLc1MgL5XpzgIP7ny5Z6Nx3UrRkIViUkPUdtl9aya5amy3De1gsUUSB1g3+3sExYNjCAsAznmukyxCb1GRA==", + "dev": true, + "license": "MIT", + "peer": true + }, "node_modules/decode-uri-component": { "version": "0.2.2", "resolved": "https://registry.npmjs.org/decode-uri-component/-/decode-uri-component-0.2.2.tgz", @@ -5446,6 +5524,20 @@ "node": ">= 0.8" } }, + "node_modules/entities": { + "version": "4.5.0", + "resolved": "https://registry.npmjs.org/entities/-/entities-4.5.0.tgz", + "integrity": "sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==", + "dev": true, + "license": "BSD-2-Clause", + "peer": true, + "engines": { + "node": ">=0.12" + }, + "funding": { + "url": "https://github.com/fb55/entities?sponsor=1" + } + }, "node_modules/env-paths": { "version": "2.2.1", "resolved": "https://registry.npmjs.org/env-paths/-/env-paths-2.2.1.tgz", @@ -7163,6 +7255,20 @@ "minimalistic-crypto-utils": "^1.0.1" } }, + "node_modules/html-encoding-sniffer": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/html-encoding-sniffer/-/html-encoding-sniffer-4.0.0.tgz", + "integrity": "sha512-Y22oTqIU4uuPgEemfz7NDJz6OeKf12Lsu+QC+s3BVpda64lTiMYCyGwg5ki4vFxkMwQdeZDl2adZoqUgdFuTgQ==", + "dev": true, + "license": "MIT", + "peer": true, + "dependencies": { + "whatwg-encoding": "^3.1.1" + }, + "engines": { + "node": ">=18" + } + }, "node_modules/html-escaper": { "version": "2.0.2", "resolved": "https://registry.npmjs.org/html-escaper/-/html-escaper-2.0.2.tgz", @@ -7208,6 +7314,21 @@ "node": ">= 0.8" } }, + "node_modules/http-proxy-agent": { + "version": "7.0.2", + "resolved": "https://registry.npmjs.org/http-proxy-agent/-/http-proxy-agent-7.0.2.tgz", + "integrity": "sha512-T1gkAiYYDWYx3V5Bmyu7HcfcvL7mUrTWiM6yOfa3PIphViJ/gFPbvidQ+veqSOHci/PxBcDabeUNCzpOODJZig==", + "dev": true, + "license": "MIT", + "peer": true, + "dependencies": { + "agent-base": "^7.1.0", + "debug": "^4.3.4" + }, + "engines": { + "node": ">= 14" + } + }, "node_modules/https-browserify": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/https-browserify/-/https-browserify-1.0.0.tgz", @@ -7768,6 +7889,14 @@ "node": ">=0.10.0" } }, + "node_modules/is-potential-custom-element-name": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/is-potential-custom-element-name/-/is-potential-custom-element-name-1.0.1.tgz", + "integrity": "sha512-bCYeRA2rVibKZd+s2625gGnGF/t7DSqDs4dP7CrLA1m7jKWz6pps0LpYLJN8Q64HtmPKJ1hrN3nzPNKFEKOUiQ==", + "dev": true, + "license": "MIT", + "peer": true + }, "node_modules/is-regex": { "version": "1.1.4", "resolved": "https://registry.npmjs.org/is-regex/-/is-regex-1.1.4.tgz", @@ -9770,6 +9899,121 @@ "js-yaml": "bin/js-yaml.js" } }, + "node_modules/jsdom": { + "version": "25.0.1", + "resolved": "https://registry.npmjs.org/jsdom/-/jsdom-25.0.1.tgz", + "integrity": "sha512-8i7LzZj7BF8uplX+ZyOlIz86V6TAsSs+np6m1kpW9u0JWi4z/1t+FzcK1aek+ybTnAC4KhBL4uXCNT0wcUIeCw==", + "dev": true, + "license": "MIT", + "peer": true, + "dependencies": { + "cssstyle": "^4.1.0", + "data-urls": "^5.0.0", + "decimal.js": "^10.4.3", + "form-data": "^4.0.0", + "html-encoding-sniffer": "^4.0.0", + "http-proxy-agent": "^7.0.2", + "https-proxy-agent": "^7.0.5", + "is-potential-custom-element-name": "^1.0.1", + "nwsapi": "^2.2.12", + "parse5": "^7.1.2", + "rrweb-cssom": "^0.7.1", + "saxes": "^6.0.0", + "symbol-tree": "^3.2.4", + "tough-cookie": "^5.0.0", + "w3c-xmlserializer": "^5.0.0", + "webidl-conversions": "^7.0.0", + "whatwg-encoding": "^3.1.1", + "whatwg-mimetype": "^4.0.0", + "whatwg-url": "^14.0.0", + "ws": "^8.18.0", + "xml-name-validator": "^5.0.0" + }, + "engines": { + "node": ">=18" + }, + "peerDependencies": { + "canvas": "^2.11.2" + }, + "peerDependenciesMeta": { + "canvas": { + "optional": true + } + } + }, + "node_modules/jsdom-global": { + "version": "3.0.2", + "resolved": "https://registry.npmjs.org/jsdom-global/-/jsdom-global-3.0.2.tgz", + "integrity": "sha512-t1KMcBkz/pT5JrvcJbpUR2u/w1kO9jXctaaGJ0vZDzwFnIvGWw9IDSRciT83kIs8Bnw4qpOl8bQK08V01YgMPg==", + "dev": true, + "license": "MIT", + "peerDependencies": { + "jsdom": ">=10.0.0" + } + }, + "node_modules/jsdom/node_modules/tr46": { + "version": "5.0.0", + "resolved": "https://registry.npmjs.org/tr46/-/tr46-5.0.0.tgz", + "integrity": "sha512-tk2G5R2KRwBd+ZN0zaEXpmzdKyOYksXwywulIX95MBODjSzMIuQnQ3m8JxgbhnL1LeVo7lqQKsYa1O3Htl7K5g==", + "dev": true, + "license": "MIT", + "peer": true, + "dependencies": { + "punycode": "^2.3.1" + }, + "engines": { + "node": ">=18" + } + }, + "node_modules/jsdom/node_modules/webidl-conversions": { + "version": "7.0.0", + "resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-7.0.0.tgz", + "integrity": "sha512-VwddBukDzu71offAQR975unBIGqfKZpM+8ZX6ySk8nYhVoo5CYaZyzt3YBvYtRtO+aoGlqxPg/B87NGVZ/fu6g==", + "dev": true, + "license": "BSD-2-Clause", + "peer": true, + "engines": { + "node": ">=12" + } + }, + "node_modules/jsdom/node_modules/whatwg-url": { + "version": "14.0.0", + "resolved": "https://registry.npmjs.org/whatwg-url/-/whatwg-url-14.0.0.tgz", + "integrity": "sha512-1lfMEm2IEr7RIV+f4lUNPOqfFL+pO+Xw3fJSqmjX9AbXcXcYOkCe1P6+9VBZB6n94af16NfZf+sSk0JCBZC9aw==", + "dev": true, + "license": "MIT", + "peer": true, + "dependencies": { + "tr46": "^5.0.0", + "webidl-conversions": "^7.0.0" + }, + "engines": { + "node": ">=18" + } + }, + "node_modules/jsdom/node_modules/ws": { + "version": "8.18.0", + "resolved": "https://registry.npmjs.org/ws/-/ws-8.18.0.tgz", + "integrity": "sha512-8VbfWfHLbbwu3+N6OKsOMpBdT4kXPDDB9cJk2bJ6mh9ucxdlnNvH1e+roYkKmN9Nxw2yjz7VzeO9oOz2zJ04Pw==", + "dev": true, + "license": "MIT", + "peer": true, + "engines": { + "node": ">=10.0.0" + }, + "peerDependencies": { + "bufferutil": "^4.0.1", + "utf-8-validate": ">=5.0.2" + }, + "peerDependenciesMeta": { + "bufferutil": { + "optional": true + }, + "utf-8-validate": { + "optional": true + } + } + }, "node_modules/jsesc": { "version": "3.0.2", "resolved": "https://registry.npmjs.org/jsesc/-/jsesc-3.0.2.tgz", @@ -11039,6 +11283,14 @@ "node": ">=8" } }, + "node_modules/nwsapi": { + "version": "2.2.13", + "resolved": "https://registry.npmjs.org/nwsapi/-/nwsapi-2.2.13.tgz", + "integrity": "sha512-cTGB9ptp9dY9A5VbMSe7fQBcl/tt22Vcqdq8+eN93rblOuE0aCFu4aZ2vMwct/2t+lFnosm8RkQW1I0Omb1UtQ==", + "dev": true, + "license": "MIT", + "peer": true + }, "node_modules/object-assign": { "version": "4.1.1", "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz", @@ -11371,6 +11623,20 @@ "url": "https://github.com/sponsors/sindresorhus" } }, + "node_modules/parse5": { + "version": "7.2.1", + "resolved": "https://registry.npmjs.org/parse5/-/parse5-7.2.1.tgz", + "integrity": "sha512-BuBYQYlv1ckiPdQi/ohiivi9Sagc9JG+Ozs0r7b/0iK3sKmrb0b9FdWdBbOdx6hBCM/F9Ir82ofnBhtZOjCRPQ==", + "dev": true, + "license": "MIT", + "peer": true, + "dependencies": { + "entities": "^4.5.0" + }, + "funding": { + "url": "https://github.com/inikulin/parse5?sponsor=1" + } + }, "node_modules/parseurl": { "version": "1.3.3", "resolved": "https://registry.npmjs.org/parseurl/-/parseurl-1.3.3.tgz", @@ -12386,6 +12652,14 @@ "inherits": "^2.0.1" } }, + "node_modules/rrweb-cssom": { + "version": "0.7.1", + "resolved": "https://registry.npmjs.org/rrweb-cssom/-/rrweb-cssom-0.7.1.tgz", + "integrity": "sha512-TrEMa7JGdVm0UThDJSx7ddw5nVm3UJS9o9CCIZ72B1vSyEZoziDqBYP3XIoi/12lKrJR8rE3jeFHMok2F/Mnsg==", + "dev": true, + "license": "MIT", + "peer": true + }, "node_modules/run-parallel": { "version": "1.2.0", "resolved": "https://registry.npmjs.org/run-parallel/-/run-parallel-1.2.0.tgz", @@ -12491,6 +12765,20 @@ "truncate-utf8-bytes": "^1.0.0" } }, + "node_modules/saxes": { + "version": "6.0.0", + "resolved": "https://registry.npmjs.org/saxes/-/saxes-6.0.0.tgz", + "integrity": "sha512-xAg7SOnEhrm5zI3puOOKyy1OMcMlIJZYNJY7xLBwSze0UjhPLnWfj2GF2EpT0jmzaJKIWKHLsaSSajf35bcYnA==", + "dev": true, + "license": "ISC", + "peer": true, + "dependencies": { + "xmlchars": "^2.2.0" + }, + "engines": { + "node": ">=v12.22.7" + } + }, "node_modules/scheduler": { "version": "0.23.2", "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.23.2.tgz", @@ -13688,6 +13976,14 @@ "integrity": "sha512-ovssysQTa+luh7A5Weu3Rta6FJlFBBbInjOh722LIt6klpU2/HtdUbszju/G4devcvk8PGt7FCLv5wftu3THUA==", "dev": true }, + "node_modules/symbol-tree": { + "version": "3.2.4", + "resolved": "https://registry.npmjs.org/symbol-tree/-/symbol-tree-3.2.4.tgz", + "integrity": "sha512-9QNk5KwDF+Bvz+PyObkmSYjI5ksVUYtjW7AU22r2NKcfLJcXp96hkDWU3+XndOsUb+AQ9QhfzfCT2O+CNWT5Tw==", + "dev": true, + "license": "MIT", + "peer": true + }, "node_modules/syntax-error": { "version": "1.4.0", "resolved": "https://registry.npmjs.org/syntax-error/-/syntax-error-1.4.0.tgz", @@ -13787,6 +14083,28 @@ "node": ">=0.6.0" } }, + "node_modules/tldts": { + "version": "6.1.56", + "resolved": "https://registry.npmjs.org/tldts/-/tldts-6.1.56.tgz", + "integrity": "sha512-2PT1oRZCxtsbLi5R2SQjE/v4vvgRggAtVcYj+3Rrcnu2nPZvu7m64+gDa/EsVSWd3QzEc0U0xN+rbEKsJC47kA==", + "dev": true, + "license": "MIT", + "peer": true, + "dependencies": { + "tldts-core": "^6.1.56" + }, + "bin": { + "tldts": "bin/cli.js" + } + }, + "node_modules/tldts-core": { + "version": "6.1.56", + "resolved": "https://registry.npmjs.org/tldts-core/-/tldts-core-6.1.56.tgz", + "integrity": "sha512-Ihxv/Bwiyj73icTYVgBUkQ3wstlCglLoegSgl64oSrGUBX1hc7Qmf/CnrnJLaQdZrCnTaLqMYOwKMKlkfkFrxQ==", + "dev": true, + "license": "MIT", + "peer": true + }, "node_modules/tmpl": { "version": "1.0.5", "resolved": "https://registry.npmjs.org/tmpl/-/tmpl-1.0.5.tgz", @@ -13926,6 +14244,20 @@ "nodetouch": "bin/nodetouch.js" } }, + "node_modules/tough-cookie": { + "version": "5.0.0", + "resolved": "https://registry.npmjs.org/tough-cookie/-/tough-cookie-5.0.0.tgz", + "integrity": "sha512-FRKsF7cz96xIIeMZ82ehjC3xW2E+O2+v11udrDYewUbszngYhsGa8z6YUMMzO9QJZzzyd0nGGXnML/TReX6W8Q==", + "dev": true, + "license": "BSD-3-Clause", + "peer": true, + "dependencies": { + "tldts": "^6.1.32" + }, + "engines": { + "node": ">=16" + } + }, "node_modules/tr46": { "version": "0.0.3", "resolved": "https://registry.npmjs.org/tr46/-/tr46-0.0.3.tgz", @@ -14507,6 +14839,20 @@ "integrity": "sha512-2ham8XPWTONajOR0ohOKOHXkm3+gaBmGut3SRuu75xLd/RRaY6vqgh8NBYYk7+RW3u5AtzPQZG8F10LHkl0lAQ==", "license": "MIT" }, + "node_modules/w3c-xmlserializer": { + "version": "5.0.0", + "resolved": "https://registry.npmjs.org/w3c-xmlserializer/-/w3c-xmlserializer-5.0.0.tgz", + "integrity": "sha512-o8qghlI8NZHU1lLPrpi2+Uq7abh4GGPpYANlalzWxyWteJOCsr/P+oPBA49TOLu5FTZO4d3F9MnWJfiMo4BkmA==", + "dev": true, + "license": "MIT", + "peer": true, + "dependencies": { + "xml-name-validator": "^5.0.0" + }, + "engines": { + "node": ">=18" + } + }, "node_modules/walker": { "version": "1.0.8", "resolved": "https://registry.npmjs.org/walker/-/walker-1.0.8.tgz", @@ -14832,6 +15178,45 @@ "integrity": "sha512-2JAn3z8AR6rjK8Sm8orRC0h/bcl/DqL7tRPdGZ4I1CjdF+EaMLmYxBHyXuKL849eucPFhvBoxMsflfOb8kxaeQ==", "license": "BSD-2-Clause" }, + "node_modules/whatwg-encoding": { + "version": "3.1.1", + "resolved": "https://registry.npmjs.org/whatwg-encoding/-/whatwg-encoding-3.1.1.tgz", + "integrity": "sha512-6qN4hJdMwfYBtE3YBTTHhoeuUrDBPZmbQaxWAqSALV/MeEnR5z1xd8UKud2RAkFoPkmB+hli1TZSnyi84xz1vQ==", + "dev": true, + "license": "MIT", + "peer": true, + "dependencies": { + "iconv-lite": "0.6.3" + }, + "engines": { + "node": ">=18" + } + }, + "node_modules/whatwg-encoding/node_modules/iconv-lite": { + "version": "0.6.3", + "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.6.3.tgz", + "integrity": "sha512-4fCk79wshMdzMp2rH06qWrJE4iolqLhCUH+OiuIgU++RB0+94NlDL81atO7GX55uUKueo0txHNtvEyI6D7WdMw==", + "dev": true, + "license": "MIT", + "peer": true, + "dependencies": { + "safer-buffer": ">= 2.1.2 < 3.0.0" + }, + "engines": { + "node": ">=0.10.0" + } + }, + "node_modules/whatwg-mimetype": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/whatwg-mimetype/-/whatwg-mimetype-4.0.0.tgz", + "integrity": "sha512-QaKxh0eNIi2mE9p2vEdzfagOKHCcj1pJ56EEHGQOVxp8r9/iszLUUV7v89x9O1p/T+NlTM5W7jW6+cz4Fq1YVg==", + "dev": true, + "license": "MIT", + "peer": true, + "engines": { + "node": ">=18" + } + }, "node_modules/whatwg-url": { "version": "5.0.0", "resolved": "https://registry.npmjs.org/whatwg-url/-/whatwg-url-5.0.0.tgz", @@ -15040,6 +15425,25 @@ } } }, + "node_modules/xml-name-validator": { + "version": "5.0.0", + "resolved": "https://registry.npmjs.org/xml-name-validator/-/xml-name-validator-5.0.0.tgz", + "integrity": "sha512-EvGK8EJ3DhaHfbRlETOWAS5pO9MZITeauHKJyb8wyajUfQUenkIg2MvLDTZ4T/TgIcm3HU0TFBgWWboAZ30UHg==", + "dev": true, + "license": "Apache-2.0", + "peer": true, + "engines": { + "node": ">=18" + } + }, + "node_modules/xmlchars": { + "version": "2.2.0", + "resolved": "https://registry.npmjs.org/xmlchars/-/xmlchars-2.2.0.tgz", + "integrity": "sha512-JZnDKK8B0RCDw84FNdDAIpZK+JuJw+s7Lz8nksI7SIuU3UXJJslUthsi+uWBUYOwPFwW7W7PRLRfUKpxjtjFCw==", + "dev": true, + "license": "MIT", + "peer": true + }, "node_modules/xtend": { "version": "4.0.2", "resolved": "https://registry.npmjs.org/xtend/-/xtend-4.0.2.tgz", diff --git a/package.json b/package.json index 94d0122ab..85300746d 100644 --- a/package.json +++ b/package.json @@ -38,6 +38,7 @@ "test:hard-breaks": "jest tests/markdown/hard-breaks.test.js --verbose --noStackTrace", "test:emojis": "jest tests/markdown/emojis.test.js --verbose --noStackTrace", "test:route": "jest tests/routes/static-pages.test.js --verbose", + "test:safehtml": "jest tests/html/safeHTML.test.js --verbose", "phb": "node --experimental-require-module scripts/phb.js", "prod": "set NODE_ENV=production && npm run build", "postinstall": "npm run build", @@ -134,6 +135,7 @@ "globals": "^15.11.0", "jest": "^29.7.0", "jest-expect-message": "^1.1.3", + "jsdom-global": "^3.0.2", "postcss-less": "^6.0.0", "stylelint": "^16.10.0", "stylelint-config-recess-order": "^5.1.1", diff --git a/tests/html/safeHTML.test.js b/tests/html/safeHTML.test.js new file mode 100644 index 000000000..51fa1e995 --- /dev/null +++ b/tests/html/safeHTML.test.js @@ -0,0 +1,50 @@ + + +require('jsdom-global')(); + +import { safeHTML } from '../../client/homebrew/brewRenderer/safeHTML'; + +test('Javascript via href', function() { + const source = `Click me`; + const rendered = safeHTML(source); + expect(rendered).toBe('Click me'); +}); + +test('Javascript via src', function() { + const source = ``; + const rendered = safeHTML(source); + expect(rendered).toBe(''); +}); + +test('Javascript via form submit action', function() { + const source = `
\n\n
`; + const rendered = safeHTML(source); + expect(rendered).toBe('
\n\n
'); +}); + +test('Javascript via inline event handler - onClick', function() { + const source = `
\nClick me\n
`; + const rendered = safeHTML(source); + expect(rendered).toBe('
\nClick me\n
'); +}); + +test('Javascript via inline event handler - onMouseOver', function() { + const source = `
Hover over me
`; + const rendered = safeHTML(source); + expect(rendered).toBe('
Hover over me
'); +}); + +test('Javascript via data attribute', function() { + const source = `
Test
`; + const rendered = safeHTML(source); + expect(rendered).toBe('
Test
'); +}); + +test('Javascript via event delegation', function() { + const source = `
`; + const rendered = safeHTML(source); + expect(rendered).toBe('
'); +}); + + +