Bài trước: Bảo mật web và ứng dụng (1) - Hệ thống web
---
1
Ứng dụng web
Sau bài học trước, chúng ta đã tìm hiểu được:
– Web là một hệ thống thông tin có phạm vi toàn cầu
– Mỗi một tài nguyên trên hệ thống web (một bài viết, một
hình ảnh, một trang mua hàng, một trang đăng nhập, …v.v) đều có một địa chỉ cụ
thể gọi là URL.
– Hệ thống thông tin được tạo ra bằng cách liên kết (link,
hyperlink) các tài nguyên lại với nhau
– Để tạo ra các liên kết, chúng ta sử dụng thẻ <a> của
ngôn ngữ HTML
– Một trong những hình thức lừa đảo của tội phạm mạng là giả
mạo các trang web chính thống để thu thập thông tin (tài khoản ngân hàng, mật
khẩu, số điện thoại) từ người dùng. Việc tạo ra một giao diện web giả mạo không
khó.
Trong phần này, chúng ta sẽ tìm hiểu tiếp về:
– Mô hình hoạt động của một ứng dụng web (mô hình client-server)
– Quá trình duyệt web diễn ra như thế nào
– Lập trình phía client
1.1
Mô hình client-server
Mọi trang web, hoặc ứng dụng web đều hoạt động dựa trên mô
hình client-server. Vì vậy chúng ta sẽ cùng tìm hiểu về mô hình này.
Ý tưởng của mô hình này, đơn giản chỉ là: máy khách (client)
gửi một yêu cầu (request) đến máy chủ (server), máy chủ sẽ xử lý và trả kết quả
về cho máy khách.
Xem hình minh họa
về mô hình client-server:
Mô hình client-server gồm một số thành phần:
– Client: khởi phát yêu cầu, gửi yêu cầu tới server, nhận kết
quả từ server trả về. Client có thể là trình duyệt, ứng dụng viết bằng
python/javascript hoặc bất kỳ ứng dụng nào mà có phát sinh ra HTTP request.
– Server: có vai trò cung cấp dịch vụ, xử lý và trả về kết
quả cho máy client.
– Môi trường truyền thông tin: hạ tầng mạng (LAN, Internet),
bao gồm cả phần cứng và phần mềm
– Giao thức truyền thông tin: các chuẩn công nghệ giúp giao
tiếp và truyền thông tin giữa server-client. Ví dụ HTTP, HTTPS
Trong mô hình client-server, khi môi trường truyền đã được kết
nối và sẵn sàng, thì client luôn là nơi khởi phát của ứng dụng. Client sẽ gửi một
HTTP request tới server. Khi server nhận được request, nó sẽ xử lý và trả kết
quả về cho client bằng một HTTP response.
Client là thành
phần chủ động. Server là thành phần bị động.
Chúng ta sẽ thấy
cách hoạt động của một ứng dụng web rất khác so với cách hoạt động của chương
trình trên máy cục bộ (ví dụ Microsoft Word). Trong Microsoft Word, mọi thao
tác đều được thực hiện ngay trên máy người dùng, từ việc ra lệnh, xử lý và trả
về kết quả. Cũng là chương trình xử lý văn bản, nhưng Google Docs là một ứng dụng
hoạt động theo mô hình client-server. Nếu không có kết nối mạng thì Google Docs
sẽ không hoạt động được.
Để nắm rõ hơn về
mô hình client-server, chúng ta sẽ cùng tìm hiểu về quá trình duyệt web diễn ra như thế nào ở phần tiếp theo.
1.2 Quá trình
duyệt web diễn ra như thế nào
Do ứng dụng web
hoạt động theo mô hình client-server, nên để có trang web trên trình duyệt, cần
trải qua các bước sau:
Bước 1: Người
dùng nhập địa chỉ trang web (URL) vào thanh địa chỉ. Ví dụ:
http://example.com/hello.php
Bước 2: Trình duyệt
dựa vào URL trong thanh địa chỉ, kết nối tới máy web server, gửi yêu cầu tới
web server (ví dụ yêu cầu: gửi cho nội dung trang web hello.php)
Bước 3: Web
server xử lý yêu cầu, gửi trả kết quả về cho trình duyệt (ví dụ nội dung trang
web dưới dạng mã nguồn HTML, CSS và JavaScript)
Bước 4: Trình duyệt
thực thi mã HTML, CSS, JavaScript và hiển thị trang web ra màn hình.
Xem hình minh họa:
Chúng ta cùng thực
hành, quan sát quá trình duyệt web trên một máy tính:
Bước 1. Mở trình
duyệt web. Ví dụ Chrome
Bước 2. Nhập vào
đường dẫn của trình duyệt địa chỉ một trang web, bấm Enter để trình duyệt lấy
trang web từ máy server, và hiển thị nội dung ra màn hình. Ví dụ thanhnien.vn
Bước 3. Mở
Developer tools của trình duyệt bằng một số cách sau:
– Bấm tổ hợp ba phím Ctrl+Shift+I,
– hoặc bấm phím F12,
– hoặc vào menu của trình duyệt tìm tới mục Developer tools,
– hoặc bấm chuột phải vào trang web, chọn Inspect.
Bước 4. Trong cửa sổ của Developer tools, bấm chuột vào mục
Network.
Bước 5. Quan sát sẽ thấy các tập tin HTML (thanhnien.vn),
CSS (các tập tin có phần mở rộng là css), JavaScript (các tập tin có phần mở rộng
là js) được server gửi về cho client.
Bước 6. Bấm chuột vào các tập tin do server gửi về và quan
sát nội dung của nó ở cửa sổ bên phải. Nhớ chọn mục Response.
Hình minh họa:
1.3 Lập trình phía client
Ứng dụng web hoạt động theo mô hình client-server, nên gồm
có 2 phần: phần client và phần server.
Lập trình phía client (client-side programming, front-end
programming) là quá trình tạo ra phần giao diện của trang web (phần client).
Để tạo ra phần giao diện của trang web, chúng ta cần một số
thứ như sau:
– Ngôn ngữ để viết mã: HTML, CSS và JavaScript
– Phần mềm để soạn mã nguồn: Notepad, Visual Studio Code hoặc
một phần mềm viết mã bất kì
– Trình duyệt để dịch/thực thi mã nguồn, và hiển thị kết quả.
Ngôn ngữ HTML
HTML, viết tắt của HyperText Markup Language - ngôn ngữ đánh
dấu siêu văn bản, là một ngôn ngữ (lưu ý: không phải ngôn ngữ lập trình) được sử
dụng để tạo ra nội dung cho trang web.
Hiểu nôm na, HTML là ngôn ngữ, sử dụng phương pháp đánh dấu
bằng các thẻ, để tạo ra các tài liệu HTML.
Tài liệu HTML là gì?
Tài liệu HTML
(HTML document) là tập tin chứa mã HTML, là trang web ở dạng mã nguồn, trình
duyệt sẽ thực thi mã nguồn này để tạo ra trang web.
Tài liệu HTML được
tạo ra từ các phần tử HTML. Toàn bộ tài liệu HTML là tập hợp của rất nhiều các
phần tử HTML khác nhau tạo thành.
Cấu trúc cơ bản của
một tài liệu HTML được thể hiện ở hình sau:
Diễn giải hình
trên:
– Một tài liệu
HTML luôn được bắt đầu bằng dòng khai báo, mục đích là để cho trình duyệt biết
được tài liệu bên dưới được viết bằng HTML phiên bản bao nhiêu. Từ đó, trình
duyệt sẽ dùng đặc tả (specification) tương ứng để biên dịch mã HTML. Từ khóa để
khai báo là <!DOCTYPE>, đây không phải là một thẻ HTML, bạn có để ý thấy
dấu ! không? các thẻ HTML sẽ không có. Ví dụ, nếu tài liệu được viết bằng HTML5
thì sẽ khai báo là:
<!DOCTYPE html>
Nếu tài liệu được
viết bằng HTML4.01 Strict thì sẽ khai báo là:
<!DOCTYPE HTML
PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
Từ DOCTYPE là viết
rút gọn của DOCument TYPE (loại tài liệu).
– Sau phần khai
báo, là phần tử html, toàn bộ tài liệu
HTML sẽ được chứa trong phần tử này. Phần tử html được gọi là phần tử gốc (root element), vì nó chứa tất cả các
phần tử khác của tài liệu, và nó không nằm trong bất kì phần tử nào.
– Bên trong phần
tử html có hai phần tử con là phần tử head và phần tử body. Phần tử head và
body giúp chia một tài liệu HTML thành hai phần riêng biệt. Trong đó, phần tử
head chứa các thông tin mô tả về chính tài liệu này, ví dụ tiêu đề (title), tập
tin định dạng (CSS), đoạn mã JavaScript, các thông tin này không được hiển thị
ra cửa sổ trình duyệt, còn phần body chứa toàn bộ nội dung mà chúng ta muốn hiển
thị ra cửa sổ trình duyệt.
– Trong phần head
có phần tử title, phần tử này sẽ chứa tiêu đề của trang web, nó sẽ xuất hiện
trên thanh tiêu đề của trình duyệt. Phần tử title bắt buộc phải nằm trong phần
tử head.
Phần tử HTML là gì?
Phần tử HTML
(HTML element) là một thùng chứa (container), nó được sử dụng để chứa văn bản,
và các phần tử HTML khác.
Thùng chứa thường
được tạo ra bằng cách dùng 2 thẻ chặn 2 đầu. Tên của thẻ sẽ quy định nội dung
chứa bên trong mang ý nghĩa gì khi hiển thị. Ví dụ: muốn tạo ra một bài viết
thì dùng phần tử article, muốn tạo ra một tiêu đề thì dùng phần tử h1.
Hình dưới đây là
cú pháp một phần tử HTML thông thường (gọi là phần tử HTML thông thường vì còn
có các phần tử HTML đặc biệt),
Như vậy, một phần tử HTML sẽ bắt đầu là thẻ mở, tới phần nội
dung, và cuối cùng là thẻ đóng.
Thẻ HTML là gì?
Thẻ HTML (HTML tag) là các từ khóa (keyword), được sử dụng để
báo cho trình duyệt biết ý nghĩa, cách định dạng và hiển thị các nội dung. Trình duyệt sẽ không hiển thị các từ khóa
này ra ngoài giao diện. Thẻ HTML thường gồm hai phần: phần mở thẻ gọi là thẻ mở
(opening tag, start tag) và phần đóng thẻ gọi là thẻ đóng (closing tag, end
tag).
Xem hình minh họa
cú pháp của thẻ HTML thông thường,
Cũng có thể hiểu nôm na, HTML sẽ sử dụng các thẻ (tag) để
“đánh dấu” chỗ này là tiêu đề, chỗ khác là một đoạn văn bản, chỗ này sẽ hiển thị
hình ảnh, chỗ khác sẽ hiển thị một video. Đây chính là ý nghĩa của chữ “đánh dấu”
trong khái niệm HTML.
Để ý trong cú pháp của thẻ HTML sẽ thấy, thẻ mở và thẻ đóng
sẽ có “tên thẻ” giống nhau, chỉ khác nhau là trong thẻ đóng có thêm dấu xuyệt
“/” (forward-slash). Ví dụ: <html></html>, hoặc
<p></p>. Đừng nhầm dấu xuyệt (/) với dấu xuyệt ngược (\)
(backslash).
Khi lập trình, nên viết tên thẻ ở dạng chữ thường, mặc dù
trình duyệt không phân biệt chữ hoa và chữ thường. Ví dụ, nên viết thẻ là
<strong> thay vì <Strong> hoặc <STRONG>. Khi viết thẻ mở thì
viết luôn thẻ đóng, để tránh quên thẻ đóng, dễ sinh ra lỗi.
Như vậy với cặp thẻ HTML, chúng ta đã tạo ra được một cái
thùng rỗng, giờ chỉ việc bỏ nội dung vào giữa cặp thẻ này để tạo ra các phần tử
HTML.
Thẻ HTML và phần tử HTML có phải là một?
Thẻ HTML (HTML tag) và phần tử HTML (HTML element) là hai
khái niệm khác nhau, tuy thực tế, mọi người vẫn hay sử dụng để thay thế cho
nhau. Nói chung, cả hai đều là những thứ để tạo ra một trang web. Tuy nhiên, thẻ
HTML là thành phần để tạo ra phần tử HTML.
1.4 Xem và đọc thêm
– Từ khóa: kiến trúc client-server, quá trình hiển thị một
trang web, How The Web Works
– Mô hình client-server: https://vi.wikipedia.org/wiki/M%C3%B4_h%C3%ACnh_client-server
– How The Web Works - The Big Picture (view): https://www.youtube.com/watch?v=hJHvdBlSxug
– How The Web Works - The Big Picture (read): https://academind.com/tutorials/how-the-web-works/
1.5 Bài tập và thực hành
Bài
tập 1. Làm các phần thực hành, viết lại các đoạn mã trong phần lý thuyết.
Bài tập 2. Truy cập vào trang web (ứng dụng web) của một
ngân hàng bất kì. Sử dụng Developer tools để lấy về các thông tin sau của trang
web:
– Mã HTML
– Tập tin hình ảnh
– Tập tin âm thanh (nếu có)
– Tập tin phông chữ
Bài tập 3. Dùng HTML để tạo ra giao diện web như sau:
Mã nguồn tham khảo:
Sau khi lập trình xong, bạn mở giao diện trên trang web, nhập
vào các trường và bấm nút Gửi. Bạn sẽ thấy thông tin do người dùng nhập vào được
gửi tới trang http://httpbin.org/get. Ví dụ,
{ "args": {"dien-thoai": "123456",
"email": "levanti@gmail.com",
"loi-nhan": "tiem sach co cuon Dung viec khong?",
"ten": "le van ti"
},
"headers": {…
Bài tập 4. Dựa theo bài tập 3, dùng HTML để tạo ra giao diện
đăng nhập vào một ngân hàng, khi người dùng bấm nút Đăng nhập, thông tin sẽ được
gửi về http://httpbin.org/get.
Bài tập 5. Tìm hiểu và cài đặt WSL2
Bài tập 6. Tìm hiểu và cài đặt Kali Linux.
1.6 Câu hỏi ôn tập
Câu 1. Mô hình client-server gồm 4 thành phần sau:
A. Server, Services, Môi trường truyền, Giao thức truyền
thông tin
B. Client, Server, Môi trường truyền, Giao thức truyền thông
tin
C. Client, Server, Môi trường truyền, Thiết bị lưu trữ
D. Client, Server, Trình duyệt, Giao thức truyền thông tin
Câu 2. Trong mô hình client-server, client có thể là trình
duyệt, ứng dụng viết bằng python/javascript hoặc bất kỳ ứng dụng nào mà có phát
sinh ra ______.
A. Kết quả
B. HTTP request
C. Giao thức
D. HTML
Câu 3. Client–server model is a distributed application
structure that partitions tasks or workloads between the providers of a
resource or service, called _______, and service requesters, called clients.
A. browsers
B. web services
C. servers
D. centers
Câu 4. Web server thường gửi về trình duyệt các loại mã nguồn
sau:
A. HTML, CSS, JavaScript, PHP
B. C#, HTML, CSS, JavaScript
C. HTML, CSS, JavaScript
D. Python, HTML, CSS, JavaScript
Câu 5. Một phần tử HTML (thông thường) gồm các thành phần
sau:
A. thẻ mở, thẻ đóng
B. thẻ mở, nội dung
C. thẻ mở, nội dung, thẻ đóng
D. thẻ đóng, nội dung
Đáp án: 1(B), 2(B), 3(C), 4(C), 5(C)
---
Bài sau: Bảo mật web và ứng dụng (3) - Tạo giao diện giả mạo bằng CSS
