LogoLogo
  • ShieldsGuard - User Guide
  • Installation Steps
    • Shields Guard Installation
    • Shields Guard SEG Installation
  • Getting Started
    • 1. General Welcome and Site Management Panel
    • 2. Overview
      • 2.1 Today's Data
      • 2.2 Country Statistics
      • 2.3 URL Statistics
      • 2.4 IP Statistics
      • 2.5 HTTP Status Statistics
    • 3. Protection
      • 3.1 DDoS Protection
        • 3.1.1 Google Recaptcha Setup
        • 3.1.2 Friendly Captcha Setup
      • 3.2 WAF – Web Application Firewall
    • 4. Security Rules
      • 4.1 BlackList & WhiteList
      • 4.2 User Agent Filtering
      • 4.3 Query String Filtering
      • 4.4 HTTP Header Filtering
      • 4.5 Block POST Values
      • 4.6 Custom Headers
      • 4.7 Block URL Requests
      • 4.8 URL Path Blocking
      • 4.9 Encrypt Path
      • 4.10 Remove Request Value
      • 4.11 Exclude Directories from Protection
    • 5. Logs
      • 5.1 Access Log
      • 5.2 Security Log
    • 6. Asset Management
      • 6.1 Asset Management
      • 6.2 Network Topology
      • 6.3 Vulnerability Scan
    • 7. Access
  • 8. DNS
  • 9. SSL
  • 10. Subdomain Manage
  • 11. Edit Page
  • ShieldsGuard SEG
    • 1. SEG Dashboard
    • 2. Reporting
    • 3. Analyzed
      • 3.1 Files
      • 3.2 URL
      • 3.3 Mail
      • 3.4 Domain
    • 4. Mail Settings
      • 4.1 File
      • 4.2 Mail Body
      • 4.3 Sender Domain
Powered by GitBook
On this page
Export as PDF

11. Edit Page

Previous10. Subdomain ManageNext1. SEG Dashboard

Last updated 9 days ago

📖 Overview

The Edit Page module in ShieldsGuard gives you full control over the visual and functional structure of your challenge verification pages, such as the JavaScript Firewall Page and the Captcha Firewall Page.

These pages appear to visitors when:

  • DDoS or WAF challenges are triggered

  • Captcha validation is required

  • JavaScript execution is being verified before access is granted

With this module, you can fully customize the look and feel of these interaction points, ensuring a seamless user experience and maintaining brand consistency.

🛠️ Editable Pages

You can customize two different firewall presentation pages:

  1. JavaScript Firewall Page Used when verifying browser JavaScript capabilities during bot protection.

  2. Captcha Firewall Page Used when FriendlyCaptcha or other CAPTCHA validation is required before access.

💡 Key Features

  • Live code editor with syntax highlighting

  • HTML/CSS customization panel

  • Support for dynamic ShieldsGuard variables

  • Split between required and optional placeholders

  • Lightweight, flexible templating for full branding control

🔑 Variables You Should Use

Depending on the page type, you’ll see the required variables listed on the left:

Common Mandatory Variables

Variable
Description

{shieldsguard_javascript}

Inserts JavaScript verification engine

{shieldsguard_captcha}

Loads CAPTCHA engine interface (on captcha page)

{captcha_output}

Displays captcha success/fail status

{refresh_auth}

Token refresher for authenticated challenge

{request_id}

Unique identifier for the request/session

🔐 These variables are required for the firewall process to function correctly.

🔧 Optional Variables

Variable
Description

{ip_address}

Displays visitor's IP address

{page_url}

Displays current page URL

{user_agent}

Displays the client’s User-Agent

These are useful for debugging or including transparency in the UI shown to the user.

🎨 Styling and Branding

You can customize:

  • Typography (fonts, headings, paragraphs)

  • Layout (padding, flex, container size)

  • Colors, borders, shadows

  • Logo, favicon, background image (via embedded CSS or inline HTML)

Sample Customization Use Cases:

  • Match your corporate color scheme

  • Add your logo and custom copy

  • Change instructional messaging

🧠 Best Practices

Recommendation
Reason

Always keep required variables intact

Ensure challenge logic functions properly

Test design on desktop and mobile

Ensure responsiveness across devices

Use minimal animations

Reduce script load time and browser impact

Avoid removing <meta> tags

They affect display scaling and bot detection

Host background images securely (HTTPS)

Prevent mixed content browser warnings

🧪 Example: JavaScript Firewall Page

htmlKopyalaDüzenle<body>
  <h1>Security Check</h1>
  <p>Please wait while we verify your browser...</p>
  {shieldsguard_javascript}
</body>

🧪 Example: Captcha Firewall Page

htmlKopyalaDüzenle<body>
  <h2>Complete the CAPTCHA to Continue</h2>
  <div class="captcha-container">
    {shieldsguard_captcha}
    {captcha_output}
  </div>
</body>

⚠️ Important Notes

  • Any missing required variable may cause the verification to fail.

  • Edits apply instantly, but always preview on multiple devices.

  • A misconfigured challenge page may lead to access denial or increased bounce rate.

🎯 The Edit Page module gives you complete creative control over one of the most critical user interaction points — your security verification flow. Use it to balance usability with strong perimeter protection.