Never directly concatenate untrusted data (like user inputs or API responses) into HTML strings, as this creates cross-site scripting (XSS) vulnerabilities. Instead, create the HTML structure first, then populate content using safe DOM manipulation methods like jQuery's .text() or native JavaScript's .textContent that automatically escape special characters.
Never directly concatenate untrusted data (like user inputs or API responses) into HTML strings, as this creates cross-site scripting (XSS) vulnerabilities. Instead, create the HTML structure first, then populate content using safe DOM manipulation methods like jQuery’s .text() or native JavaScript’s .textContent that automatically escape special characters.
Example - Vulnerable code:
innerHTML = '<div class="alert alert-warning">';
innerHTML += '<strong>Warning! </strong>' + data.log + ' </div>';
Example - Secure approach:
// Create HTML structure
innerHTML = `
<div class="alert alert-warning">
<span class="close" onclick="this.parentElement.style.display='none'">×</span>
<strong>Warning!</strong><span class='warning-log'></span>
</div>`;
// Safely set the content
const $e = $("#error-msgs").html(innerHTML);
$('.warning-log', $e).text(data.log);
Enter the URL of a public GitHub repository