Day 26: Security & Clean Code

<p>A customer review (imagine it came from the database):</p>
<div id="unsafe" style="border:2px solid #dc2626;padding:8px;border-radius:8px"></div>
<div id="safe" style="border:2px solid #16a34a;padding:8px;border-radius:8px;margin-top:8px"></div>
<p id="alarm" style="color:#b91c1c;font-weight:700"></p>

<script>
const review = 'Tasty! <img src="x" onerror="document.querySelector(\'#alarm\').textContent=\'⚠️ Attacker code ran – it could have stolen your login!\'">';

document.querySelector('#unsafe').innerHTML = '❌ innerHTML: ' + review;       // executes the attacker’s code
document.querySelector('#safe').textContent = '✅ textContent: ' + review;     // shown as harmless text
</script>

function escapeHTML(value) {
  return String(value)
    .replaceAll('&', '&')
    .replaceAll('<', '&lt;')
    .replaceAll('>', '&gt;')
    .replaceAll('"', '&quot;')
    .replaceAll("'", '&#39;');
}
// a tagged template that escapes every ${value} automatically
function html(strings, ...values) {
  return strings.reduce((out, str, i) => out + str + (i < values.length ? escapeHTML(values[i]) : ''), '');
}

const review = { name: 'Rahul <script>steal()</script>', text: 'Best "ghewar" ever & fresh' };
console.log(html`<li><b>${review.name}</b>: ${review.text}</li>`);

function safeLink(url) {
  try {
    const u = new URL(url, 'https://sharmasweets.in');
    return ['http:', 'https:'].includes(u.protocol) ? u.href : '#';
  } catch { return '#'; }
}
console.log(safeLink('https://maps.google.com/?q=Johari+Bazaar'), safeLink('javascript:alert(1)'));

Content-Security-Policy: default-src 'self';
  script-src 'self' https://checkout.razorpay.com;
  img-src 'self' data: https:;
  style-src 'self' https://fonts.googleapis.com;
  font-src https://fonts.gstatic.com;
  connect-src 'self' https://codingeasily.in;
  frame-ancestors 'none'

# Even if an attacker injects <script>, the browser refuses scripts not on the list.