127 lines
3.7 KiB
HTML
127 lines
3.7 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8" />
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||
<title>Products Button Test</title>
|
||
<link rel="icon" type="image/png" href="/admin/favicon.png" />
|
||
<style>
|
||
body {
|
||
font-family: Arial, sans-serif;
|
||
max-width: 800px;
|
||
margin: 50px auto;
|
||
padding: 20px;
|
||
}
|
||
.test-section {
|
||
background: #f5f5f5;
|
||
padding: 20px;
|
||
margin: 20px 0;
|
||
border-radius: 8px;
|
||
}
|
||
.btn {
|
||
padding: 10px 20px;
|
||
margin: 10px;
|
||
border: none;
|
||
border-radius: 5px;
|
||
cursor: pointer;
|
||
font-size: 16px;
|
||
}
|
||
.btn-primary {
|
||
background: #007bff;
|
||
color: white;
|
||
}
|
||
.btn-primary:hover {
|
||
background: #0056b3;
|
||
}
|
||
.status {
|
||
padding: 10px;
|
||
margin: 10px 0;
|
||
border-radius: 5px;
|
||
}
|
||
.success {
|
||
background: #d4edda;
|
||
color: #155724;
|
||
}
|
||
.error {
|
||
background: #f8d7da;
|
||
color: #721c24;
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<h1>🧪 Products Button Test</h1>
|
||
<p>Testing if the "Add New Product" button works without CSP errors.</p>
|
||
|
||
<div class="test-section">
|
||
<h3>Test 1: Event Listener (Recommended)</h3>
|
||
<button class="btn btn-primary" id="testBtn1">
|
||
➕ Test Button with Event Listener
|
||
</button>
|
||
<div id="result1"></div>
|
||
</div>
|
||
|
||
<div class="test-section">
|
||
<h3>Test 2: Inline Handler (With CSP Fix)</h3>
|
||
<button class="btn btn-primary" onclick="testInlineHandler()">
|
||
➕ Test Button with Inline Handler
|
||
</button>
|
||
<div id="result2"></div>
|
||
</div>
|
||
|
||
<div class="test-section">
|
||
<h3>Test 3: Navigate to Products Page</h3>
|
||
<a href="/admin/products" class="btn btn-primary">
|
||
🛍️ Go to Products Management
|
||
</a>
|
||
</div>
|
||
|
||
<div class="test-section">
|
||
<h3>CSP Status Check</h3>
|
||
<div id="cspStatus">Checking...</div>
|
||
</div>
|
||
|
||
<script>
|
||
// Test 1: Event Listener
|
||
document
|
||
.getElementById("testBtn1")
|
||
.addEventListener("click", function () {
|
||
document.getElementById("result1").innerHTML =
|
||
'<div class="status success">✅ Event listener works! No CSP errors.</div>';
|
||
});
|
||
|
||
// Test 2: Inline Handler Function
|
||
function testInlineHandler() {
|
||
document.getElementById("result2").innerHTML =
|
||
'<div class="status success">✅ Inline handler works! CSP is configured correctly.</div>';
|
||
}
|
||
|
||
// Check CSP Headers
|
||
fetch("/admin/products.html", { method: "HEAD" })
|
||
.then((response) => {
|
||
const csp = response.headers.get("Content-Security-Policy");
|
||
const hasScriptSrcAttr = csp && csp.includes("script-src-attr");
|
||
const hasUnsafeInline = csp && csp.includes("'unsafe-inline'");
|
||
|
||
let statusHtml = "";
|
||
if (hasScriptSrcAttr && hasUnsafeInline) {
|
||
statusHtml =
|
||
'<div class="status success">✅ CSP Headers are correctly configured!<br>';
|
||
statusHtml += "script-src-attr includes unsafe-inline</div>";
|
||
} else {
|
||
statusHtml =
|
||
'<div class="status error">⚠️ CSP may need adjustment<br>';
|
||
statusHtml += "Missing script-src-attr or unsafe-inline</div>";
|
||
}
|
||
|
||
document.getElementById("cspStatus").innerHTML = statusHtml;
|
||
})
|
||
.catch((error) => {
|
||
document.getElementById("cspStatus").innerHTML =
|
||
'<div class="status error">❌ Error checking CSP: ' +
|
||
error.message +
|
||
"</div>";
|
||
});
|
||
</script>
|
||
</body>
|
||
</html>
|