dependency: added DOMPurify

uyen18827 · Sep 5, 2021 · e5ff08c · e5ff08c
1 parent 580bdd7
commit e5ff08c
Show file tree

Hide file tree

Showing 4 changed files with 65 additions and 19 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -38,5 +38,9 @@
         "buildResources": "electron/buildResources"
       }
     }
+  },
+  "dependencies": {
+    "@types/dompurify": "^2.2.3",
+    "dompurify": "^2.3.1"
   }
 }
diff --git a/src/core/inventory/inventory.ts b/src/core/inventory/inventory.ts
@@ -1,6 +1,7 @@
 import { inventoryItem, Items } from "../model/item";
 import { Paragraphs } from "../model/paragraph";
 import { capitalise } from "../../tools/formatting";
+import DOMPurify from 'DOMPurify';
 
 export let inventory: Array<inventoryItem> = [];
 
@@ -47,16 +48,16 @@ export function getItem(item: Items, pName: Paragraphs["name"]) {
         if (inInventory.item.itemQty == 0) {
             removeItemHTML(inInventory.item.itemCode)
         }
-        else{
-        console.log(`${item.itemName} is already in the inventory. Adding 1 to quantity.`);
-        console.log(inventory);
-        //update item quantity on view
-        let quantityDiv = document.querySelector(`#${item.itemCode}-quantity`);
-        quantityDiv!.textContent = `Quantity: ${inInventory.item.itemQty}`;
-        let pNameCheck = inInventory.pickedUpLocation.find(location => location == pName);
-        console.log(pNameCheck, pName)
-        if (!pNameCheck) {
-            inInventory.pickedUpLocation.push(pName);
+        else {
+            console.log(`${item.itemName} is already in the inventory. Adding 1 to quantity.`);
+            console.log(inventory);
+            //update item quantity on view
+            let quantityDiv = document.querySelector(`#${item.itemCode}-quantity`);
+            quantityDiv!.textContent = `Quantity: ${inInventory.item.itemQty}`;
+            let pNameCheck = inInventory.pickedUpLocation.find(location => location == pName);
+            console.log(pNameCheck, pName)
+            if (!pNameCheck) {
+                inInventory.pickedUpLocation.push(pName);
             }
         }
     }
@@ -98,7 +99,7 @@ export function appendItemHTML(item: Items) {
         role="tab" 
         aria-controls="pills-${item.itemCode}" aria-selected="false">${capitalise(item.itemName)}</a>
         </li>`;
-    inventoryTab.innerHTML += tab;
+    inventoryTab.innerHTML += DOMPurify.sanitize(tab);
 
     let tabContent: string = `<div class="tab-pane fade" 
     id="pills-${item.itemCode}" 
@@ -107,7 +108,7 @@ export function appendItemHTML(item: Items) {
     ${item.description}
     <div id="${item.itemCode}-quantity">Quantity: ${item.itemQty}</div>
     </div>`
-    inventoryTabContent.innerHTML += tabContent;
+    inventoryTabContent.innerHTML += DOMPurify.sanitize(tabContent);
 }
 /**
  * Clear all item from Inventory interface

diff --git a/src/core/script/saveScript.ts b/src/core/script/saveScript.ts
@@ -5,6 +5,7 @@ import { Save } from "../model/save";
 import { getCurrentParagraphName, updateParagraph } from "../paragraphs/paragraphFunctions";
 import { getPlayer, setPlayer, showNameDiv } from "../player/playerInfo";
 import { loadPronounsRadioBtn, showPronouns } from "../player/pronouns";
+import * as DOMPurify from 'DOMPurify';
 
 /**
  * Create a new save and stringify it.
@@ -81,8 +82,8 @@ export function exportStorageSave(saveSlot: string) {
     let retrievedSave = localStorage.getItem(saveSlot);
     let saveMessage = document.querySelector('#exportMessage');
     saveMessage!.textContent = null; //clear old message
-    saveMessage!.innerHTML += `Save exported from ${saveSlot}.<br> 
-    Copy and keep the code bellow to load later`;
+    saveMessage!.innerHTML += DOMPurify.sanitize(`Save exported from ${saveSlot}.<br>
+    Copy and keep the code bellow to load later`);
     let saveOutput = document.querySelector(`#saveOutput`);
     (<HTMLInputElement>saveOutput).value = ``; //clear old save
     (<HTMLInputElement>saveOutput).value = `${btoa(retrievedSave!)}`; //encode to Base64
@@ -96,8 +97,8 @@ export function exportStorageSave(saveSlot: string) {
 export function exportSave() {
     let saveMessage = document.querySelector('#exportMessage');
     saveMessage!.textContent = null; //clear old message
-    saveMessage!.innerHTML += `Save created at ${new Date().toLocaleString()}.<br> 
-    Copy and keep the code bellow to load later`
+    saveMessage!.innerHTML += DOMPurify.sanitize(`Save created at ${new Date().toLocaleString()}.<br>
+    Copy and keep the code bellow to load later`);
     let saveOutput = document.querySelector(`#saveOutput`);
     (<HTMLInputElement>saveOutput).value = ``; //clear old save
     (<HTMLInputElement>saveOutput).value += `${btoa(save())}`; //encode to Base64
@@ -116,10 +117,10 @@ export function loadSaveCode() {
     console.log(retrievedSave)
     load(retrievedSave);
     let loadMessage = document.querySelector(`#exportMessage`);
-    loadMessage!.innerHTML += `<div class="alert alert-warning alert-dismissible fade show mt-1" role="alert">
+    loadMessage!.innerHTML += DOMPurify.sanitize(`<div class="alert alert-warning alert-dismissible fade show mt-1" role="alert">
         <strong> Load Success! </strong> Loaded save from ${retrievedSave.date}.
             <button type = "button" class="btn-close" data - bs - dismiss="alert" aria - label="Close"> </button>
-                </div>`;
+                </div>`);
     //TODO: verify if save is valid. 
     //TODO: fallback: If load is invalid, start new game.
 }
@@ -128,5 +129,5 @@ export function getSaveDesc(saveSlot: string) {
     let retrievedSave = JSON.parse(localStorage.getItem(saveSlot)!);
     let description = retrievedSave.date;
     let descContainer = document.querySelector(`#saveDesc-${saveSlot}`);
-    descContainer!.innerHTML = description;
+    descContainer!.innerHTML = DOMPurify.sanitize(description);
 }