Skip to content

Commit

Permalink
Sanitize user input fields on Automations page of web client
Browse files Browse the repository at this point in the history 
Use Dompurify to sanitize user input
  • Loading branch information
@debanjum
debanjum committed Jun 23, 2024
1 parent 1c7a562 commit 55be90c
Show file tree
Hide file tree
Showing 2 changed files with 34 additions and 24 deletions.
1 change: 1 addition & 0 deletions src/khoj/interface/web/base_config.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.13/css/intlTelInput.css">
</head>
<script type="text/javascript" src="/static/assets/utils.js?v={{ khoj_version }}"></script>
<script type="text/javascript" src="/static/assets/purify.min.js?v={{ khoj_version }}"></script>
<body class="khoj-configure">
<div class="khoj-header-wrapper">
<div class="filler"></div>
Expand Down
57 changes: 33 additions & 24 deletions src/khoj/interface/web/config_automation.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -278,21 +278,25 @@ <h2 class="section-title">

function updateAutomationRow(automation) {
let automationId = automation.id;
let automationNextRun = `Next run at ${automation.next}\nCron: ${automation.crontime}`;
let automationSubject = DOMPurify.sanitize(automation.subject);
let automationSchedule = DOMPurify.sanitize(automation.schedule);
let automationQueryToRun = DOMPurify.sanitize(automation.query_to_run);
let automationCrontime = DOMPurify.sanitize(automation.crontime);
let automationNextRun = `Next run at ${automation.next}\nCron: ${automationCrontime}`;

let scheduleEl = document.getElementById(`automation-schedule-${automationId}`);
scheduleEl.setAttribute('data-original', automation.schedule);
scheduleEl.setAttribute('data-cron', automation.crontime);
scheduleEl.setAttribute('data-original', automationSchedule);
scheduleEl.setAttribute('data-cron', automationCrontime);
scheduleEl.setAttribute('title', automationNextRun);
scheduleEl.value = automation.schedule;
scheduleEl.value = automationSchedule;

let subjectEl = document.getElementById(`automation-subject-${automationId}`);
subjectEl.setAttribute('data-original', automation.subject);
subjectEl.value = automation.subject;
subjectEl.setAttribute('data-original', automationSubject);
subjectEl.value = automationSubject;

let queryEl = document.getElementById(`automation-queryToRun-${automationId}`);
queryEl.setAttribute('data-original', automation.query_to_run);
queryEl.value = automation.query_to_run;
queryEl.setAttribute('data-original', automationQueryToRun);
queryEl.value = automationQueryToRun;
}

function onClickEditAutomationCard(automationId) {
Expand Down Expand Up @@ -387,7 +391,11 @@ <h2 class="section-title">

function generateAutomationRow(automation, isSuggested=false) {
let automationId = automation.id;
let automationNextRun = `Next run at ${automation.next}\nCron: ${automation.crontime}`;
let automationSubject = DOMPurify.sanitize(automation.subject);
let automationSchedule = DOMPurify.sanitize(automation.schedule);
let automationQueryToRun = DOMPurify.sanitize(automation.query_to_run);
let automationCrontime = DOMPurify.sanitize(automation.crontime);
let automationNextRun = `Next run at ${automation.next}\nCron: ${automationCrontime}`;

// Create card top elements
let automationEl = document.createElement("div");
Expand Down Expand Up @@ -417,16 +425,16 @@ <h2 class="section-title">
subjectEl.id = `automation-subject-${automationId}`;
subjectEl.classList.add(automationId, "fake-input");
subjectEl.name = "subject";
subjectEl.setAttribute("data-original", automation.subject);
subjectEl.value = automation.subject;
subjectEl.setAttribute("data-original", automationSubject);
subjectEl.value = automationSubject;

// automation share link
let shareLinkEl = document.createElement("img");
shareLinkEl.id = `share-link-${automationId}`,
shareLinkEl.className = "automation-share-icon";
shareLinkEl.src = "/static/assets/icons/share.svg";
shareLinkEl.alt = "Share";
shareLinkEl.onclick = function(event) { copyShareLink(event, automationId, automation.subject, automation.crontime, automation.query_to_run); };
shareLinkEl.onclick = function(event) { copyShareLink(event, automationId, automationSubject, automationCrontime, automationQueryToRun); };

// automation edit action
let editIconEl = document.createElement("img");
Expand All @@ -441,18 +449,18 @@ <h2 class="section-title">
scheduleEl.id = `automation-schedule-${automationId}`;
scheduleEl.name = "schedule";
scheduleEl.classList.add("schedule", automationId, "fake-input");
scheduleEl.setAttribute("data-cron", automation.crontime);
scheduleEl.setAttribute("data-original", automation.schedule);
scheduleEl.setAttribute("data-cron", automationCrontime);
scheduleEl.setAttribute("data-original", automationSchedule);
scheduleEl.title = automationNextRun;
scheduleEl.value = automation.schedule;
scheduleEl.value = automationSchedule;

// automation query to run input
let queryToRunEl = document.createElement("textarea");
queryToRunEl.id = `automation-queryToRun-${automationId}`;
queryToRunEl.classList.add("automation-instructions", automationId, "fake-input");
queryToRunEl.setAttribute("data-original", automation.query_to_run);
queryToRunEl.setAttribute("data-original", automationQueryToRun);
queryToRunEl.name = "query-to-run";
queryToRunEl.textContent = automation.query_to_run;
queryToRunEl.textContent = automationQueryToRun;

// Create automation actions section
let automationButtonsEl = document.createElement("div");
Expand Down Expand Up @@ -576,9 +584,9 @@ <h2 class="section-title">
});
});
// Check if subject, crontime, query_to_run are all filled out. If so, show it as a populated suggested automation.
const subject = "{{ subject }}";
const crontime = "{{ crontime }}";
const query = "{{ queryToRun }}";
const subject = DOMPurify.sanitize("{{ subject }}");
const crontime = DOMPurify.sanitize("{{ crontime }}");
const query = DOMPurify.sanitize("{{ queryToRun }}");

if (subject && crontime && query) {
const preFilledAutomation = createPreFilledAutomation(subject, crontime, query);
Expand All @@ -590,9 +598,9 @@ <h2 class="section-title">
listAutomations();
} else {
// Check if subject, crontime, query_to_run are all filled out. If so, show it as a populated suggested automation.
const subject = "{{ subject }}";
const crontime = "{{ crontime }}";
const query = "{{ queryToRun }}";
const subject = DOMPurify.sanitize("{{ subject }}");
const crontime = DOMPurify.sanitize("{{ crontime }}");
const query = DOMPurify.sanitize("{{ queryToRun }}");

if (subject && crontime && query) {
const preFilledAutomation = createPreFilledAutomation(subject, crontime, query);
Expand Down Expand Up @@ -910,7 +918,8 @@ <h2 class="section-title">

let method = "POST";
if (!create) {
const subject = encodeURIComponent(document.getElementById(`automation-subject-${automationId}`).value);
const subjectEl = document.getElementById(`automation-subject-${automationId}`);
const subject = encodeURIComponent(subjectEl.value);
query_string += `&automation_id=${automationId}`;
query_string += `&subject=${subject}`;
method = "PUT"
Expand Down

0 comments on commit 55be90c

Please sign in to comment.