Phát triển thư viện hỗ trợ giảng dạy và học tập cho sinh viên khoa công nghệ thông tin trường cao đẳng công nghệ thủ đức

Thể hiện qua các hoạt động như đưa Giảng viên, Sinh viên thực tập tại doanh nghiệp, mời chuyên gia chia sẻ về công nghệ trong dự án, chương trình đào tạo thể hiện các công nghệ mà hiện n

ỦY BAN NHÂN DÂN TP.HCM

TRƯỜNG CAO ĐẲNG CÔNG NGHỆ THỦ ĐỨC

NGHIÊN CỨU KHOA HỌC NĂM HỌC 2020 - 2021

Tên đề tài: Phát triển thư viện hỗ trợ giảng dạy và học tập cho sinh viên Khoa Công nghệ thông tin Trường Cao đẳng

ỦY BAN NHÂN DÂN TP.HCM

TRƯỜNG CAO ĐẲNG CÔNG NGHỆ THỦ ĐỨC

NGHIÊN CỨU KHOA HỌC NĂM HỌC 2020 - 2021

Tên đề tài: Phát triển thư viện hỗ trợ giảng dạy và học tập cho sinh viên Khoa Công nghệ thông tin Trường Cao

MỤC LỤC

DANH MỤC CHỮ VIẾT TẮT iii

DANH MỤC BIỂU BẢNG SỐ LIỆU iv

DANH MỤC HÌNH ẢNH v

PHẦN MỞ ĐẦU ix

1 Lý do chọn đề tài ix

2 Mục đích nghiên cứu xi

3 Đối tượng và khách thể nghiên cứu xiii

4 Giả thuyết nghiên cứu xiv

5 Nhiệm vụ nghiên cứu xv

6 Phương pháp nghiên cứu xv

7 Phạm vi ảnh hưởng xvi

PHẦN NỘI DUNG 1

CHƯƠNG 1: CƠ SỞ LÝ LUẬN 1

1.1 Tổng quan về đề tài 1

1.2 Giới thiệu về hệ sinh thái phần mềm 2

1.3 Xác định nền tảng phát triển web 2

CHƯƠNG 2: PHÂN TÍCH KỸ THUẬT 4

2.1 Tìm hiểu về RESTful API 4

2.2 Sự cần thiết Mock API 5

2.3 Bảo mật website 16

2.4 Hệ sinh thái hướng module 37

2.5 Thu thập dữ liệu từ Stack Overflow 43

CHƯƠNG 3: THỰC TRẠNG VÀ GIẢI PHÁP CỦA VẤN ĐỀ NGHIÊN CỨU 48

3.1 Thiết kế theo hướng RESTful API 48

3.2 Bảo mật website 49

3.3 Hệ sinh thái hướng module 59

3.4 Thu thập dữ liệu Stack Overflow 62

CHƯƠNG 4: KẾT QUẢ NGHIÊN CỨU 70

4.1 Xây dựng module quản lý mã nguồn web front-end 70

4.2 Xây dựng mock api tạo dữ liệu mẫu 72

4.3 Thu thập câu hỏi và trả lời từ Stack Overflow để xây dựng dữ liệu mẫu về hỏi đáp 72

4.4 Xây dựng hệ thống mẫu về giải pháp bảo mật website 77

KẾT LUẬN VÀ KIẾN NGHỊ 80 TÀI LIỆU THAM KHẢO 81

DANH MỤC BIỂU BẢNG SỐ LIỆU

Bảng 1 - Kết quả thu thập dữ liệu từ Stack Overflow 74

DANH MỤC HÌNH ẢNH

Hình a - Mô hình thiết kế web xi

Hình b - Mô hình thiết kế web theo hướng module xii

Hình c - Gọi API từ Mock API xii

Hình 2.1 - Thiết kế web với RESTful API 4

Hình 2.2 - Mô tả hoạt động của RESTful API (Nguồn: restful-api-design.readthedocs.io) 5

Hình 2.3 - Kiến trúc monolith 6

Hình 2.4 - Gọi API từ dịch vụ khác 8

Hình 2.5 - Gọi API từ Mock API 8

Hình 2.6 - Màn hình ứng dụng mockapi.io 9

Hình 2.7 - Khởi tạo dự án trên mockapi.io 9

Hình 2.8 - Tạo mới project 9

Hình 2.9 - Thông tin project 10

Hình 2.10 - Thông tin project 11

Hình 2.11 - Project sau khi tạo 11

Hình 2.12 - Project sau khi tạo 12

Hình 2.13 - Các thuộc tính trong đối tượng 12

Hình 2.14 - Các phương thức được cung cấp 13

Hình 2.15 - Cấu trúc đối tượng 14

Hình 2.16 - Tạo dữ liệu mẫu 14

Hình 2.17 - Tạo dữ liệu mẫu 14

Hình 2.18 - Tạo dữ liệu mẫu 15

Hình 2.19 - Thông tin API truy cập 15

Hình 2.20 - Danh sách cats hiển thị trên web 16

Hình 2.21 - Truy cập 1 đối tượng 16

Hình 2.22 - Ví dụ lỗi SQL Injection (Nguồn: slideshare.net) 17

Hình 2.23 - Ví dụ lỗi SQL Injection (Nguồn: bartosha.com) 17

Hình 2.24 - Ví dụ lỗi SQL Injection (Nguồn: portswigger.net) 18

Hình 2.25 - Ví dụ lỗi SQL Injection 19

Hình 2.26 - Ví dụ lỗi SQL Injection 20

Hình 2.27 - Mô phỏng đăng nhập 21

Hình 2.28 - Mô phỏng đăng nhập 21

Hình 2.29 - Mô hình tấn công XSS (Nguồn: ssl.vn) 22

Hình 2.30 - Mã hóa chuỗi người dùng nhập vào 23

Hình 2.31 - Mã hóa chuỗi người dùng nhập vào 23

Hình 2.32 - Mã hóa chuỗi người dùng nhập vào 24

Hình 2.33 - Mô phỏng đăng nhập 24

Hình 2.34 - Thực hiện tấn công DDOS 27

Hình 2.35 - Mô phỏng upload tập tin 27

Hình 2.36 - Chuẩn bị file upload chứa mã độc 28

Hình 2.37 - Nội dung file mã độc 28

Hình 2.38 - Upload file mã độc 28

Hình 2.39 - Upload file mã độc 29

Hình 2.40 - Truy cập file mã độc 29

Hình 2.41 - Truy cập file mã độc 30

Hình 2.42 - Thực thi file mã độc 30

Hình 2.43 - Nội dung file mã độc 31

Hình 2.44 - Thực thi file mã độc 31

Hình 2.45 - Kiểm chứng kết quả thực thi 32

Hình 2.46 - Không cho phép ghi đè file 32

Hình 2.47 - Kiểm tra kích thước file 33

Hình 2.48 - Lưu hình ảnh tập trung 33

Hình 2.49 - Thiết lập cho phép upload 1 số loại file 34

Hình 2.50 - Mô phỏng tấn công IDOR 35

Hình 2.51 - Thông tin user có id = 1 36

Hình 2.52 - Thông tin user có id = 2 36

Hình 2.53 - Các package trên Packagist 38

Hình 2.54 - Các package trên Packagist 39

Hình 2.55 - Các plugin trong WordPress 39

Hình 2.56 - Các thư viện của Node.js 40

Hình 2.57 - Các thư viện của Java 40

Hình 2.58 - Chế độ Preview 41

Hình 2.59 - Mã HTML của module 42

Hình 2.60 - Mã CSS của module 43

Hình 2.61 - Mốc dữ liệu thu thập 46

Hình 2.62 - Các tags có lượt quan tâm lớn 46

Hình 2.63 - Các tags có lượt quan tâm ít 46

Hình 3.1 - Thiết kế hướng RESTful API giúp tương tác với các ứng dụng khác 48

Hình 3.3 - Màn hình login 50

Hình 3.4 - Màn hình login 50

Hình 3.5 - Câu truy vấn SQL 51

Hình 3.6 - Màn hình login được tấn công 51

Hình 3.7 - Câu truy vấn SQL sau khi gắn mã độc 52

Hình 3.8 - Mã hóa các mã độc 53

Hình 3.9 - Mã hóa dữ liệu người dùng 53

Hình 3.10 - Màn hình đăng nhập 54

Hình 3.11 - Đăng nhập thành công 55

Hình 3.12 - Chèn thành công mã độc vào database 55

Hình 3.13 - Màn hình chỉnh sửa thông tin 57

Hình 3.14 - ID chưa được mã hóa trên đường dẫn 57

Hình 3.15 - Chèn mã độc 58

Hình 3.16 - Mô hình client-server 59

Hình 3.17 - Mô hình thiết kế web 60

Hình 3.18 Mô hình thiết kế web theo hướng module 61

Hình 3.19 - Mô hình thiết kế web theo hướng module 62

Hình 3.20 - Thu thập dữ liệu tags 63

Hình 3.21 - Thuộc tính bảng tags 63

Hình 3.22 - Cấu trúc bảng tags 64

Hình 3.23 - Cấu trúc các cột dùng chung 64

Hình 3.24 - Trang question trên Stack Overflow 65

Hình 3.25 - Cấu trúc bảng questions 65

Hình 3.26 - Cấu trúc bảng tags_questions 66

Hình 3.27 - Cấu trúc bảng answers 66

Hình 3.28 - Cấu trúc bảng comments 67

Hình 3.29 - Lược đồ ERD 68

Hình 4.1 - Trang hiển thị danh sách module 70

Hình 4.2 - Trang hiển thị chi tiết 1 module 71

Hình 4.3 - Kiến trúc trang HTML của module 71

Hình 4.4 - Kiến trúc CSS của module 72

Hình 4.5 – Màn hình quản lý các trang 73

Hình 4.6 - Màn hình quản lý tags 73

Hình 4.7 - Màn hình quản lý questions 75

Hình 4.8 - Màn hình quản lý câu trả lời 75

Hình 4.9 - Màn hình quản lý mẫu pattern 76

Hình 4.10 - Màn hình quản lý biểu thức chính quy 77

Hình 4.11 - Kiểm tra ràng buộc truy vấn dữ liệu 78

Hình 4.12 - Thêm cột version_id vào bảng 79

Hình 4.13 - Thêm token vào yêu cầu 79

PHẦN MỞ ĐẦU

1 Lý do chọn đề tài

+ Tính thời sự của đề tài:

Trường Cao đẳng Công nghệ Thủ Đức tiếp cận và phát triển hướng dạy và học theo dự án thực tế, bám sát thực tiễn Thể hiện qua các hoạt động như đưa Giảng viên, Sinh viên thực tập tại doanh nghiệp, mời chuyên gia chia sẻ về công nghệ trong dự án, chương trình đào tạo thể hiện các công nghệ mà hiện nay đang sử dụng tại doanh nghiệp, … Với mong muốn sinh viên ra trường có cơ hội việc làm, làm đúng ngành nghề đã được đào tạo

Trong quá trình thực hiện công tác tuyển sinh, đánh giá một trong những câu hỏi lớn mà xã

hội quan tâm “học tại Khoa CNTT Trường Cao đẳng Công nghệ Thủ Đức, sinh viên ra trường có thể làm được gì?” Đây là một câu hỏi lớn, ngoài việc chia sẻ thảo luận ở mức lý

luận, thì thông qua cách thức trình bày các sản phẩm của Khoa CNTT đến đối tượng tuyển sinh là một minh chứng rõ ràng nhất để trả lời câu hỏi trên

Xây dựng hệ sinh thái phần mềm trên nền tảng web của Khoa CNTT, cung cấp nhiều dịch

vụ để Giảng viên và Sinh viên có môi trường giảng dạy và học tập bám sát thực tiễn Để làm được chuyện này, web Khoa CNTT phải được thiết kế hướng dịch vụ, phân tích chia nhỏ thành các module nhỏ xử lý nghiệp vụ, cung cấp API tương tác với hệ thống, … Đây cũng là xu thế hiện nay mà phần mềm đang thiết kế theo hướng microservice

Kiến trúc web Khoa CNTT đã được thiết kế và hiện thực trong NCKH năm học 2019-2020, trong đề tài NCKH năm nay (2020-2021) sẽ phát triển các tiện ích tích hợp vào web Khoa CNTT

+ Tính cấp thiết đáp ứng nhu cầu phát triển kinh tế - xã hội, nâng cao chất lượng đào tạo:

Đào tạo bám sát thực tiễn là yêu cầu cấp thiết mà lãnh đạo Nhà trường luôn quán triệt và

đề ra đối với giảng viên Chính vì vậy trong chương trình học luôn luôn thể hiện nội dung thực tiễn mà sinh viên cần phải thực hiện

Web Khoa CNTT được thiết kế trên nền tảng Laravel 8.x và PHP 7.3+, xu hướng chạy trên PHP 8 Trước đây PHP luôn được đánh giá là khó phát triển trong các dự án lớn (PHP 5.6), với sự thay đổi mạnh mẽ trong PHP 7.x và 8.x sắp tới đây, đã giúp PHP có một bước tiến vượt bậc

Ví dụ PHP 5.6 khi tạo một phương thức foo với cú pháp như sau:

public function foo($input) {}

Với cách khai báo như trên dễ phát sinh lỗi không mong muốn khi không xác định rõ kiểu

dữ liệu của biến $input, dẫn đến tốn thêm chi phí xử lý khi yêu cầu truyền đúng kiểu dữ liệu

Ví dụ PHP 8.0 khi tạo một phương thức foo với cú pháp như sau:

public function foo (Foo|Bar $input): int|float {}

Sự thay đổi mạnh mẽ trong việc ràng buộc kiểu dữ liệu truyền vào và trả về, đưa ra xử lý ngoại lệ khi không sử dụng đúng, điều này giúp cho việc hiện thực code trở nên chặt chẽ

và rõ ràng hơn mà ngôn ngữ Java, C#, … đã minh chứng trong thời gian qua

Với việc tạo ra Web Khoa CNTT không chỉ là trang tin tức – thông báo mà còn là một trang dịch vụ, cung cấp các tiện ích để Giảng viên và Sinh viên sử dụng phục vụ mục đích học tập Điều này minh chứng cho việc thiết kế web theo hướng dễ mở rộng, tạo ra hệ sinh thái phần mềm trên nền tảng web Khoa CNTT

Trong đề tài này tác giả phát triển một số dịch vụ trên nền web Khoa, như ngân hàng câu hỏi và trả lời được thu thập từ Stack Overflow, ngân hàng module web HTML/CSS/JS để

sử dụng trong thiết kế web, minh họa các lỗi bảo mật hay gặp trong phát triển web, mô tả Mock API

2 Mục đích nghiên cứu

Đề tài gồm 04 mục tiêu

(1) Xây dựng module quản lý mã nguồn web front-end

Với cách thiết kế mới này, một trang web được chia ra các module nhỏ hơn, giúp tái sử dụng giao diện trong thiết kế

Trước đây, cách thiết kế mang tính bao đóng Các trang HTML được cắt trực tiếp từ hình Dẫn đến một số vấn đề như tái sử dụng mã HTML cho những dự án khác hoặc thay đổi công nghệ dùng trong HTML như LESS, SASS, …

Hình a - Mô hình thiết kế web

Với cách tiếp cận hướng module, chia nhỏ trang thành những module nhỏ hơn Cách thiết

kế này giúp tái sử dụng code, áp dụng được các thư viện như LESS, SASS, … mà không thay đổi bố cục trang

Hình b - Mô hình thiết kế web theo hướng module

Với sự phát triển mạnh mẽ các công nghệ web như Vue.js, React, WordPress, Joomla, … Cách thiết kế hướng module giúp nhúng mã HTML một cách thuận lợi

(2) Xây dựng mock api tạo dữ liệu mẫu

Trong quá trình phát triển phần mềm, hiện thực back-end và front-end được phát triển đồng thời Dẫn đến tình trạng các công việc phụ thuộc vào nhau Front-end cần sử dụng API để hiển thị dữ liệu trong khi back-end đang hiện thực các API

Hình c - Gọi API từ Mock API

Cần thiết để tạo ra một hệ thống giả lập các API, trả về dữ liệu mẫu theo yêu cầu từ end Nhờ đó có thể hoàn thành các công việc trong front-end Giới thiệu cách sử dụng hệ thống https://www.mockapi.io/ cung cấp các API mẫu, phát triển bộ API mẫu để sử dụng

(3) Thu thập câu hỏi và trả lời từ Stack Overflow để xây dựng dữ liệu mẫu về hỏi đáp

Stack Overflow là mạng xã hội hỏi-đáp về công nghệ lớn nhất hiện nay, mô tả các vấn đề gặp phải trong quá trình phát triển phần mềm

Thu thập dữ liệu từ Stack Overflow, tạo cơ sở xác định công nghệ hiện nay đang được sử dụng (số câu hỏi nhiều nhất về một kỹ thuật) Giảng viên và sinh viên có được nguồn tư liệu giảng dạy và học tập

(4) Xây dựng hệ thống mẫu về giải pháp bảo mật website

Mô phỏng các lỗi bảo mật thường gặp trong quá trình phát triển website, tạo mẫu ứng dụng gây ra các lỗi bảo mật

3 Đối tượng và khách thể nghiên cứu

+ Đề tài được thực hiện nghiên cứu để áp dụng trong phạm vi Khoa CNTT Trường Cao đẳng Công nghệ Thủ Đức

+ Hệ thống được phát triển trên nền tảng Laravel

+ Tham khảo ý kiến đóng góp từ GV Khoa CNTT sau khi đã sử dụng hệ thống

4 Giả thuyết nghiên cứu

+ Xác định công nghệ kỹ thuật cần đào tạo là nhiệm vụ hàng đầu mà Giảng viên cần thực hiện

Phân tích nguồn dữ liệu tuyển dụng từ các trang tuyển dụng, cũng là một căn cứ để xác định nền tảng phù hợp trong đào tạo Hoặc tìm kiếm thêm thông tin từ cộng đồng mã nguồn

mở như GitHub, Stack Overflow, … để có các đánh giá thực tế về nền tảng đang lựa chọn Qua đó thấy rằng, Laravel là một nền tảng tốt trong việc xây dựng ứng dụng web có tính tương tác cao Laravel được thiết kế dưới dạng module (vendor), cung cấp giải pháp tích hợp mã nguồn mở vào hệ thống một cách dễ dàng Mô hình MVC được Laravel thiết kế một cách nhuần nhuyễn, cụm từ “thin controller, fat model” được hiện thực một cách rõ nét Để từ đó, Laravel giúp nhà phát triển phần mềm hiện thực hệ thống một cách tốt nhất

+ Đào tạo thông qua dự án có kiến trúc như các dự án đang phát triển tại doanh nghiệp

Giúp sinh viên có cơ hội tham gia dự án, trải nghiệm trong quá trình học tập Từ đó có cơ hội việc làm cao hơn khi ra trường Xây dựng hệ thống web Khoa có tính tương tác từ người

sử dụng (cụ thể là GV/SV Khoa CNTT), tạo ra được hệ sinh thái gồm các tiện ích mở rộng trên nền tảng web Khoa CNTT Đây cũng là xu thế trong phát triển phần mềm hiện nay, từ

sự tương tác đó tạo ra mối quan hệ khăng khít giữa người sử dụng và hệ thống, làm cho hệ thống trở nên tốt hơn, đa dạng hơn Việc chọn lựa nền tảng phát triển phù hợp với nguồn lực và đặc thù của Khoa CNTT cần được xem xét một cách nghiêm túc

+ Tạo sự cuốn hút trong học tập

Đồ án triển khai mang tính thực tế từ đó tạo sự yêu thích trong môn học, sinh viên tự tìm hiểu và nghiên cứu Web Khoa CNTT hỗ trợ phần nội dung hỏi đáp từ Stack Overflow đã được phân loại, là nguồn tài nguyên tham khảo tốt trong học tập Ngoài ra web Khoa còn cung cấp nhiều module HTML/CSS/JS được lưu trữ qua các năm học

5 Nhiệm vụ nghiên cứu

+ Tìm hiểu về các kỹ thuật phát triển web theo hướng RESTful API

÷ Access control list

+ Thư viện mã nguồn mở trên Packagist (https://packagist.org)

÷ PHPExcel: xử lý dữ liệu với Excel

÷ Filemanager: quản lý file media

÷ Access control list: quản lý xác thực và phân quyền

+ Thiết kế các module theo kiến trúc của Laravel để tích hợp vào hệ thống

6 Phương pháp nghiên cứu

+ Phương pháp nghiên cứu tài liệu

Nghiên cứu các tài liệu liên quan đến Laravel, nguồn tài liệu chính tham khảo tại website của Laravel (https://laravel.com)

+ Phương pháp thực nghiệm

Cài đặt, kiểm tra, phân tích source code Laravel và các thư viện mã nguồn mở liên quan (excel, file, security, )

+ Phương pháp điều tra

Tham khảo các thiết kế hướng Microservice

và SV Khoa CNTT có thể phát triển thêm các tiện ích mở rộng tích hợp vào web Khoa CNTT Bên cạnh đó, web được thiết kế dưới dạng RESTful API, GV và SV theo hướng di động có thể phát triển các ứng dụng trên nền tảng này

Chọn lựa nền tảng để phát triển web Khoa CNTT được xem xét trên nhiều yếu tố Bên cạnh web Khoa CNTT là trang đăng tin truyền thống, thì web cũng cung cấp các tiện ích mở rộng và tích hợp vào web Để từ đó tạo ra một hệ sinh thái với nhiều tiện ích trên web như: đăng nhập bằng Google, Facebook, GitHub, … hay đăng tin tuyển dụng, việc làm part-time, … Từ đó SV có được trải nghiệm dự án thực tế, là điểm nhấn trong CV khi SV đăng

ký tuyển dụng

Đào tạo bám sát thực tiễn là xu hướng cũng là yêu cầu mà lãnh đạo Nhà trường xuyên suốt định hướng trong thời gian vừa qua Bên cạnh việc đưa Giảng viên và Sinh viên ra doanh nghiệp để thực tập, trong chương trình đào tạo cũng cần phải thể hiện các nội dung kiến thức mà doanh nghiệp đang cần Chính vì vậy, thiết kế hệ thống hỗ trợ giảng dạy và học tập cho Khoa CNTT là một yêu cầu thiết yếu cần phải thực hiện

Đó cũng là mục tiêu chính của đề tài “Phát triển thư viện hỗ trợ giảng dạy và học tập cho sinh viên Khoa Công nghệ thông tin Trường Cao đẳng Công nghệ Thủ Đức”.

1.2 Giới thiệu về hệ sinh thái phần mềm

Hướng phát triển các ứng dụng web trên nền tảng mã nguồn mở là một trong những hướng

mà Khoa CNTT đang đào tạo Trong đề tài này, tác giả tìm hiểu chuyên về các nền tảng phát triển web theo định hướng trong chương trình đào tạo Để từ đó, cho thấy rằng SV tham gia học tập có thể làm được các ứng dụng thực tế, cũng như trong quá trình học tập sinh viên có cơ hội tương tác và trải nghiệm với ứng dụng thực tế

Hệ sinh thái (Ecosystem) là khái niệm ám chỉ một hệ thống gồm nhiều đối tượng, thiết bị, dịch vụ, … tương tác chặt chẽ với nhau Để từ đó có được một môi trường tốt và đa dạng, đáp ứng tối đa nhu cầu người dùng thông qua nhiều tiện ích được tích hợp Ví dụ thực tế

về 3 hãng điện thoại lớn: Samsung, Apple, Nokia Người dùng không chỉ sử dụng điện thoại

để nghe-gọi-nhận-gửi mà người dùng còn muốn vui chơi giải trí trên điện thoại, muốn phát triển thêm các ứng dụng, … Nokia đã không đáp ứng được các yêu cầu đó nên đã mất thị trường người tiêu dùng điện thoại vào tay của Samsung, Apple

Phát triển web Khoa CNTT trên nền tảng Laravel, một nền tảng có hệ sinh thái tốt hiện nay với rất nhiều module hỗ trợ từ cộng đồng mã nguồn mở như: GitHub (https://github.com), Packalyst (https://packalyst.com), Packagist (https://packagist.org), … với hàng nghìn module đã được hiện thực Đặc biệt, GitHub hiện nay đã thuộc về Microsoft nên được hỗ trợ rất nhiều dịch vụ trong quá trình phát triển phần mềm một cách chuyên nghiệp

1.3 Xác định nền tảng phát triển web

Chương trình đào tạo Khoa CNTT được thiết kế dựa trên nhu cầu tuyển dụng từ các công

ty thuộc khu vực phía Nam như TP Hồ Chí Minh, Bình Dương, Biên Hòa, … Năm 2016 Khoa CNTT đã phát triển ứng dụng thu thập việc làm để thống kê yêu cầu tuyển dụng (do chính tác giả xây dựng) Từ kết quả thu thập, thống kê được các công nghệ kỹ thuật cần thiết cần đào tạo trong Khoa CNTT

Bên cạnh đó, xu hướng phát triển công nghệ cũng được cộng đồng đánh giá trên Internet Các trang mạng xã hội về công nghệ nổi bật như: GitHub, Stack Overflow, … là nơi đưa

ra nhiều quan điểm về công nghệ

Thông qua dữ liệu có được từ các nguồn trên, nhận thấy rằng Laravel là nền tảng phát triển web phù hợp nhất đối với Khoa CNTT hiện nay Xây dựng web Khoa CNTT với mong muốn đây không chỉ là trang web tin tức mà còn là nơi GV/SV có thể mở rộng các tiện ích

để phát triển các sản phẩm dựa trên nền tảng này

CHƯƠNG 2: PHÂN TÍCH KỸ THUẬT

2.1 Tìm hiểu về RESTful API

RESTful API là một khái niệm phức hợp, để hiểu rõ hơn về khái niệm này Cần tìm hiểu

về các khái niệm liên quan

API (Application Programming Interface)

Là một tập các quy tắc và cơ chế mà theo đó, ứng dụng hay thành phần này tương tác với ứng dụng hay thành phần khác Kiểu dữ liệu JSON hay XML là những kiểu dữ liệu phổ biến mà API gửi về

REST (REpresentational State Transfer)

Là một tập các ràng buộc, quy ước được sử dụng trong việc giao tiếp giữa các máy tính (client-server) Các ứng dụng sử dụng kiến trúc REST được gọi là RESTful REST sử dụng phương thức HTTP để giao tiếp giữa các máy Thay vì, với một yêu cầu từ người dùng tương ứng với một URL, REST sẽ gửi yêu cầu HTTP với GET, POST, DELETE, PUT, PATCH đến một URL để xử lý yêu cầu phù hợp với người dùng

RESTful API

Là một tiêu chuẩn trong việc thiết kế API cho các ứng dụng web

Hình mô tả cách hoạt động của RESTful API

Hình 2.2 - Mô tả hoạt động của RESTful API (Nguồn: restful-api-design.readthedocs.io)

REST hoạt động dựa vào giao thức HTTP Các hoạt động cơ bản nêu trên sẽ sử dụng những phương thức HTTP riêng

2.2 Sự cần thiết Mock API

Kiến trúc phần mềm (software architecture) là tổ chức hệ thống bao gồm rất nhiều các thành phần như web server, cơ sở dữ liệu, bộ nhớ và các lớp layer thực hiện việc giao tiếp Chúng liên kết với nhau hoặc với một môi trường nhất định để giải quyết vấn đề của phát triển phần mềm

Hiện nay có 2 mô hình phổ biến là kiến trúc khối (monolith architecture) và kiến trúc microservice (microservice architecture)

÷ Khả năng mở rộng khi yêu cầu tích hợp thêm tính năng mới gặp hạn chế

÷ Tốn chi phí khi hạn chế việc tái sử dụng source code

÷ Với nhân sự mới, khó biết bắt đầu tiếp cận từ đâu trong 1 khối lớn tích hợp

÷ Bất kỳ sự thay đổi nhỏ nào trong dự án cũng đều phải build lại, kiểm thử lại toàn bộ

÷ Mỗi dịch vụ sẽ xử lý một nghiệp vụ cụ thể nào đó (single responsibility)

÷ Việc phát triển và mở rộng một dịch vụ là hoàn toàn độc lập

÷ Tùy vào xử lý của từng dịch vụ, chọn nền tảng phát triển tương ứng Điều này giúp tối ưu hóa nền tảng cho xử lý logic cụ thể nào đó

÷ Giao tiếp giữa các service thông qua API

Rõ ràng toàn bộ ý tưởng của mô hình microservice chia nhỏ yêu cầu để xử lý, nhờ đó có thể giảm tải sự phức tạp của hệ thống, làm cho việc quản lí trở nên nhanh chóng và dễ dàng, phản ánh sự thay đổi chính xác

Một số thuận lợi của mô hình microservice

÷ Mỗi microservice sẽ được chia nhỏ để tập trung vào một xử lý nghiệp vụ nào đó

÷ Microservice được thiết kế rời rạc giữa các service, dễ dàng trong quá trình phát triển, vận hành, bảo trì và mở rộng Mỗi service có dung lượng lưu trữ riêng và có thể có cơ sở dữ liệu riêng

÷ Microservices có thể phát triển với nhiều ngôn ngữ khác nhau, do đặc thù riêng lẻ nên tối ưu trong việc chọn lựa nền tảng phù hợp để phát triển service

÷ Thành viên mới dễ dàng và nhanh chóng tham gia vào phát triển dự án

Một số nhược điểm của mô hình microservice

÷ Cần nhiều kiến thức để phát triển hệ thống

÷ Hệ thống phức tạp và khó quản lý Thậm chí là tốn chi phí khi triển khai cho nhiều nền tảng cho các service

Khi phát triển giao diện hiển thị đối với người dùng cần sử dụng các API, trong khi việc phát triển các API chưa hoàn thành dẫn đến việc hiển thị giao diện chưa thể thiết kế chính xác Hoặc dịch vụ này gọi đến dịch vụ khác thông qua API, trong khi API được gọi chưa hoàn thành Hai điều này dẫn đến sự phụ thuộc trong quá trình phát triển phần mềm

Hình 2.4 - Gọi API từ dịch vụ khác

Nhằm giảm sự phụ thuộc về sử dụng API trong quá trình phát triển phần mềm, Mock API

là một khái niệm để dựng lên các API “ảo” Những nơi sử dụng có thể sử dụng API “ảo” này để xử lý công việc tiếp theo

Hình 2.5 - Gọi API từ Mock API

Do vậy sự cần thiết có API mẫu để xử lý các công việc là điều cần thiết Có nhiều cách để tạo ra các API mẫu như cài đặt các thư viện, hay tự phát triển, hay sử dụng một dịch vụ sẵn

có trên internet Trong các phần sau sẽ mô tả một dịch vụ có sẵn trên internet để từ đó thấy được sự cần thiết của một hệ thống Mock API

Trên internet có hẳn 1 dịch vụ Mock API (www.mockapi.io) cung cấp các API mẫu Sau

khi đăng ký là thành viên của Mock API, cấu hình các dữ liệu mẫu để tạo ra các API mẫu

Hình 2.6 - Màn hình ứng dụng mockapi.io

Hình 2.7 - Khởi tạo dự án trên mockapi.io

Đây là tài khoản mới đăng nhập lần đầu nên chưa có một cái API nào cả, bây giờ ta sẽ bắt

đầu giả lập một API mới

Hình 2.8 - Tạo mới project

Chọn dấu cộng ở trên bên trái gần chữ Projects để tạo dự án API mẫu

Hình 2.9 - Thông tin project

Sau đó sẽ hiện ra 1 hộp thoại để điền thông tin tạo project

÷ Tạo đường dẫn đến API sau khi tạo project, ví dụ: https://***.mockapi.io (*** là mã của project)

÷ Project name: tên project đang làm

÷ API prefix: phần được thêm vào sau đường dẫn đến project, ví dụ:

https://***.mockapi.io/api/v1

÷ Collaborators: thành viên khác có thể truy cập vào dự án, thành viên toàn quyền

trên project mẫu này

Hình 2.10 - Thông tin project

Ví dụ đặt tên project là fit và 2 thông tin còn lại sẽ bỏ trống, sau khi điền thông chọn vào Create để tạo project

Hình 2.11 - Project sau khi tạo

Project mới tạo sẽ hiện lên ở trang chủ của Mock API, sau đó ấn vào project vừa tạo

Hình 2.12 - Project sau khi tạo

Chọn New resource một hộp thoại mới sẽ xuất hiện

Một dialog sẽ hiện ra để điền và chọn các thông tin cụ thể hơn cho API

÷ Resource name: tên của danh sách chứa các đối tượng dữ liệu

÷ Schema: tùy chỉnh các giá trị của object, thêm thuộc tính hoặc điều chỉnh giá trị

mẫu

÷ (1): thuộc tính của đối tượng

÷ (2): kiểu dữ liệu của thuộc tính

÷ (3): ghi chú thuộc tính của đối tượng Chọn Faker.js dữ liệu sẽ được sinh ra động và đa dạng hơn

các kiểu khác

Hình 2.14 - Các phương thức được cung cấp

Cung cấp các tính năng tương ứng với RESTful API

÷ GET: truy vấn danh sách dữ liệu

÷ GET (id): truy vấn theo id của object

÷ POST: thêm 1 object mới, có kiểu tương ứng với kiểu dữ liệu đã định nghĩa

÷ PUT (id): cập nhật thông tin của object

÷ DELETE (id): xóa 1 object trong danh sách

Có thể tùy chỉnh các dữ liệu trong file JSON

Hình 2.15 - Cấu trúc đối tượng

Phần này là các phương thức dùng để lấy danh lấy dữ liệu, gửi dữ liệu, xóa dữ liệu,… cho API

Hình 2.16 - Tạo dữ liệu mẫu

Tạo danh sách sinh viên mẫu

÷ Đưa chuột để vào ô dưới cats và di chuyển qua trái phải để tùy ý tạo ra số lượng object trong danh sách mong muốn

Hình 2.17 - Tạo dữ liệu mẫu

÷ Ấn vào Data để xem chi tiết các object được tạo ra

Hình 2.18 - Tạo dữ liệu mẫu

Các thông tin object được giả lập ra

Hình 2.19 - Thông tin API truy cập

Xem danh sách thông tin các object từ trình duyệt

Hình 2.20 - Danh sách cats hiển thị trên web

Danh sách thông tin các object hiển thị trên web

Hình 2.21 - Truy cập 1 đối tượng

÷ 5 Unrestricted file upload

÷ 6 Insecure direct object references (IDOR)

÷ 7 Bất đồng bộ dữ liệu

Hình 2.22 - Ví dụ lỗi SQL Injection (Nguồn: slideshare.net)

Khai thác lỗi dựa vào tính năng được cung cấp bởi ứng dụng như tính năng đăng nhập, tìm kiếm, …

Hình 2.23 - Ví dụ lỗi SQL Injection (Nguồn: bartosha.com)

Để có thể tấn công SQL vào một ứng dụng web sẽ gồm các bước cơ bản như sơ đồ sau:

÷ Hacker xác định được ứng dụng web dễ dàng bị tấn công SQL do không kiểm duyệt

dữ liệu đầu một cách chặt chẽ từ người dùng mà truyền thẳng dữ liệu đầu vào từ người dùng vào câu truy vấn

÷ Câu truy vấn tấn công SQL với điều kiện luôn đúng được xác thực và duyệt bởi hệ quản trị cơ sở dữ liệu (DBMS)

÷ Hacker truy cập vào ứng dụng web đánh cắp thông tin cá nhân của người dùng khác hoặc có quyền kiểm soát như admin của ứng dụng

Ví dụ cách thức hoạt động của cuộc tấn công SQL Injection khai thác tính năng đăng nhập của ứng dụng

Hình 2.24 - Ví dụ lỗi SQL Injection (Nguồn: portswigger.net)

Theo như sơ đồ trên thì hacker sẽ dùng câu lệnh truy vấn SQL nhập vào FORM thao tác với database (giá trị đầu vào không được kiểm duyệt và chuyển thành câu truy vấn an toàn) lúc này database nhận giá trị nhập vào của hacker và tiến hành trích xuất dữ liệu và gửi về cho hacker Dữ liệu có thể là tất cả thông tin user hoặc là quyền truy cập admin của ứng dụng web khai thác thông tin của tất cả user

Hacker có thể vào trang một trang web tìm đến form đăng nhập thực hiện các thao tác về câu truy vấn SQL ép cho câu lệnh đăng nhập luôn đúng để có thể truy cập vào trang web

Cách tấn công

÷ Hacker tìm các form hoặc sai sót, lỗ hổng qua đường dẫn URL của website

÷ Hacker thêm lệnh SQL vào

÷ Hacker lấy được thông tin mình mong muốn Ví dụ như thông tin tài khoản, thông tin sản phẩm, thông tin khách hàng, …

÷ Hacker giải mã mật khẩu của tài khoản admin, sau đó hacker có thể đổi mật khẩu của admin thành của mình rồi bắt đầu quấy phá CSDL

Để tấn công ta sử dụng một mệnh đề luôn đúng, ví dụ như:

Các giải pháp phòng tránh lỗi SQL Injection

÷ Lọc dữ liệu từ người dùng: dùng biểu thức chính quy (regular expression) để lọc các

ký tự lạ từ người dùng nhập vào hoặc có thể dùng các thư viện/function được cung cấp bởi framework

2.3.2 Cross Site Scripting (XSS)

Mô tả lỗi

Cross-Site Scripting hay còn được gọi tắt là XSS là kĩ thuật tấn công khá phổ biến hiện nay

dễ dàng sử dụng nhưng lại mang đến hậu quả vô cùng nghiêm trọng cho website Lỗi bảo mật này phổ biến tựa như lỗi bảo mật SQL Injection Tấn công Cross Site Scripting là một cuộc tấn công bằng mã độc, sẽ được thực thi trên trình duyệt của nạn nhân Các lệnh độc hại sẽ được thực thi mỗi khi người dùng gọi chức năng thích hợp mà người dùng không hề

có nghi ngờ

Khi một khách dùng tài khoản A đăng nhập vào server Z thì bên phía sẽ tạo ra một mã token để duy trì đăng nhập của tài khoản A đó

Hình 2.27 - Mô phỏng đăng nhập

Tương tự khi một tài khoản B đăng nhập vào server Z thì bên phía sẽ tạo ra một mã token

để duy trì đăng nhập của tài khoản B đó Và mục đích của cách tấn công này là A sẽ lấy mã token của B để tấn công đánh cắp thông tin

Mã token này sẽ được lưu trong cookie của trình duyệt khi đăng nhập vào Do đó hacker

sẽ cố tấn công cookie để tìm ra mã token này

Hình 2.28 - Mô phỏng đăng nhập

Nhờ vào việc lấy trộm mã token này dù không cần đăng nhập thì A vẫn có thể dễ dàng lấy cắp, thực hiện quyền của B

Cách mà hacker lấy mã token của người dùng

÷ Cách 1: A sẽ dẫn dụ B cài đặt ứng dụng do A tạo ra (ứng dụng có thể là web, app…

có API liên kết, tích hợp) sau khi B cài đặt đoạn mã độc sẽ thực hiện và B sẽ bị lộ token

÷ Cách 2: Nếu như phía Z cho phép người dùng đăng bài viết thì A sẽ đăng bài viết kèm đoạn mã độc trong đó (trong các liên kết, backlink…) khi B nhấp vào sẽ bị lộ token Thông tin token sẽ được gửi về phía hacker

Ví dụ về một cuộc tấn công XSS điển hình sẽ chia làm 2 bước

Bước 1: Muốn chạy đoạn JavaScript độc hại trong trình duyệt của nạn nhân thì khi này hacker phải tìm cách đưa mã độc vào trang web mà nạn nhân truy cập

Bước 2: Đến từ phía nạn nhân, họ sẽ truy cập vào trang web có mã độc mà không hay biết

Hình 2.29 - Mô hình tấn công XSS (Nguồn: ssl.vn)

Cách phòng chống, ngăn chặn tấn công XSS