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