Quality Assurance - Issue Tracker

1

I’m trying to polish some aspects of my app, including sanitizing user input to avoid cross scripting. I tried following the instructions in dompurify - npm to apply it directly on the issue.html script, but it’s failing to work. My relevant code in issue.html is

<head>
    <title>Issue Tracker - Project Page</title>
    <link rel="icon" type="image/png" href="https://i.postimg.cc/wv8wh6B7/favicon-16x16.png" />
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="/public/style.css">
    <link rel="stylesheet" href="/public/style-issue.css">
    <script type="text/javascript" src="dist/purify.min.js"></script>
  </head>

and

const giveIssue = (ele) => {
          const open = ele.open;
          const id = ele._id;
          const title = ele.issue_title;
          // const title = DOMPurify.sanitize(ele.issue_title);
          const text = ele.issue_text;
          const createdBy = ele.created_by;
          const assignedTo = ele.assigned_to;
          let createdOn = new Date(ele.created_on);
          createdOn = createdOn.toLocaleString();
          createdOn = createdOn.replace(/\sm\./, 'm.');
          let updatedOn = new Date(ele.updated_on);
          updatedOn = updatedOn.toLocaleString();
          updatedOn = updatedOn.replace(/\sm\./, 'm.');
          let openstatus;
          (open) ? openstatus = 'open' : openstatus = 'closed';
          let single = [
            `<div class="issue ${openstatus}" id="${id}" data-title="${title}">`,
              `<p class="issueId">id: ${id}</p>`,
              `<h3 class="issueTitle">${title} - (${openstatus})</h3>`,
              '<button class="expandCollapse">▼</button>',
              '<a href="#" class="closeDelete closeIssue">close</a><a href="#" class="closeDelete deleteIssue">delete</a>',
              '<div class="issueContent">',
                '<hr>',
                `<p>${text}</p>`,
                '<br>',
                `<p><b>Status:</b> ${status}</p>`,
                `<p><b>Created by:</b> ${createdBy}</p>`,
                `<p><b>Assigned to:</b> ${assignedTo}</p>`,
                `<p><b>Created on:</b> ${createdOn}</p>`,
                `<p><b>Last updated:</b> ${updatedOn}</p>`,
              '</div>',
            '</div>'
          ];
          return single;
};

On my browser’s console I get that it failed to find the source, so I had to comment out the line where I tried to sanitize the title because it wouldn’t render any issue if I try to implement it.

I also tried referencing directly the github page as the source script (https://raw.githubusercontent.com/cure53/DOMPurify/main/dist/purify.min.js) but obviously it didn’t work either.

My project link’s is issue-tracker - Replit

Thanks in advance

2

You do not have a dist folder with the lib inside it on Replit. Try using a CDN, or download it and put it somewhere in the source files.

3

Thanks a lot! I will definitely take a look at CDN. I have to mention that I also tried copying the git hub file and including it in a dist folder, just as you suggested, but it didn’t work so I guess I did something wrong there, maybe copied the wrong file. But I’ll let you know after trying the other method.