π΅οΈ Introduction
Website ΰΆΰΆΰΆΰ· open ΰΆΰΆ»ΰΆ―ΰ·ΰΆ―ΰ· ΰΆ
ΰΆ΄ΰ·ΰΆ§ ΰ·ΰ·ΰΆΈΰ·ΰΆ±ΰ·ΰΆΊΰΆΊΰ·ΰΆ±ΰ· ΰΆ΄ΰ·ΰΆ±ΰ·ΰΆ±ΰ· login screen ΰΆΰΆΰΆΰ·. Username ΰΆΰΆΰΆΰ· ΰΆΰ·ΰΆΊΰ·ΰΆ±ΰ·ΰ·. Password ΰΆΰΆΰΆΰ·
ΰΆΰ·ΰΆΊΰ·ΰΆ±ΰ·ΰ·. Login button ΰΆΰΆΰΆΰ· ΰΆΰ·ΰΆΊΰ·ΰΆ±ΰ·ΰ·. Maybe loading animation ΰΆΰΆΰΆΰ·ΰΆΰ· ΰΆΰ·ΰΆΊΰ·ΰΆ±ΰ·ΰ·. π
ΰΆΰΆ ΰΆ―ΰ·ΰΆΰ·ΰΆΰ·ΰΆΈ ΰ·ΰ·ΰΆΈΰ·ΰΆ±ΰ·ΰΆΊ user ΰΆΰ·ΰΆ±ΰ·ΰΆΰ·ΰΆ§ ΰ·ΰ·ΰΆΰ·ΰΆ±ΰ·ΰΆ± ΰΆ΄ΰ·ΰ·
ΰ·ΰ·ΰΆ±ΰ·: βAdo, ΰΆΈΰ·ΰΆ ΰΆ±ΰΆΈΰ· secure
website ΰΆΰΆΰΆΰ·.β π
But security engineering ΰΆΰΆΰ·ΰΆ―ΰ·, what the website looks like ΰ·ΰ· how the website
actually enforces authorization ΰΆΰ·ΰΆΊΰΆ±ΰ·ΰΆ±ΰ· completely different things.
ΰΆΰ·ΰΆ§ΰ·ΰΆ±ΰ·ΰΆΈ: Lock ΰΆΰΆΰΆΰ· ΰΆΰ·ΰΆΊΰ·ΰΆ±ΰ·ΰ· ΰΆΰ·ΰΆΊΰΆ½ΰ· building ΰΆΰΆ secure ΰΆΰ·ΰΆΊΰΆ½ΰ· automatically ΰΆΰ·ΰΆΊΰΆ±ΰ·ΰΆ± ΰΆΆΰ·. π
ΰΆΈΰ· review ΰΆΰΆΰ· interesting part ΰΆΰΆ ΰΆΰΆΈΰΆΊΰ·, frontend code ΰΆΰΆ ΰΆΆΰΆ½ΰΆ―ΰ·ΰΆ―ΰ· security ΰΆΰ·ΰΆ± ΰ·ΰ·ΰΆΰΆ½ΰ· ΰΆΰ·ΰΆΊΰ·ΰΆ± ΰΆΆΰ· ΰΆ΄ΰ·ΰΆ±ΰ·ΰ·. But some
of those security mechanisms are happening in places where the user's own browser is in
control. And that's where things becomeβ¦ interesting. ππ
π 01. The Legendary Login Screen
Login page ΰΆΰΆ ΰΆ―ΰ·ΰΆΰ·ΰΆΰ·ΰΆΈ first impression ΰΆΰΆ: βACCESS DENIED π«β
Very serious. Very professional. Very government-secret-lab vibes. π
But a login screen by itself isn't security. It's just a UI.
Frontend ΰΆΰΆΰ·ΰΆ±ΰ· βAre you authorized?β ΰ·ΰΆΰ· question ΰΆΰΆΰΆΰ· ΰΆ
ΰ·ΰΆ½ΰ·, browser ΰΆΰΆΰ·ΰΆ±ΰ· ΰΆ½ΰ·ΰΆΆΰ·ΰΆ± answer ΰΆΰΆ blindly
trust ΰΆΰΆ»ΰΆ± architecture ΰΆΰΆΰΆΰ· ΰΆ±ΰΆΈΰ·β¦ browser ΰΆΰΆ security guard ΰΆΰ·ΰΆ±ΰ·ΰΆΰ· ΰΆ±ΰ·ΰ·ΰ·ΰΆΊΰ·. π
Browser ΰΆΰΆ basically userΰΆΰ· machine ΰΆΰΆΰ· ΰΆΰ·ΰΆΊΰ·ΰΆ± software ΰΆΰΆ. ΰΆ ΰΆ±ΰ·ΰ·ΰ·: Frontend = presentation +
client-side logic ΰ·ΰ· Backend authorization = actual enforcement boundary ΰΆΰ·ΰΆΊΰΆ±
difference ΰΆΰΆ critical.
ΰ·ΰ·ΰΆΰ·ΰΆ½ΰ·ΰΆ±ΰ· ΰΆΰ·ΰΆΊΰΆ±ΰ·ΰ· ΰΆ±ΰΆΈΰ·: βΰΆ―ΰ·ΰΆ»ΰ· βAuthorized Personnel Onlyβ ΰΆΰ·ΰΆΊΰΆ½ΰ· board ΰΆΰΆΰΆΰ· ΰΆΰ·ΰ·ΰ·ΰ·ΰ·
ΰΆΰ·ΰΆΊΰΆ½ΰ· ΰΆΰΆΰ·ΰ·
ΰ· security guard ΰΆΰ·ΰΆ±ΰ·ΰΆΰ· ΰΆΰΆ±ΰ·ΰΆ±ΰ·ΰ· ΰΆΰ·ΰΆΊΰΆ½ΰ· ΰ·ΰ·ΰΆΰΆ±ΰ·ΰΆ± ΰΆΰΆ΄ΰ·.β ππ
π 02. Client-Side Security: βTrust Me Broβ
ΰΆΈΰ·ΰΆΰΆ± ΰΆΰΆΈΰΆΊΰ· funniest part ΰΆΰΆ. Application ΰΆΰΆΰ· access state ΰΆΰΆ browser-side mechanisms ΰΆΰΆΰ·ΰΆ heavily connected
ΰΆ±ΰΆΈΰ·, website ΰΆΰΆΰ· security decision ΰΆΰΆΰ· ΰΆΰ·ΰΆ§ΰ·ΰΆΰ· client side ΰΆΰΆΰΆ§ shift ΰ·ΰ·ΰΆ±ΰ·ΰ·.
ΰΆ ΰΆΰ·ΰΆΊΰΆ±ΰ·ΰΆ±ΰ· website ΰΆΰΆ essentially browser ΰΆΰΆΰΆ§ ΰΆΰ·ΰΆΊΰΆ±ΰ·ΰ·: βBro, ΰΆΈΰ· user authorized ΰΆ― ΰΆΰ·ΰΆΊΰΆ½ΰ· ΰΆΰΆΊΰ· remember
ΰΆΰΆ»ΰΆΰ·ΰΆ± ΰΆΰΆ±ΰ·ΰΆ±.β π₯Ί
Browser: βSure bro πβ
Security engineering: βWaitβ¦ WHAT?β π
Client-side state is useful for UI behavior. But using browser-controlled state as the ultimate source of
truth for authorization gives the whole thing a very questionable vibe. It's like hiring the person trying
to enter the building as the security guard. ππ
ποΈ 03. Local Storage: The Tiny Security Vaultβ’ π
Modern websites love browser storage: LocalStorage, SessionStorage, Cookies, IndexedDB. Everything is
useful for different purposes. But there's a huge difference between:
- βRemember this UI preference.β
- βThis proves this person is authorized.β
Those are NOT the same thing. If an application treats a browser-side value as the reason someone is
allowed to see protected content, that's a very interesting architectural choice. Because the browser
belongs to the user. Not the server. Not the school. Not the database. The user. π
So when the browser says βYep, I'm authorized,β the server shouldn't just respond βAh okay,
welcome back sir.β π«‘ That's basically: Security by trust-me-broβ’.
π₯· 04. βDon't Press F12β Security & βRight Click Disabledβ
Now we reach one of my favorite parts. The website tries to prevent things like: F12, Right click, certain
keyboard shortcuts, browser inspection shortcuts. And honestlyβ¦ The effort is impressive. π But the concept
is hilarious when treated as a security boundary.
Because: Disabling F12 ≠ securing the application. It's like putting a sign on a safe
saying: π« PLEASE DON'T LOOK INSIDE and then calling it bank-grade security. π
Website: β Right click disabled. → Browser: Okay. → Security researcher:
Interesting. π
Right-click blocking mostly affects convenience. It doesn't create a cryptographic wall around the
application. It doesn't turn JavaScript into an impenetrable fortress. It's basically the web equivalent of:
βAne please inspect ΰΆΰΆ»ΰΆ±ΰ·ΰΆ± ΰΆΰΆ΄ΰ· π₯Ίπβ πππ
π§ 05 & 06. JavaScript Is Not Secret & Public Secrets
One of the biggest misunderstandings in web security is thinking: βUsers can't see the code, so the
code is secure.β Except the browser literally needs the code. If JavaScript is sent to the browser,
the browser has to receive it. And if the browser can execute it⦠well⦠it's not exactly a secret
anymore. π
Imagine writing: const secret = "very_secret_value"; and then sending that JavaScript file to
every visitor. Technically: βIt's a secret.β Practically: βIt's a secret that we delivered
directly to the visitor.β π
Sinhala version: βΰΆ»ΰ·ΰ·ΰΆΰ· ΰΆΰ·ΰΆΊΰΆ½ΰ· browser ΰΆΰΆΰΆ§ΰΆΈ ΰΆ―ΰ·ΰΆ½ΰ·, browser ΰΆΰΆΰ·ΰΆ±ΰ· ΰΆΰΆ ΰ·ΰΆΰΆΰΆΰ·ΰΆ± ΰΆΰΆ±ΰ·ΰΆ±
ΰΆΰ·ΰΆΊΰΆ± ΰΆΰΆ ΰΆ§ΰ·ΰΆΰΆΰ· funny ΰΆ±ΰ·ΰΆ―?β π
π 07 & 08. Login Screen ≠ Auth System & The βAuthorizedβ Sticker
A login page is an interface. Authentication is a security process.
Authorization is a permission decision. Those three things aren't identical.
You can have a beautiful login screen with animations, loading spinners, fancy icons, SweetAlert popups,
dark mode, dramatic transitionsβ¦ and still have weak authorization underneath. Basically: UI: πππ°
| Security architecture: πͺπ
Imagine walking into a school office. Security guard: βAre you authorized?β → Person: βYes.β →
Guard: βProof?β → Person: βI have this sticker: π’ AUTHORIZED.β → Guard: βOkay bro, come in.β π
That's roughly the kind of trust model you don't want to rely on for serious authorization decisions.
Because the person carrying the sticker also controls the sticker. π
π§± 09 & 10. Frontend ≠ Security Boundary & Iframe Security
Frontend code is visible to the client. Frontend state is controlled by the client. Frontend UI can be
modified by the client. Frontend behavior can be observed by the client. Therefore:
βFrontend controls should not be confused with backend authorization.β
You can hide an element. You can show a login popup. You can display: π« ACCESS DENIED. But none of those
things alone prove that the underlying data is protected.
Sinhala-English version: βButton ΰΆΰΆ hide ΰΆΰΆ»ΰΆ½ΰ· database ΰΆΰΆ secure ΰ·ΰ·ΰΆ±ΰ·ΰΆ±ΰ· ΰΆ±ΰ·
machan.β ππ
Also, putting something inside <iframe> doesn't suddenly transform it into: π‘οΈ Military
Grade Secure Container 3000β’. An iframe is still part of the browser environment.
π¨ 11, 12 & 13. Error Handling, Hidden vs Protected & Security by CSS π
If an authentication UI encounters an unexpected error and falls back to making the protected interface
available anyway: Login system: βSomething went wrong.β → Application: βAnywayβ¦ welcome.β π
That makes any security reviewer slowly put down their coffee and say: βHmm.β βποΈπποΈ
Hiding a dashboard with CSS (display: none;) means: βThe user shouldn't see this right
now.β Actual authorization means: βThis user is not allowed to access the protected
resource.β
Sinhala: βScreen eka hide ΰΆΰΆ»ΰΆ½ΰ· ΰΆΰ·ΰΆΊΰ·ΰΆ± ΰΆΰΆΰΆΊΰ·, data eka protect ΰΆΰΆ»ΰΆ½ΰ· ΰΆΰ·ΰΆΊΰ·ΰΆ± ΰΆΰΆΰΆΊΰ·
ΰΆ―ΰ·ΰΆΰΆΰ·.β Basically: βΰΆΰΆ©ΰ· shutter ΰΆΰΆ ΰΆΰΆΰ·ΰ·
ΰ·ΰΆ±ΰ· lock ΰΆΰΆ»ΰΆ½ΰ· ΰΆ±ΰ·β¦ curtain ΰΆΰΆ ΰΆ―ΰ·ΰΆ½ΰ· ΰΆΰ·ΰΆΊΰ·ΰΆ±ΰ·ΰΆ±ΰ·.β π
π§π» 14, 15 & 16. DevTools, Obfuscation & Where Is the Trust?
DevTools isn't some evil hacking machine. It's literally a standard browser feature used by developers, QA
testers, and researchers. Trying to prevent inspection doesn't make an application secure.
Confusing code ≠ secure code. Hidden UI ≠ protected resource. Disabled shortcuts ≠ authorization.
Browser state ≠ trusted identity.
Every authentication system eventually has to answer one question: Who decides whether this user is
allowed to access the resource? If the answer is mostly: βThe browser decides,β that's
where the architectural breakdown occurs.
π΅οΈ 17 & 18. What This Review Does NOT Claim & Overall Vibe
This review does not prove: β That the database has been breached. β That student records
have been accessed. β That private information has been leaked. β That the backend is definitely vulnerable.
What can be discussed is what the frontend architecture appears to expose.
π¬ Movie title: βMission Impossible: Please Don't Press F12β
- Main character: π Login screen
- Supporting character: πΎ LocalStorage
- Comic relief: π« Right-click disabled
- Villain: π§π» Developer Tools
- Ending: βWaitβ¦ who is actually enforcing the authorization?β ποΈπποΈ πππ
π±π° Sinhala Translation of the Entire Situation
ΰ·ΰΆ»ΰΆ½ΰ·ΰΆΈ ΰΆΰ·ΰ·ΰ·ΰ·ΰ·ΰΆΰ·: Website ΰΆΰΆΰ· security ΰΆΰ·ΰΆΊΰΆ½ΰ· ΰΆ΄ΰ·ΰΆ±ΰ·ΰΆ± mechanisms ΰΆΰ·ΰΆ©ΰΆΰ· ΰΆΰ·ΰΆΊΰ·ΰΆ±ΰ·ΰ·. Login screen ΰΆΰΆ ΰΆΰ·ΰΆΊΰ·ΰΆ±ΰ·ΰ·, Access
checks ΰΆΰ·ΰΆΊΰ·ΰΆ±ΰ·ΰ·, Browser storage ΰΆΰ·ΰΆΊΰ·ΰΆ±ΰ·ΰ·, DevTools block ΰΆΰΆ»ΰΆ±ΰ·ΰ·, Right-click block ΰΆΰΆ»ΰΆ±ΰ·ΰ·, Dashboard ΰΆΰΆ
hide/show ΰΆΰΆ»ΰΆ±ΰ·ΰ·, Iframe use ΰΆΰΆ»ΰΆ±ΰ·ΰ·. ΰΆΰΆ ΰΆ―ΰ·ΰΆΰ·ΰΆΰ·ΰΆΈ βΰΆ
ΰΆ©ΰ· ΰΆΈΰ·ΰΆ ΰΆ±ΰΆΈΰ· NASA level security ΰΆΰΆΰΆΰ·β ΰ·ΰΆΰ· ΰΆ΄ΰ·ΰΆ±ΰ·ΰΆ±
ΰΆ΄ΰ·ΰ·
ΰ·ΰ·ΰΆ±ΰ·. ΰ·ΰ·ΰΆΆΰ·ΰΆΊΰ· web security ΰ·ΰΆ½ΰΆ―ΰ· ΰΆ΄ΰ·ΰΆ»ΰ·ΰ·ΰΆ±ΰΆΊ: βProtected resource ΰΆΰΆ access ΰΆΰΆ»ΰΆ±ΰ·ΰΆ± ΰΆΰΆΰ·ΰΆΰΆ§ΰΆΈ authorization
ΰΆΰΆ enforce ΰ·ΰ·ΰΆ±ΰ·ΰΆ±ΰ· ΰΆΰ·ΰ·ΰ·ΰΆ―?β ΰΆΰ·ΰΆΊΰΆ± ΰΆΰΆ.
Page ΰΆΰΆ hide ΰΆΰΆ»ΰΆ±ΰ·ΰΆ± ΰΆ΄ΰ·ΰ·
ΰ·ΰ·ΰΆ±ΰ·. Button ΰΆΰΆ hide ΰΆΰΆ»ΰΆ±ΰ·ΰΆ± ΰΆ΄ΰ·ΰ·
ΰ·ΰ·ΰΆ±ΰ·. Right-click block ΰΆΰΆ»ΰΆ±ΰ·ΰΆ± ΰΆ΄ΰ·ΰ·
ΰ·ΰ·ΰΆ±ΰ·. F12 block ΰΆΰΆ»ΰΆ±ΰ·ΰΆ±
ΰΆ΄ΰ·ΰ·
ΰ·ΰ·ΰΆ±ΰ·. Login popup ΰΆΰΆ ΰΆ―ΰ·ΰΆ±ΰ·ΰΆ± ΰΆ΄ΰ·ΰ·
ΰ·ΰ·ΰΆ±ΰ·. ΰ·ΰ·ΰΆΆΰ·ΰΆΊΰ· ΰΆΰ·ΰ· security boundary ΰΆΰΆΰΆΰ· ΰΆΰ·ΰΆΊΰΆ½ΰ· automatically ΰΆΰ·ΰΆΊΰΆ±ΰ·ΰΆ± ΰΆΆΰ·. ΰΆΰΆ
ΰΆΰΆΈΰΆΊΰ· ΰΆΈΰ· whole review ΰΆΰΆΰ· main point ΰΆΰΆ. π
π Final Verdict & Rating
π° Fort Knox on the outside • π¨ Web app on the inside • π₯Ί βPlease don't inspectβ energy
everywhere • π Browser being trusted a little too much
Security awareness takeaway: βNever confuse a security-looking interface with a security boundary.
Frontend can say βNO.β Actual authorization has to mean βNO.ββ π