update
This commit is contained in:
parent
8acb1ec423
commit
d74e3494b2
@ -98,12 +98,13 @@ renderBlogItem (route_, article) =
|
||||
[ div
|
||||
[ style "display" "flex"
|
||||
, style "justify-content" "space-between"
|
||||
-- , style "margin-left" "50px"
|
||||
-- , style "margin-right" "50px"
|
||||
-- , style "margin" "auto"
|
||||
, style "max-width" "550px"
|
||||
]
|
||||
[ p [] [text article.title]
|
||||
[ div []
|
||||
[ p [ style "color" "blue" ] [ text article.title ]
|
||||
, p [ style "color" "gray" ] [ text article.subtitle ]
|
||||
]
|
||||
, p [] [text (Date.toIsoString article.published)]
|
||||
]
|
||||
]
|
||||
|
||||
@ -78,6 +78,7 @@ data routeParams =
|
||||
|
||||
type alias ArticleMetadata =
|
||||
{ title : String
|
||||
, subtitle : String
|
||||
, description : String
|
||||
, published : Date
|
||||
-- , image : Pages.Url.Url
|
||||
@ -87,8 +88,9 @@ type alias ArticleMetadata =
|
||||
|
||||
frontmatterDecoder : Decoder ArticleMetadata
|
||||
frontmatterDecoder =
|
||||
Decode.map4 ArticleMetadata
|
||||
Decode.map5 ArticleMetadata
|
||||
(Decode.field "title" Decode.string)
|
||||
(Decode.field "subtitle" Decode.string)
|
||||
(Decode.field "summary" Decode.string)
|
||||
(Decode.field "published"
|
||||
(Decode.string
|
||||
@ -145,7 +147,11 @@ view app shared =
|
||||
[ style "margin" "10px" ]
|
||||
[ text "Blog" ]
|
||||
, br [] []
|
||||
, h1 [] [ text app.data.metadata.title ]
|
||||
, div [ style "text-align" "center" ]
|
||||
[ h1 [] [ text app.data.metadata.title ]
|
||||
, h1 [ style "font-size" "1.5em" ] [ text app.data.metadata.subtitle ]
|
||||
]
|
||||
, br [] []
|
||||
, div [] rendered
|
||||
]
|
||||
}
|
||||
|
||||
@ -5,7 +5,7 @@ import FatalError exposing (FatalError)
|
||||
import Head
|
||||
import Head.Seo as Seo
|
||||
import Html.Styled exposing (..)
|
||||
import Html.Styled.Attributes as Attributes
|
||||
import Html.Styled.Attributes exposing (style, target, src)
|
||||
import Link exposing (Link)
|
||||
import Pages.Url
|
||||
import PagesMsg exposing (PagesMsg)
|
||||
@ -84,17 +84,25 @@ view :
|
||||
view app shared =
|
||||
{ title = "nganhkhoa"
|
||||
, body =
|
||||
[ img [Attributes.src "/nganhkhoa.png"] []
|
||||
[ div [ style "display" "flex", style "column-gap" "10px" ]
|
||||
[ quicklinks "github" "Github"
|
||||
, quicklinks "git" "Personal Git"
|
||||
, quicklinks "blog" "Blog Posts"
|
||||
, quicklinks "osx" "OSX series"
|
||||
, quicklinks "efiens" "Efiens Blogs"
|
||||
]
|
||||
, br [] []
|
||||
, img [src "/nganhkhoa.png"] []
|
||||
, withSpacing (p [])
|
||||
[ text "Welcome to my personal website, where I post random things and thoughts."
|
||||
]
|
||||
, withSpacing (p [])
|
||||
[ text "I'm a Security Engineer at"
|
||||
, Link.link (Link.external "https://bshield.io") [Attributes.target "_blank"] [text "BShield"]
|
||||
, quicklinks "bshield" "BShield"
|
||||
, text "and"
|
||||
, Link.link (Link.external "https://verichains.io") [Attributes.target "_blank"] [text "Verichains."]
|
||||
, quicklinks "verichains" "Verichains"
|
||||
, text "Before that, I was a member of Efiens under the name"
|
||||
, Link.link (Link.external "https://blog.efiens.com/author/luibo/") [] [text "luibo."]
|
||||
, quicklinks "efiens" "luibo."
|
||||
]
|
||||
, withSpacing (p [])
|
||||
[ text "My specialty are in computer security: memory forensics, binary analysis, program analysis, and compiler."
|
||||
@ -103,28 +111,25 @@ view app shared =
|
||||
]
|
||||
, withSpacing (p [])
|
||||
[ text "My Github is"
|
||||
, Link.link (Link.external "https://github.com/nganhkhoa") [Attributes.target "_blank"]
|
||||
[text "nganhkhoa."]
|
||||
, quicklinks "github" "nganhkhoa."
|
||||
, text "But I also maintain my personal git at"
|
||||
, Link.link (Link.external "https://git.nganhkhoa.com/nganhkhoa") [Attributes.target "_blank"]
|
||||
[text "git.nganhkhoa.com."]
|
||||
, quicklinks "git" "git.nganhkhoa.com."
|
||||
]
|
||||
, text "You can find out more about me in my "
|
||||
, Link.link (Link.external cvpdf) [Attributes.target "_blank"] [text "CV."]
|
||||
, quicklinks "cv" "CV."
|
||||
, br [] []
|
||||
, text "I often write blogs, most of them are based on my research knowledge. "
|
||||
, text "You can find my blogs "
|
||||
, Link.link (Link.internal (Route.Blog__Slug_ { slug = "" })) [] [ text "here." ]
|
||||
, quicklinks "blog" "here."
|
||||
, br [] []
|
||||
, text "I also wrote a series about Mach-O binary format."
|
||||
, text "You can find it "
|
||||
, Link.link (Link.internal (Route.Osx__Slug_ { slug = "" })) [] [ text "here." ]
|
||||
, text "I also wrote a series about Mach-O binary format. You can find it "
|
||||
, quicklinks "osx" "here."
|
||||
, br [] []
|
||||
, text "I am a Vietnamese polyglot, fluent in English, conversational in Japanese, beginners in Mandarin and Korean."
|
||||
, withSpacing (p [])
|
||||
[ text "\"I use (neo)Vim and Arch, btw\" - probably me."
|
||||
, text "This site is written using"
|
||||
, Link.link (Link.external "https://elm-pages.com/") [] [ text "elm-pages." ]
|
||||
, quicklinks "elm" "elm-pages."
|
||||
]
|
||||
, projects
|
||||
, br [] []
|
||||
@ -132,9 +137,6 @@ view app shared =
|
||||
]
|
||||
}
|
||||
|
||||
cvpdf : String
|
||||
cvpdf = "cv.pdf"
|
||||
|
||||
projects : Html msg
|
||||
projects =
|
||||
div []
|
||||
@ -143,11 +145,11 @@ projects =
|
||||
[ h2 [] [text "(2023) TSShock"]
|
||||
, withSpacing (p [])
|
||||
[ text "At Verichains, our team discovered multiple weaknesses in most implementations of Threshold ECDSA Signature Scheme following the works of"
|
||||
, Link.link (Link.external "https://eprint.iacr.org/2019/114") [] [text "Gennaro and Goldfeder."]
|
||||
, quicklinks "gg" "Gennaro and Goldfeder."
|
||||
, text "As the result, we presented our findings at "
|
||||
, Link.link (Link.external "https://www.blackhat.com/us-23/briefings/schedule/#tsshock-breaking-mpc-wallets-and-digital-custodians-for-billion-profit-33343") [] [text "Black Hat USA 2023"]
|
||||
, quicklinks "tsshockblackhat" "Black Hat USA 2023"
|
||||
, text "and"
|
||||
, Link.link (Link.external "https://conference.hitb.org/hitbsecconf2023hkt/session/tsshock-breaking-mpc-wallets-and-digital-custodians/") [] [text "Hack In The Box Phuket 2023"]
|
||||
, quicklinks "tsshockhitb" "Hack In The Box Phuket 2023"
|
||||
, text "titled \"TSSHOCK: Breaking MPC Wallets and Digital Custodians for $BILLION$ Profit\"."
|
||||
]
|
||||
]
|
||||
@ -159,7 +161,7 @@ projects =
|
||||
, text "Found several vulnerabilities in applications verifying the authenticity of these cards."
|
||||
, text "Government applications and devices are also audited."
|
||||
, text "The foundation research for the development of"
|
||||
, Link.link (Link.external "https://bshield.io/") [] [text "BShield Secure-ID."]
|
||||
, quicklinks "bshield" "BShield Secure-ID."
|
||||
]
|
||||
]
|
||||
, div []
|
||||
@ -175,16 +177,13 @@ projects =
|
||||
, withSpacing (p [])
|
||||
[ text "Build a LLVM based obfuscation compiler."
|
||||
, text "Extend"
|
||||
, Link.link (Link.external "https://doi.org/10.1109/SPRO.2015.10")
|
||||
[] [text "Obfuscator-LLVM"]
|
||||
, quicklinks "ollvm" "Obfuscator-LLVM"
|
||||
, text "with"
|
||||
, Link.link (Link.external "https://doi.org/10.1007/978-3-540-77535-5_5")
|
||||
[] [text "Mixed Boolean-Arithmetic"]
|
||||
, quicklinks "mba" "Mixed Boolean-Arithmetic"
|
||||
, text "as well as many other obfuscation passes."
|
||||
, text "Fully updated to LLVM 14 with support for both new and legacy pass manager."
|
||||
, text "A CTF challenge is released obfuscated using our obfuscator in"
|
||||
, Link.link (Link.external "https://twitter.com/hgarrereyn/status/1477919411977830402")
|
||||
[] [text "TetCTF 2022"]
|
||||
, quicklinks "tetctf2022" "TetCTF 2022"
|
||||
]
|
||||
]
|
||||
, div []
|
||||
@ -195,8 +194,7 @@ projects =
|
||||
, text "Develope a new method for Live Forensics using Memory Forensics without Memory Extraction."
|
||||
, text "A prototype is implemented, capable of inspecting the kernel global variables, structures,"
|
||||
, text "and performing"
|
||||
, Link.link (Link.external "https://doi.org/10.1016/j.diin.2016.01.005")
|
||||
[] [text "Pool Tag Quick Scanning."]
|
||||
, quicklinks "poolscan" "Pool Tag Quick Scanning."
|
||||
, text "This prototype is updated in 2023 to also detect injected code in processes for detection of"
|
||||
, text "DLL Injection, Reflective DLL Injection, Process Hollowing, and similar malware techniques."
|
||||
]
|
||||
@ -217,11 +215,9 @@ publications =
|
||||
, text "Duy Hieu Nguyen, Anh Khoa Nguyen, Huu Giap Nguyen, Thanh Nguyen, Anh Quynh Nguyen."
|
||||
, text "August 2023."
|
||||
, br [] []
|
||||
, Link.link (Link.external "https://verichains.io/tsshock") [] [text "[website]"]
|
||||
, Link.link (Link.external "https://www.verichains.io/tsshock/verichains-tsshock-wp-v1.0.pdf")
|
||||
[Attributes.target "_blank"]
|
||||
[text "[whitepaper]"]
|
||||
, Link.link (Link.external "https://youtu.be/1ks2jcS7UE4") [] [text "[HITB Recordings]"]
|
||||
, quicklinks "tsshockwebsite" "[website]"
|
||||
, quicklinks "tsshockwhitepaper" "[whitepaper]"
|
||||
, quicklinks "tsshockvideohitb" "[HITB Recordings]"
|
||||
]
|
||||
, br [] []
|
||||
, withSpacing (div [])
|
||||
@ -229,9 +225,7 @@ publications =
|
||||
, text "Anh Khoa Nguyen."
|
||||
, text "Expecting 2024."
|
||||
, br [] []
|
||||
, Link.link (Link.external "macho-obfuscation.pdf")
|
||||
[Attributes.target "_blank"]
|
||||
[text "[preprint]"]
|
||||
, quicklinks "macho" "[preprint]"
|
||||
]
|
||||
, br [] []
|
||||
, withSpacing (div [])
|
||||
@ -239,9 +233,7 @@ publications =
|
||||
, text "Anh Khoa Nguyen, Dung Vo Van Tien."
|
||||
, text "Expecting 2024."
|
||||
, br [] []
|
||||
, Link.link (Link.external "live-memory-forensics.pdf")
|
||||
[Attributes.target "_blank"]
|
||||
[text "[preprint]"]
|
||||
, quicklinks "live-memory-forensics" "[preprint]"
|
||||
]
|
||||
, br [] []
|
||||
, h2 [] [text "Dissertations"]
|
||||
@ -258,9 +250,7 @@ publications =
|
||||
, br [] []
|
||||
, text "Year: 2020"
|
||||
, br [] []
|
||||
, Link.link (Link.external "https://drive.google.com/file/d/1Z_cKtBsi_gm8ugsrnAEPo-Wmx9GAuaSK/view?usp=sharing")
|
||||
[Attributes.target "_blank"]
|
||||
[text "[pdf]"]
|
||||
, quicklinks "memorypoolscan" "[pdf]"
|
||||
]
|
||||
, br [] []
|
||||
, withSpacing (div [])
|
||||
@ -272,8 +262,46 @@ publications =
|
||||
, br [] []
|
||||
, text "Year: 2023"
|
||||
, br [] []
|
||||
, Link.link (Link.external "https://drive.google.com/file/d/1X18tr4OvcNYRoyxzTcsxM_MgjcqVW1sk/view?usp=sharing")
|
||||
[Attributes.target "_blank"]
|
||||
[text "[pdf]"]
|
||||
, quicklinks "memoryinjection" "[pdf]"
|
||||
]
|
||||
]
|
||||
|
||||
quicklinks link title =
|
||||
let
|
||||
linkexternal src = Link.link (Link.external src) [target "_blank"] [text title]
|
||||
linkinternal src = case src of
|
||||
"blog" -> Link.link (Link.internal (Route.Blog__Slug_ { slug = "" })) [] [ text title ]
|
||||
"osx" -> Link.link (Link.internal (Route.Osx__Slug_ { slug = "" })) [] [ text title ]
|
||||
_ -> Link.link (Link.external "") [] [text title]
|
||||
in
|
||||
case link of
|
||||
"github" -> linkexternal "https://github.com/nganhkhoa"
|
||||
"git" -> linkexternal "https://git.nganhkhoa.com"
|
||||
"efiens" -> linkexternal "https://blog.efiens.com/author/luibo"
|
||||
"bshield" -> linkexternal "https://bshield.io"
|
||||
"verichains" -> linkexternal "https://verichains.io"
|
||||
"elm" -> linkexternal "https://elm-pages.com"
|
||||
-- tsshock
|
||||
"gg" -> linkexternal "https://eprint.iacr.org/2019/114"
|
||||
"tsshockblackhat" -> linkexternal "https://www.blackhat.com/us-23/briefings/schedule/#tsshock-breaking-mpc-wallets-and-digital-custodians-for-billion-profit-33343"
|
||||
"tsshockhitb" -> linkexternal "https://conference.hitb.org/hitbsecconf2023hkt/session/tsshock-breaking-mpc-wallets-and-digital-custodians/"
|
||||
"tsshockwebsite" -> linkexternal "https://verichains.io/tsshock"
|
||||
"tsshockwhitepaper" -> linkexternal "https://www.verichains.io/tsshock/verichains-tsshock-wp-v1.0.pdf"
|
||||
"tsshockvideohitb" -> linkexternal "https://youtu.be/1ks2jcS7UE4"
|
||||
-- ollvm
|
||||
"ollvm" -> linkexternal "https://doi.org/10.1109/SPRO.2015.10"
|
||||
"mba" -> linkexternal "https://doi.org/10.1007/978-3-540-77535-5_5"
|
||||
"tetctf2023" -> linkexternal "https://twitter.com/hgarrereyn/status/1477919411977830402"
|
||||
-- memory forensics
|
||||
"poolscan" -> linkexternal "https://doi.org/10.1016/j.diin.2016.01.005"
|
||||
-- site resources
|
||||
"cv" -> linkexternal "cv.pdf"
|
||||
"blog" -> linkinternal "blog"
|
||||
"osx" -> linkinternal "osx"
|
||||
-- pdfs
|
||||
"memorypoolscan" -> linkexternal "https://drive.google.com/file/d/1Z_cKtBsi_gm8ugsrnAEPo-Wmx9GAuaSK/view?usp=sharing"
|
||||
"memoryinjection" -> linkexternal "https://drive.google.com/file/d/1X18tr4OvcNYRoyxzTcsxM_MgjcqVW1sk/view?usp=sharing"
|
||||
"macho" -> linkexternal "macho-obfuscation.pdf"
|
||||
"live-memory-forensics" -> linkexternal "live-memory-forensics.pdf"
|
||||
_ -> linkexternal ""
|
||||
|
||||
|
||||
@ -91,11 +91,12 @@ view app shared =
|
||||
, ul []
|
||||
(List.map (\item -> li [] [item]) oldBlogs)
|
||||
, br [] []
|
||||
, text "I gree my idea in injection into an obfuscation scheme for MachO binary."
|
||||
, text "Through understanding the loading process of Mach-O, I devised a technique for obfuscation and hooking."
|
||||
, text "In the following whitepaper, I writeup all steps in this obfuscation scheme."
|
||||
, br [] []
|
||||
, Link.link (Link.external whitepaper)
|
||||
[Attributes.target "_blank"]
|
||||
[text "macho-obfuscation.pdf"]
|
||||
[text "whitepaper"]
|
||||
]
|
||||
]
|
||||
}
|
||||
@ -105,7 +106,7 @@ oldBlogs =
|
||||
[ (Link.link (Link.internal (Route.Osx__Slug_ { slug = "macho" })) [] [text "Macho"] )
|
||||
, (Link.link (Link.internal (Route.Osx__Slug_ { slug = "linker" })) [] [text "Linker"] )
|
||||
, (Link.link (Link.internal (Route.Osx__Slug_ { slug = "fairplay" })) [] [text "Fairplay"] )
|
||||
, (Link.link (Link.internal (Route.Osx__Slug_ { slug = "inject" })) [] [text "Inject"] )
|
||||
, (Link.link (Link.internal (Route.Osx__Slug_ { slug = "injection" })) [] [text "Injection"] )
|
||||
]
|
||||
|
||||
whitepaper : String
|
||||
|
||||
@ -78,6 +78,7 @@ data routeParams =
|
||||
|
||||
type alias ArticleMetadata =
|
||||
{ title : String
|
||||
, subtitle : String
|
||||
, description : String
|
||||
, published : Date
|
||||
-- , image : Pages.Url.Url
|
||||
@ -87,8 +88,9 @@ type alias ArticleMetadata =
|
||||
|
||||
frontmatterDecoder : Decoder ArticleMetadata
|
||||
frontmatterDecoder =
|
||||
Decode.map4 ArticleMetadata
|
||||
Decode.map5 ArticleMetadata
|
||||
(Decode.field "title" Decode.string)
|
||||
(Decode.field "subtitle" Decode.string)
|
||||
(Decode.field "summary" Decode.string)
|
||||
(Decode.field "published"
|
||||
(Decode.string
|
||||
|
||||
144
content/blog/the-overly-complex-website-security.md
Normal file
144
content/blog/the-overly-complex-website-security.md
Normal file
@ -0,0 +1,144 @@
|
||||
---
|
||||
title: "The overly complex website security"
|
||||
subtitle: "Introduction to the website infrastruction"
|
||||
summary: ""
|
||||
tags: []
|
||||
categories: []
|
||||
published: "2024-01-31"
|
||||
featured: false
|
||||
draft: false
|
||||
---
|
||||
|
||||
It is unarguable that the web is the most proliferate field in computer science. No matter what technology will come in the future, the web is sure to stick around. The web provide us with convenient applications, so called website, that changes how we work and entertain. However, the design of the web was flawed. Throughout the years, the industry and the academic came up with plenty of solutions to mitigate the flawed design of web. In this post, I try to introduce the overly complex website security. I discuss how websites are made secured or insecured and what can we do to protect our websites.
|
||||
|
||||
## Static websites and HTML
|
||||
|
||||
A website is built using the HTML, a descriptive language instructing the browser how to draw objects. These objects can be shapes, or texts. HTML was designed relatively easy to understand, but their syntax is utterly hard to parse **correctly**. For context, HTML are constructed by nest-able tags. A tag comes as a pair of form `<tag>body</tag>`, the pair must have the same text inside, while the ending of a tag must starts with `</`. The body inside is usually texts or nested tag or list of nested tags.
|
||||
|
||||
It seems clean and easy to read, but there could be some inconsistency if not done correctly. Take the below example, how would it make sense?
|
||||
|
||||
```html
|
||||
<a>
|
||||
<b>
|
||||
<c>
|
||||
<d>
|
||||
</a>
|
||||
</c>
|
||||
</b>
|
||||
```
|
||||
|
||||
HTML content is supposed to be in the form of tree (as in tree data structure). Where the parent node contains multiple children. Inconsistency like the above example code cannot reduce the content into a tree. However, nothing sucks more than having a website not working, that is why browsers allow these inconsistency in the HTML by having some assumptions.
|
||||
|
||||
## The dynamic web
|
||||
|
||||
The website was static in its early days. The web was merely text files transfer with an interface. The text files are HTML, transfered through network and the browser draws the HTML to the screen. Writing a series of HTML files are inefficient and can only serve available HTML content. So instead of transfering available HTML files, people created programs that can generate HTML files and transfer them. This is the first form of dynamic web, and the rise of PHP with server side rendering.
|
||||
|
||||
In another perspective, the web is extended with another Turing-complete language called Javascript. The purpose of this language is to re-draw the HTML or perform complex drawing tasks. jQuery was invented and widely used to modify rendered HTML. Following the website evolution, people started to favor the client rendering technique, where the website is generated by running Javascript on the client side. The web cannot work without data. In the era of client side rendering, data is delivered through the use of APIs. These APIs are designed to be lightweight and fast respond.
|
||||
|
||||
In the following sections, we go through the details of both server side rendering and client side rendering.
|
||||
|
||||
### PHP and the rise of server side rendering
|
||||
|
||||
PHP is the first (industrial) form of web server, a program generating HTML files and transfering them. The program logic is very simple, it takes the request submitted by the user and respond a HTML file corresponding to the request. Requests are usually contains a piece of information related to the user to inform the web server who is making the request.
|
||||
|
||||
Generating HTML files on the server side is resource heavy. It may not suitable for websites with thousands visits per second without brute-force protection. However, designing/building server side rendering website is very easy. Because the web server requires quick access to all information for efficient generation of HTML files, all resources are stored closely usually at the same server. This results in a simpler design and probably easier to setup a website with server side rendering.
|
||||
|
||||
### Javascript and the rise of client side rendering
|
||||
|
||||
Javascript enables the website to edit itself. The idea for client side rendering is to build the HTML content tree. For generic content, the tree can be built following a certain rule, but for personalized content, things get a little tricky. Because personalized content matches the user, the website must generate pages with user's data. So the Javascript script must either stores all users data or they must fetch the user's data on page rendering. Of course, storing all users data in a small script is impossible and fetching the user's data is the definitive way for client side rendering.
|
||||
|
||||
Fetching user data is provided by another service which is commonly known as API server. This service provides additional data for rendering requested by the client side. In the past, there was no "correct" (standard) way for communication between the client and the server to ask for these additional data. Fortunately, we now have a more standard and secured way of communicating called Restful API.
|
||||
|
||||
Restful API is not the only way of communication, but it is widely used. The concept is very simple, resources are categorized and accessed through an endpoint for each category. This endpoint then uses HTTP methods (GET, POST, PUT, DELETE, ...) to get or modify the resources.
|
||||
|
||||
## Requests and Respond
|
||||
|
||||
The whole web is a bunch of requests and responds going forward and back. The client asks for something (request) and the server provides (respond). The concept is simple, but the implementation is complex. Let's examine these in details to understand more about the communication between the client and the server.
|
||||
|
||||
This might skip a lot of background materials, but the least we should know is that the communication in a network (Internet included) is done through transmission of bits/bytes. These bytes are usually arranged in a more comprehensible manner, most commonly using ASCII or UTF8.
|
||||
|
||||
The most common form of request and respond is HTTP. HTTP is designed as a form of text for ease of inspecting. However, HTTP is not the only form of request and respond. Other forms, we call them protocol from now on, are FTP for file transfering, SSH for remote server connection to name a few. Most protocols outside of HTTP is designed with bytes.
|
||||
|
||||
In general, requests and responds are structured so that both side can understand the message. There are many ways to design them. The rule of thumb when designing such protocol is "a request can only be understand in a single meaning". Single meaning so the server can respond correctly to a certain request.
|
||||
|
||||
## Database
|
||||
|
||||
SQL is the most used kind-of-database. These databases are designed as tables with connections and easily queried by the use of a [declarative language](https://en.wikipedia.org/wiki/Declarative_programming). The database is hosted on a server and has ways of connection to allow quering by another process, usually the webserver (backend).
|
||||
|
||||
The "upgrade" of SQL is NoSQL, where data are not structured in tables anymore. Because SQL is strictly associtate with tables, NoSQL has to use a different syntax for querying and modifying data in the database.
|
||||
|
||||
Recently, another kind of database is on the rise that is GraphQL. GraphQL allows combining multiple databases as a big graph rather than "tables with connections".
|
||||
|
||||
Regardless of the database type, they must expose their database through some methods. If the process they talk to are in the same server (same machine), then methods can be used such as IPC (inter-process-communication), file based sockets (file read/write as communication), port sockets (internal internet). But usually databases are hosted at some other places (machine), in these cases, the only way of connection is **through network**.
|
||||
|
||||
## Server
|
||||
|
||||
Let say we build a "functional" client-side-rendering website. We need these components:
|
||||
|
||||
- Backend
|
||||
- Frontend
|
||||
- Database
|
||||
|
||||
We start small by having only **one** server for these three components. It works by having the database running, the backend running, and the frontend hosted through a server. Stop for a bit and talk about frontend hosting.
|
||||
|
||||
### Frontend hosting
|
||||
|
||||
So for dynamic website with client-side-rendering, the frontend is a bunch of HTML, CSS, and Javascript files. They must be hosted to send these files to the client. This can be achieved by setting up a webserver, through one of these ways:
|
||||
|
||||
1. Running a "simple" webserver code
|
||||
|
||||
Most programming langauge has a "simple" webserver that can be used to host these files. Anyway, this is the basic feature of a webserver.
|
||||
|
||||
2. Running a "complex" webserver
|
||||
|
||||
More generalized webserver can be utilized such as those like NGINX. These webserver allows for more sophisticated setup, but as said previously, the basic form of webserver is file transfering and is supported by most (all) webserver. These webservers allow for location address to have separation between `api.website.com` and `website.com`
|
||||
|
||||
3. Embed together with the backend webserver
|
||||
|
||||
The backend itself is also a webserver, and the frontend resources can be embedded to be found at a path after `/`.
|
||||
|
||||
### Multiple servers
|
||||
|
||||
Of course, for high demand applications, one server hosting everything is not optimal. In these cases the resources are scattered in multiple servers (machines). For frontend and (sometimes) backend, the content is usually the same so they can be replicated. But for databases (which the backend uses to query/modify data), scattered data are a big problem. However, we now having the solution which is often referred to as sharding.
|
||||
|
||||
Although multiple servers are used, only one server can be used at a time for a request. To know which server should be handling the request, an intermediate server is used. This intermediate server is often called "load balancer", which counts the number of concurrent request on a server and redirects the request to the closest server or a server that is more free.
|
||||
|
||||
### CDN
|
||||
|
||||
Contend Delivery Network, is often used to host static resources over a big network. This big network allows for fast delivery of these static resources.
|
||||
|
||||
## Between the server and the client
|
||||
|
||||
The backend is often designed as a functional program (no state). Basically, whatever the input (request) is, the output (response) will be reflecting that input only. Following this design, if the request does not include the user data, the server has no way identifying the user.
|
||||
|
||||
```
|
||||
function process(request) {
|
||||
let user = getUser(request);
|
||||
let query = getRequestData(request);
|
||||
let response = performWebLogic(user, query);
|
||||
return response;
|
||||
}
|
||||
|
||||
function webserver(request) {
|
||||
let respond = process(request);
|
||||
return response;
|
||||
}
|
||||
```
|
||||
|
||||
In the past, cookies have been used. A series of characters (usually digits) is given to the user and subsequent requests include this series to identify the user making the request.
|
||||
|
||||
However, due to security in implementation, right now the most commonly used method to identify a user is Json Web Token (JWT).
|
||||
|
||||
This is a short introduction to a bigger problem of Authentication and Authorization in web applications.
|
||||
|
||||
## More
|
||||
|
||||
- DNS
|
||||
- Browser
|
||||
- Javascript
|
||||
- Web Assembly
|
||||
- Web 3
|
||||
- Cryptography
|
||||
- Authentication and Authorization
|
||||
|
||||
UwU. See you again in other posts.
|
||||
Binary file not shown.
@ -73,6 +73,7 @@ osxAllMetadata = allMetadata (\s -> Route.Osx__Slug_ { slug = s }) osxPostsGlob
|
||||
|
||||
type alias ArticleMetadata =
|
||||
{ title : String
|
||||
, subtitle : String
|
||||
, summary : String
|
||||
, published : Date
|
||||
-- , image : Url
|
||||
@ -82,8 +83,9 @@ type alias ArticleMetadata =
|
||||
|
||||
frontmatterDecoder : Decoder ArticleMetadata
|
||||
frontmatterDecoder =
|
||||
Decode.map4 ArticleMetadata
|
||||
Decode.map5 ArticleMetadata
|
||||
(Decode.field "title" Decode.string)
|
||||
(Decode.field "subtitle" Decode.string)
|
||||
(Decode.field "summary" Decode.string)
|
||||
(Decode.field "published"
|
||||
(Decode.string
|
||||
|
||||
Loading…
Reference in New Issue
Block a user