Prerequisites
- Version requirements: >= 6.9.1
- License requirements: Professional edition or higher
Basic Form
An Auth Challenge page must contain at least one form element, which includes three key elements with the id attributes username, password, and form-submit. Below is an example of the simplest authentication form:
<form id="form" action="#" class="form" onsubmit="return submit()">
<input id="username" class="form-input" placeholder="Username" />
<input id="password" class="form-input" type="password" placeholder="Password" />
<button class="form-submit" id="form-submit">Submit</button>
</form>
This form enables a basic authentication mechanism, where the user submits their credentials by clicking the "Submit" button.
Handling Authentication Results
Each time the user submits the form, the browser refreshes the page, and the server determines the authentication result based on the cookies (which are automatically handled by the injected JavaScript). If the authentication is successful, the user will be redirected to the normal business page. If authentication fails, the server will respond with Set-Cookie: sl_auth_verify_error=true; Path=/; Max-Age=3600, indicating that the authentication failed. You can use this behavior to customize how you handle errors, such as by defining a function to detect authentication failures:
function isAuthFailed() {
return document.cookie.indexOf("sl_auth_verify_error=true") > -1;
}
You can use this function to display error messages or custom alerts to the user when authentication fails.
Complete Example
The following example builds upon the basic form, adding styles to achieve a similar appearance to the default login page:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>SafeLine WAF Auth</title>
<meta name="viewport" content="width=device-width,initial-scale=1" />
<style>
html {
height: 100%;
}
body {
background: #f7f8fa;
font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue",
sans-serif;
margin: 0;
height: 100%;
}
.container {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
height: 100%;
}
.title {
display: flex;
align-items: center;
font-size: 24px;
margin-bottom: 5px;
}
.form {
width: 440px;
height: 318px;
background: rgba(255, 255, 255, 0.8);
box-shadow: 0px 8px 15px 0px rgba(145, 158, 171, 0.08);
border-radius: 8px;
border: 2px solid #ffffff;
display: flex;
justify-content: space-between;
flex-direction: column;
padding: 32px;
box-sizing: border-box;
font-size: 16px;
}
.form-field {
width: 376px;
height: 42px;
background: #f7f8fa;
border-radius: 4px;
display: flex;
align-items: center;
border: 1px white solid;
}
.form-field-help {
color: #FF4D4F;
}
.form-field svg {
margin: 0 12px;
}
.form-input {
font-size: 16px;
border: 0;
outline: 0;
background: #f7f8fa;
flex-grow: 1;
width: 100px;
border-radius: 4px;
}
.form-input-error {
border: 1px #FF4D4F solid;
}
.form-submit {
width: 376px;
height: 42px;
background: #0fc6c2;
border-radius: 4px;
border: 0;
color: white;
cursor: pointer;
font-size: 16px;
}
.form-error {
color: lightcoral;
display: none;
}
.form-submit:hover {
background: #09c0c0;
}
.footer {
position: absolute;
bottom: 32px;
left: 0;
width: 100%;
color: #a8a8a8;
font-size: 14px;
text-align: center;
}
.footer-waflink {
color: #0fc6c2;
text-decoration: none;
}
</style>
</head>
<body>
<div class="container">
<form id="form" action="#" class="form" onsubmit="return submit()">
<div class="title">
<img style="margin-right: 15px; height: 32px; width: 30px;"
src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAMAAABEpIrGAAAC+lBMVEUAAAAtLS0gICA7Ozs6OjopKysiJiYFAwMWFhYtLCwhISETHh5EREQTExNDS0sjJCQPISFFR0dAJigLGBguLi4xMDEbIiFAMjNDQ0MwLzAHBwc+Pj4ICAhCQkIkJCRFRkYJCgoXGhoIDQ0PHRwxMTFAQEARERFDREQxMTFGRkZGRkYrKysdHh5BQUE8PDw/Pz8ICAglJSUeHh43NzcODw8SEhJISEgNDQ01NTUjIyMPDw8uLi4SEhJKSko4ODgiIiIFBQUVFRUbGxsGBgY4ODgWFhZDQ0MJCwspKSkRERE7OztJSUknJycJCQkLCwtBQUFFRUVDQ0MiIiL///9AQEAFBAQLAAAUrao5OjpERERAQ0MxMTEPAQE0MzQRpqMApKEAoZ4SoJ0BlpM5OTk2NTUYFxcIExLw9vbn8fAFy8cVqqcSqKUQmZYYmJUAmJUAkY42NzcqMTEvLzAPCgrK4ODD3NsTxMAXvLgPsq8crKkjop8Rop8an5wAnZoTmpcAmpcPlpMQlJEsgoBKTUxKSko6Pz87PT0yNjYTNDM4HB4bHR0MHBs3FBcKCAgfAAAVAAD7/f3t9PTb6enV5uaw09KhzcyaxcQDxsKTwcALvLl9urgatLBasq9Gsa5ksK4Rr6xQq6gRq6gjqqcsqKUZp6QBp6MfpqMQnZolmJUAmJQblJEVk5AAjIgAhoIQe3kydXMQb20ybmw2W1k6UlE5LzA6KywpJycmJyclHx8gEhMaAgI0AAD0+fnj7u7R4uK41dSqzcxfyseHw8EAwb2Nv70ovbqDvLoAu7cOtrJYtbInsK0MrKkArKg5q6g5paMXnJkzm5gwmJUImJUkko8RjosQiocpiIYchoMSg4AEgH02Y2IPWFcXS0o0JyhAHyI0HB4VExMtDRASDw8qBQaRyMaixcRAwb55v70kv7txvLkgt7NEr6xaqqgLm5gQh4UpeXYmdnQWc3EZa2ksZWQQZWMpYmAzT041R0YTRUQvPT0cNjU8MjMjLy4zCxANGbKlAAAAU3RSTlMABAf7+/77+z7+/vhLKP7+/v389xn9/Pv4z8e9uod9Vf76+fbz4trQxrysqKCeln5OMiL8+PLs7Ovo6OTh3tnPz7++s7KXkY2IenRmW1pFPzsTD7TaAR0AAAN5SURBVDjLYoABRkZGIOFtZisP5kAEEZJMTCAhHs3mlpZmrQAgEygCUwVjBcprCrZICApGtghq8TAxQBQxwcwQkXdTj2zmk+ALiQQSzZHqsjwiEMOB5urL6kqrhkRGRgmJR93bHCUEoiMjQ1SldWX1/YHyISEhUVEhbczMIes3C22aXRV179ZcpAvVheFb1yurVWNvJw0NDQtq63DQmIZoZEQdGhxrYAxBD5goGy8ckZqCqAoMBDKIm4WJoJhpxrmWZ5nGk5WUgBUQAwbWJXLmEyyZYOLPZsXFlTFFLlpJTF0REMIYmJgsoLR2ZW1oA1UBw5pygICRkTT12snMp9Znl1hjm0ooDAyMDF0QTAK1zCDNwCRUWFIMFByZnJ7S4KGKhbiITi4uJARBLgAFhAoQKqoRqEViITygoKCh+fEJQ0TB08L3BBZh5Sg0JxERARzdRlYXNmASQAVDgwUKSBjHkMGoQFgCpAjpLp+ebZwIwmkKiDMOwpQGVFBlQVMQKBoAAgCZRIipBmZnEAAAAASUVORK5CYII="
alt="Safeline" />
<h3>SafeLine Auth</h3>
</div>
<div class="form-field">
<input id="username" class="form-input" placeholder="Username" />
</div>
<div class="form-field">
<input id="password" class="form-input" type="password" placeholder="Password" />
</div>
<div id="error" class="form-error">
<small class="form-field-help">Wrong username or password</small>
</div>
<button class="form-submit" id="form-submit">Submit</button>
</form>
<div class="footer">
<a href="https://www.safelinewaf.com" class="footer-waflink" target="_blank">Powered by SafeLine WAF</a>
</div>
</div>
</body>
</html>
Conclusion
This example demonstrates a simple and customizable SafeLine WAF Auth Challenge page. You can expand upon this by integrating real-time authentication services and more sophisticated validation techniques. With CSS and JavaScript, you have full flexibility in styling and functionality to meet your specific needs.
Top comments (0)