Trường ĐH CNTT TP.

HCM

Bảo mật web và ứng dụng

ThS. Phan Thế Duy
Buổi 1 - C

2
Nội dung

• Mô hình MVC, MVP và MVVM trong lập trình

• Nguyên tắc hoạt động của ứng dụng web
• Mô hình MVC trong lập trình web
• Ôn tập HTML
• Ôn tập Javascript, Cookie, jQuery

3
Mô hình MVC – MVP - MVVM

• Model View Controller (MVC)

• Model View Presenter (MVP)
• Model View View-model (MVVM)

MVC, MVP, và MVVM là 3 mô hình thông dụng khi phát triển phần mềm.
Nó giúp người lập trình dễ kết hợp, dễ kiểm thử và dễ duy trì.

4
Mô hình MVC – MVP - MVVM

5
 Mô hình MVC

Model
Model nghĩa là các dữ liệu cần thiết để hiển thị ở View. Model đại diện cho một tập
hợp các lớp mô tả business logic (business model và data model). Nó cũng định
nghĩa các business rules cho dữ liệu (nghĩa là cách mà dữ liệu thay đổi và được
dùng)
View
View đại diện cho các thành phần UI như XML, HTML. View sẽ hiển thị dữ liệu đã
qua xử lý từ Controller. Model và View tương tác với nhau qua Observer pattern.
Controller
Controller có trách nhiệm xử lý các yêu cầu (request) được gửi đến. Nó sẽ xử lý các
dữ liệu của người dùng qua Model và trả về kết quả ở View
6
 Mô hình MVC – Ví dụ
MVC rất tốt trong việc phân chia
model và view.
- Dễ dàng test model vì nó không
liên quan đến view và view
không có gì nhiều để test (unit
test).
- Tuy nhiên Controller vẫn còn
nhiều hạn chế
- Khắc phục bằng mô hình MVP
Mặt hạn chế của Controller
•Khả năng kiểm thử (test) - Controller bị
ràng buộc với Android API nên sẽ khó để
thực hiện unit test.
•Tính linh hoạt - Controller liên quan khá
chặt chẽ với các view. Nếu chúng ta thay
đổi view chúng ta sẽ phải thay đổi lại ở
controller.
•Khả năng duy trì - Qua thời gian,
controller sẽ ngày càng phình to ra do việc
thêm code dẫn đến việc khó kiểm soát.
7
Mô hình MVC – Code (1)

8
Mô hình MVC – Code (2)

9
Mô hình MVC – Code (3)

10
Mô hình MVP

▪ Mô hình MVP cũng gần giống với mô hình MVC. Nó được kế thừa
từ mô hình MVC, trong đó Controller được thay thế bới Presenter.
▪ Mô hình này chia ứng dụng thành 3 phần chính: Model, View và
Presenter

Model
Đại diện cho một tập hợp các lớp mô tả business logic. Nó cũng định
nghĩa các business rules cho dữ liệu (nghĩa là cách mà dữ liệu thay
đổi và được dùng)
View
View là thành phần tương tác trực tiếp với người dùng. Nó không bao
gồm bất kỳ việc xử lý logic nào.
Presenter
Presenter sẽ nhận input của người dùng thông qua View, rồi xử lý dữ
liệu của người dùng với sự trợ giúp của Model và trả kết quả về View.
Presenter giao tiếp với View qua interface.

11
Mô hình MVP

▪ Trong cấu trúc MVP, presenter thao túng (xử lý) model và cập
nhật ở view.
▪ View và Presenter tách biệt với nhau hoàn toàn và giao tiếp với
nhau qua thông qua interface. Vì nếu tách riêng từng phần ở
view sẽ dễ dàng cho việc kiểm thử ứng dụng ở MVP hơn so với
mô hình MVC.

12
Mô hình MVP – Code ví dụ

13
Mô hình MVVM (Model-View-
ViewModel)

Ví dụ về MVVM trong ứng dụng iOS

14
Mô hình MVVM (Model-View-
ViewModel)
• Mô hình MVVM hỗ trợ two-way data binding giữa View
và View-Model. Điều này cho phép tự động lan truyền
sự thay đổi, trong state của View-Model đến View.
• View-Model sử dụng mô hình observer để thông báo sự
thay đổi trong View-Model đến Model.
• MVVM sẽ tốn bộ nhớ hơn
• Cả MVP và MVVM đều tốt hơn MVC trong việc chia nhỏ
ứng dụng thành các modular, các component đơn mục
đích, nhưng chúng cũng làm ứng dụng phức tạp hơn.
• Với một ứng dụng đơn giản với chỉ với vài screen, MVC
là đủ.
• MVVM với data binding sẽ ít code hơn.

15
Nguyên tắc hoạt động của web

16
Nguyên tắc hoạt động của web

17
Mô hình MVC trong lập trình
web

• Tái sử dụng code

• Lập trình/sửa lỗi dễ dàng do có sự phân biệt
tính năng

18
Mô hình MVC trong lập trình
web

19
Hyper Text Markup Language

• Là standard markup language dùng tạo ra

trang web
• Các thành phần HTML (tag) tạo nên cấu trúc
của trang web
• Trình duyệt sẽ không hiển thị tag mà biểu diễn
nội dung của chúng

https://www.w3schools.com/html/html_intro.asp
https://www.w3.org/html/ 20
Cấu trúc trang web

21
22
HTML Form

• Định nghĩa form để thu thập dữ liệu nhập vào từ

người dùng
<form>
…
</form>
• Thuộc tính cơ bản của form:
• Action
• Method:
• GET. Ví dụ: https://timkiem.vnexpress.net/?q=iphone%20x
• POST
• Name
• Enctype 23
HTML Form

• Action: chỉ định URL sẽ gửi dữ liệu

• Method: chỉ định phương thức gửi dữ liệu
▪ GET:
▪ Thêm dữ liệu và URL dạng name=value → dữ liệu sẽ bị
nhìn thấy → Không gửi dữ liệu nhạy cảm
▪ Độ dài URL: khoảng 3000 ký tự
▪ Có thể lưu history, bookmark
▪ POST:
▪ Dữ liệu thêm vào Body của HTTP request
▪ Không giới hạn kích thước
▪ Không thể bookmark

24
HTML Form

• Enctype
▪ application/x-www-form-urlencoded: tất cả các ký tự
được mã hóa trước khi gửi
▪ multipart/form-data: không mã hóa ký tự, bắt buộc
khi sử dụng file upload
▪ text/plain: khoảng trắng thành +, còn lại không mã
hóa
• Name: sử dụng xác định cây DOM

https://www.w3schools.com/html/html_forms.asp 25
Thuộc tính enctype trong HTML
<form>

26
Thuộc tính enctype trong HTML
<form>

27
Thuộc tính enctype trong HTML
<form>

28
Thuộc tính enctype trong HTML
<form>
Sự khác nhau giữa 2 thuộc tính:
x-www-form-urlencoded multipart/form-data
Toàn bộ dữ liệu form gửi Chia thành nhiều khúc để
dưới dạng chuỗi dài gửi và mỗi phần được
tách biệt bởi chuỗi
boundary
Thường dùng gửi text Thường dùng gửi binary
Phải encode các ký tự Không cần encode
Hiệu quả hơn
29
HTML Form

• <input> có các loại:

• Hidden
• Text
• Submit button  <button>
• Radio
• Checkbox
• Button  <button>
• Reset
• Password
• Number
• <select>  <datalist>
• <textarea>
https://www.w3schools.com/html/html_form_elements.asp
https://www.w3schools.com/html/html_form_input_types.asp 30
JavaScript

• Ngôn ngữ lập trình thông dịch cấp cao

• Js dùng lập trình hành vi trang web
• HTML định nghĩa nội dung
• CSS dùng trang web
• Không chỉ dùng cho web
• Nhiều chương trình server và desktop, như Node.js
• CSDL: MogoDB, CouchDB

31
JavaScript có thể làm gì?

• Thay đổi Content HTML

document.getElementById('demo').innerHTML = 'Hello JS';
• Thay đổi giá trị Attribute
document.getElementById("demo").style.fontSize = "35px";
or
document.getElementById('demo').style.fontSize = '35px’;
• Ẩn và hiện HTML Element
document.getElementById("demo").style.display = "none";
or
document.getElementById('demo').style.display = 'none’;
document.getElementById("demo").style.display = "block";

32
JavaScript – Ví dụ

33
JavaScript có thể đặt ở đâu?

• Trong HTML:
• JS code đặt giữa <script> và </script>
• JS code có thể đặt trong file .js riêng
Dùng thuộc tính src (source) = “URL”
Ưu điểm:
• Tách biệt code với HMTL
• Dùng lại code
• Dễ đọc và bảo trì
• Cache JS để tăng tốc độ load trang
• Thẻ <script> có thể đặt tại <head> hoặc <body>

34
JavaScript – Hiển thị dữ liệu

• innerHTML: hiện trong HTML element

• document.write(): hiện trong HTML
• window.alert(): hiện trong popup
• window.console.log(): hiện trong console của
trình duyệt

35
Một số lưu ý

• Ngôn ngữ CASE sensitive: Var != var

• Làm sạch dữ liệu:
• Biến nếu gán bằng undefined → type và value là
undefined <> biến = “” (string)
• Chỉ gán null cho type là đối tượng → loại vẫn là
object, giá trị null
• Khai báo lại biến:
var carName = "Volvo";
var carName;
carName vẫn có giá trị là Volvo
• Không có array, array là object

36
JavaScript Function

• Block code thực hiện nhiệm vụ cụ thể khi được

gọi:
• Khi có event (click vào nút)
• Được gọi từ JS code
• Tự động (tự gọi)
• Định nghĩa:
function <tên hàm>([<tham số 1>], [<tham số 2>],…)
{
// Code
}
• Lưu ý: sẽ gọi định nghĩa hàm nếu thiếu ()
37
JavaScript Function

• anonymous function: function không có tên

• Nếu có nhiều tham số có thể dùng đối tượng

arguments để lấy
• Lưu ý:
• Arguments are Passed by Value
• Objects are Passed by Reference

38
JavaScript Function

• Trong HTML, đối tượng global chính là HTML

page
• Trong trình duyệt, đối tượng page là window
trình duyệt
→ Gọi myFunction() == window.myFunction()

39
JavaScript - Object

• Định nghĩa:

40
JavaScript - Object

• Sử dụng:
• Truy cập thuộc tính:
• objectName.propertyName
• objectName.propertyName
• Truy cập phương thức:
objectName.methodName()
• Lưu ý:
KHÔNG KHAI BÁO
String, Number và Boolean như Object

41
JavaScript Event

• HTML Event là thứ xảy ra với HTML elements:

• Khi trang web load xong
• Thay đổi giá trị input
• Click vào button
• …
• JS cho phép phản ứng lại event: xử lý, xác
thực input, hoạt động của người dùng và trình
duyệt

42
JavaScript Event

• Thêm trực tiếp vào thuộc tính event của HTML

element
<element event='some JavaScript’>
• Truyền hàm vào thuộc tính event của HTML
element
• <element event=“<tên_function()>”>

43
 JavaScript Event

https://www.w3schools.com/Js/js_events_examples.asp
44
JavaScript Form

• Xác thực form bằng JS

• Ví dụ: ngăn submit nếu input rỗng

45
JavaScript Form

• Xác thực tự động bằng thuộc tính required

46
Xác thực dữ liệu

• Đảm bảo input: chính xác, rõ ràng và hữu dụng

• Một số loại:
• Phải nhập giá trị
• Ngày
• Số
• Thực hiện:
• Server side: sau khi gửi đến server
• Client side: trước khi gửi

47
48
 Document Object Model

• Giao diện lập trình độc lập ngôn ngữ và nền

tảng cho HTML và XML Document
• Truy cập và thay đổi: content, style, structure

https://www.w3schools.com/js/js_htmldom.asp
https://www.w3.org/DOM/
https://dom.spec.whatwg.org/ 49
HTML DOM

• Mô hình đối tượng chuẩn và giao diện lập trình

cho HTML
• Định nghĩa:
• Thành phần HTML = object
• Property của thành phần HTML
• Method để truy cập thành phần HTML
• Events cho thành phần HTML
The HTML DOM is a standard for how to get,
change, add, or delete HTML elements

50
Cấu trúc DOM

• Nút gốc: tài liệu HTML, biểu diễn bởi <html>.

• Nút phần tử
• Nút văn bản
• Nút thuộc tính (attribute node) và nút chú
thích (comment node).

52
Cấu trúc DOM

53
Cấu trúc DOM

54
Một số thuộc tính phổ biến

55
Một số thuộc tính phổ biến

• nodeValue
• nodeName
• nodeType
• document.body: body của HTML
• document.documentElement: toàn bộ nội dung
HTML

56
Một số phương thức phổ biến

57
https://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_doc_writeln
Thêm / Xóa HTML element

58
Tìm đối tượng HTML

https://www.w3schools.com/Js/js_htmldom_document.asp 59
Thêm Event dùng HTML DOM

60
HTML DOM EventListener

• Dùng hàm addEventListener() để thêm event

handler cho HTML element
• Không viết đè handler đang có
• Thêm nhiều handler cho 1 element
• Thêm cho bất kỳ đối tượng DOM
• Tách biệt HTML → dễ đọc
• Dễ dàng remove event listener dùng
removeEventListener()
• Cú pháp:
element.addEventListener(event, function,
useCapture);
61
 HTML DOM EventListener

• Ví dụ:
1.

2.

3.

4.

62
Thuộc tính quan hệ

63
Truy xuất DOM

childNodes

64
Truy xuất DOM

• Node.parentNode:
Node.parentNode.parentNode.
• Node.childNodes: trả về array
• Node.firstChild:
Node.childNodes[0].
• Node.lastChild:
Node.childNodes[Element.childNodes.length-1].
• Node.nextSibling
• Node.previousSibling
65
Truy xuất DOM

66
Browser Object Model

• Cho phép JS “nói chuyện” với trình duyệt

• Đối tượng window:
• window.location
• window.history
• window.navigator
• Timing Events
• setTimeout()
• setInterval()
• document.cookie

67
Asynchronous JavaScript And
XML

• Giới thiệu:
• Không là ngôn ngữ lập trình
• Là sự kết hợp: XHR, JS và HTML DOM
• Chức năng:
• Đọc dữ liệu từ server sau khi trang đã load
• Cập nhật trang web mà không cần reload
• Gửi dữ liệu “ngầm” đến server

68
Nguyên tắc hoạt động

69
XMLHttpRequest

• Đối tượng XHR được dùng để tương tác với

server
• Nhận dữ liệu từ URL mà không cần tải lại toàn
bộ trang web
• XHR có thể nhận bất kỳ kiểu dữ liệu (không chỉ
XML)
• Hỗ trợ giao thức khác HTML, như: file, ftp.

https://www.w3schools.com/xml/dom_httprequest.asp
70
Ajax

71
Ví dụ: GET

72
Ví dụ: POST

73
jQuery

• Thư viện JS, làm đơn giản việc lập trình JS và

dễ dàng để học
Write less, do more
• Nhiều công ty lớn dùng:
• Google
• Microsoft
• IBM
• Netflix

74
jQuery – Cú pháp

$(selector).action()
• $: định nghĩa, truy cập jQuery
• (selector): tìm HTML element
• action(): hành động muốn thực hiện
• Ví dụ:
• $(this).hide(): ẩn element hiện tại
• $("p").hide(): ẩn tất cả <p>
• $(".test").hide(): ẩn tất cả element có class="test"
• $("#test").hide(): ẩn element có id="test"

75
jQuery

• Event Document đã load xong: ngăn thực thi

code khi chưa load xong page

76
jQuery
Selector

77
jQuery Event

• Cú pháp:

78
jQuery - AJAX get()

• Cú pháp:
• URL: chỉ URL muốn request
• Callback: tên hàm thực thi
• Ví dụ:

79
jQuery - AJAX post()

• Cú pháp:
• URL: chỉ định URL muốn request
• Data: dữ liệu muốn gửi
• Callback: tên hàm muốn thực thi
• Ví dụ:

80
 Same Origin Policy

• Cơ chế bảo mật quan trọng trong trình duyệt

• Hạn chế Document hoặc script được tải từ một
nguồn có thể tương tác với tài nguyên từ
nguồn khác
• Mục đích:
Bảo vệ người dùng khi truy cập trang web độc hại

https://developer.mozilla.org/en-US/docs/Web/Security/Same-origin_policy
https://www.w3.org/Security/wiki/Same_Origin_Policy
81
SOP

Host
Origin = Port
Protocol
Cho URL:
http://store.company.com/dir/page.html
URL Kết quả Nguyên nhân
http://store.company.com/dir2/other.html
http://store.company.com/dir/inner/another.html
https://store.company.com/secure.html
http://store.company.com:8080/secure.html
http://shop.company.com/secure.html
82
SOP

1. Hãy cho ví dụ thành phần HTML truy cập

cross-origin?
2. Cho một ví dụ bypass SOP?
3. Cách để bypass SOP?

83
Danh sách đề tài (chưa cập
nhật)

1. Android Security
2. IOS Security
3. OWASP Testing Guide
4. VEGA – Vulnerability Scanner
5. Nikto
6. Acunextix
7. ZAP
8. Search exploit – Exploit DB

84
Danh sách đề tài (chưa cập
nhật)

9. NMAP – Network Scanner

10.Burp Suite Scanner
11.Open VAS
12.Arachni – Web Application Security Scanner
Framework
13.BeEF – The Browser Exploitation
Framework
14.Server Side Request Forgery (SSRF)

85
Tóm tắt

• Hiểu được cách xác thực phía client → bypass

• Hiểu được cách gửi dữ liệu bằng javascript

86
 Bảo mật web và ứng dụng
ThS. Phan Thế Duy

Trường ĐH CNTT TP. HCM