Quality Assurance - Issue Tracker

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

    <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>


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">',
                `<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>`,
          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

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.

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.

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.