How do I cross-check an prompt input in html

Question

So I am working on a project for my school. I would declare that beforehand, cause I know its definitely not great to get unfair advantages from external help like stackoverflow for projects, but I really need help with this one.

So i am doing a ASP.NET core web application with mvc, and I am trying to create a admin portal, which verifies the prompt input and redirects to the adminpage. All other operations including the verification, and redirection all works fine, but im faced with a serious security issue.

I'll paste my code here first to give a brief picture of what i've done till far

AdminPortal.cshtml:

@{
    ViewData["Title"] = "Admin Portal";
}

<body>
    <button onclick="Prompt()" class="btn btn-primary btn-block">Admin access</button>
    <script>
        function Prompt() {
            let Message = prompt("Admin access is strictly restricted for public users.\nPlease maintain a healthy enviroment in this website.\nPlease input the admin password to continue!")
            if (Message != "ZdIoN1Fo0)(12AsjH") {
                window.location.href = "/"
            } else {
                window.open("AdminPage");
            }
        }
    </script>
</body>

AdminPage.cshtml:

@{
    ViewData["Title"] = "Admin Page";
    string[] TableHeaders = new string[]
    {
      "First name"
      ,"Last name"
      ,"Email"
      ,"Phone Number"
    };
    Layout = "/Views/Shared/_Layout.cshtml";
}

<style>
    body{
        display:flex;
        background:#222831;
        align-items:center;
        justify-content:center;
        height:100vh;
        color:snow;
    }
    .table{
        background:#fff;
        max-height:470px;
        overflow-y:auto;
        box-shadow:0px 10px 50px 0px rgba(0,0,0,0.5);
        border-radius:10px;
    }
    table{
        width:100%;
        text-align:center;
        border-collapse:collapse;
    }
    table thead th,
    table tbody td{
        padding:15px;
        border:none;
        font-weight:600;
        font-size:14px;
    }
    table thead th{
        background: #1861ac;
        color:snow;
        font-size:16px;
        position:sticky;
        top:-1%;
    }
    table tbody td {
        border-bottom: 1px solid rgba(0,0,0,0.1);
    }
    nav{
        display:none !important;
    }
</style>

<div class="table">
    <table class="table table-bordered table-hover">
        <thead>
            <tr>
                @{
                    foreach (var head in TableHeaders)
                    {
                        <th>
                            @head
                        </th>
                    }
                }
            </tr>
        </thead>
        <tbody>
            @{
                if (Model != null)
                {
                    foreach (var Acc in Model)
                    {
                        <tr>
                            <td>@Acc.Fname</td>
                            <td>@Acc.Lname</td>
                            <td>@Acc.Email</td>
                            <td>@Acc.PhoneNO</td>
                        </tr>
                    }

                }
            }

        </tbody>
    </table>
</div>

Ok so as u can see, the admin password ZdIoN1Fo0)(12AsjH is visible to any user that inspect element on the adminportal page, which breaks the whole admin-only-access concept. I was wondering how can i hide the key from the public's view and probably still verify.

Also, regarding the security issue, I want to include another feature, that only allows user to enter the adminpage through adminportal page. How am I supposed to do that? I thought about using return value for verification, but not sure how to do so.

I asked my friends before coming here, and they said that I am not supposed to authenticate in the front end, but rather do it in the backend; which I have no idea about; Is my homecontroller.cs my backend? Have no idea of how to verify from there.

I too did some research, and think that maybe https://stackoverflow.com/a/14774470/13734672 might come in handy in some ways, but still did not figure out a way to implement it.

In addition to the existing problem, I was wondering if I could add a feature to the redirection window.location.href = "/", like maybe another prompt that says "unauthorized attempt!", when redirected to index.cshtml is it possible?

Any help will be greatly appreciated :)

score 0 · Answer 1 · answered Jul 18 '21 at 04:57

Yes your friends are right, we should not be authenticating the user from the client side as everything is done on client side in some or the other way would be easily found any any end user. ASP.NET provides two features to achieve this. One Authentication that talks about "Who are you? as an are you valid user of this site". Second, Authorization "What right you have to perform any actions on site?"

Ref: ASP-NET-authentication-and-authorization

Since it's academic project I am going to provide you links that have sample implementation https://www.codeproject.com/Articles/98950/ASP-NET-authentication-and-authorization-2

And to answer your last part about redirecting. Once you implement the authentication and authorization and configure which pages are accessed by which users/roles it would redirect to the login page. If you want a custome page to redirect such as accessdenide etc..you could do that using web.config

How do I cross-check an prompt input in html

1 Answers1