Source Code: (back to article)
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Sanitize Input Example</title>
<script>
function sanitizeInput(input) {
// This function replaces less-than and greater-than characters with HTML entities
// to prevent malicious scripts from executing when the input is rendered as HTML.
const sanitized = input.replace(/</g, '&lt;').replace(/>/g, '&gt;');
return sanitized;
}
function displaySanitizedInput() {
const unsafeInput = document.getElementById('unsafeInput').value;
const sanitized = sanitizeInput(unsafeInput);
document.getElementById('output').textContent = sanitized;
}
</script>
</head>
<body>
<h1>Input Sanitization Example</h1>
<p>
Enter any HTML content below, including potentially harmful scripts.
The example will sanitize the input to prevent script execution,
displaying how it would be rendered safely on a web page.
</p>
<label for="unsafeInput">Enter unsafe content:</label>
<input
type="text"
id="unsafeInput"
value="<script>alert('hack')</script>"
/>
<button onclick="displaySanitizedInput()">Sanitize and Display</button>
<p>
<span style="color:gray">Sanitized Output:</span>
<span id="output"></span>