Secure Site

When a request to the secure site a login box will pop up, a valid username and password is required to gain access to the secure site.

DEMO

Username : admin

Password : admin

Script :

  const USERNAME = 'admin'  
  const PASSWORD = 'admin' 
  const REALM = 'Secure Site'

  function parseCredentials(authorization) {
    const parts = authorization.split(' ')
    const plainAuth = atob(parts[1])
    const credentials = plainAuth.split(':')

    return credentials
  }

  function getUnauthorizedResponse(message) {
    let response = new Response(message, {
      status: 401,
    })

    response.headers.set('WWW-Authenticate', `Basic realm="${REALM}"`)

    return response
  }

  async function handleRequest(request) {
    const authorization = request.headers.get('authorization')

    if (!request.headers.has('authorization')) {
      return getUnauthorizedResponse(
        'U are not permitted to this page.',
      )
    }

    const credentials = parseCredentials(authorization)

    if (credentials[0] !== USERNAME || credentials[1] !== PASSWORD) {
      return getUnauthorizedResponse(
        'The User Name and Password combination you have entered is invalid.',
      )
    }

    return await fetch(request)
  }

  addEventListener('fetch', event => {
    event.respondWith(handleRequest(event.request))
  })