Skip to content

Replace innerHTML with secure DOM APIs to prevent XSS #2

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
rwoll merged 3 commits into from
Jan 23, 2026
Merged

Replace innerHTML with secure DOM APIs to prevent XSS #2

Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
4dcfb7b
Initial plan
Copilot Jan 23, 2026
db3f61c
Replace innerHTML with secure DOM APIs to prevent XSS vulnerabilities
Copilot Jan 23, 2026
c0c2662
Refactor Option constructor calls for clarity
Copilot Jan 23, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
48 changes: 31 additions & 17 deletions app.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -76,16 +76,28 @@ function renderUpcomingDates() {
const container = document.getElementById('upcoming-dates');
const dates = getNextPatchTuesdays(12);

container.innerHTML = dates.map((date, index) => {
// Clear existing content
container.replaceChildren();

dates.forEach((date, index) => {
const daysAway = getDaysAway(date);
const isFirst = index === 0;
return `
<div class="date-item ${isFirst ? 'highlight' : ''}">
<span class="date">${formatDate(date)}</span>
<span class="badge ${isFirst ? 'primary' : ''}">${formatDaysAway(daysAway)}</span>
</div>
`;
}).join('');

const dateItem = document.createElement('div');
dateItem.className = isFirst ? 'date-item highlight' : 'date-item';

const dateSpan = document.createElement('span');
dateSpan.className = 'date';
dateSpan.textContent = formatDate(date);

const badgeSpan = document.createElement('span');
badgeSpan.className = isFirst ? 'badge primary' : 'badge';
badgeSpan.textContent = formatDaysAway(daysAway);

dateItem.appendChild(dateSpan);
dateItem.appendChild(badgeSpan);
container.appendChild(dateItem);
});
}

/**
Expand All @@ -107,19 +119,21 @@ function populateSelectors() {
'July', 'August', 'September', 'October', 'November', 'December'
];

monthSelect.innerHTML = months.map((month, index) =>
`<option value="${index}" ${index === defaultMonth ? 'selected' : ''}>${month}</option>`
).join('');
// Clear existing options and populate months
monthSelect.replaceChildren();
months.forEach((month, index) => {
const isSelected = index === defaultMonth;
const option = new Option(month, index, isSelected, isSelected);
monthSelect.add(option);
});

// Populate years (5 years before to 10 years after current year)
const years = [];
yearSelect.replaceChildren();
for (let y = currentYear - 5; y <= currentYear + 10; y++) {
years.push(y);
const isSelected = y === defaultYear;
const option = new Option(y, y, isSelected, isSelected);
yearSelect.add(option);
}

yearSelect.innerHTML = years.map(year =>
`<option value="${year}" ${year === defaultYear ? 'selected' : ''}>${year}</option>`
).join('');
}

/**
Expand Down
Loading