Báo cáo Đồ án môn học linux và phần mềm mã nguồn mở Đề tài xây dựng website có chứa các lỗ hổng thuộc top 10 oswap

Công dụng: Cung cấp một bộ công cụ và các lớp CSS để xây dựng giao diện web nhanh chóng và dễ dàng.. Bootstrap 5 sử dụng hệ thống lưới linh hoạt flexbox để tạo bố cục và sắp xếp các phầ

TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN

VÀ TRUYỀN THÔNG VIỆT - HÀN

KHOA KĨ THUẬT MÁY TÍNH VÀ ĐIỆN TỬ

Sinh viên thực hiện: ĐẶNG ĐỨC LỘC – 22NS033

NGUYỄN VIẾT KHANG – 22NS028 ĐINH VIẾT LỘC – 22NS032

LÊ PHƯỚC HOÀ – 22NS020

Giảng viên hướng dẫn: TS.HOÀNG HỮU ĐỨC

TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN VÀ

TRUYỀN THÔNG VIỆT – HÀN KHOA KHOA HỌC MÁY TÍNH

BÁO CÁO ĐỒ ÁN MÔN HỌC

LINUX VÀ PHẦN MỀM MÃ NGUỒN MỞ

Đề tài:

XÂY DỰNG WEBSITE CÓ CHỨA CÁC LỖ HỔNG THUỘC TOP 10 OSWAP

Sinh viên thực hiện: ĐẶNG ĐỨC LỘC – 22NS033

NGUYỄN VIẾT KHANG – 22NS028 ĐINH VIẾT LỘC – 22NS032

LÊ PHƯỚC HOÀ – 22NS020

Giảng viên hướng dẫn: TS.HOÀNG HỮU ĐỨC

Lớp học phần: Linux và phần mềm mã nguồn mở

Đà Nẵng, ngày 24 tháng 10 năm 2024

2

LỜI NÓI ĐẦU

Trong quá trình học tập và tìm hiểu về Linux và phần mềm mã nguồn mở, em nhận thấy an ninh mạng và bảo mật web là những yếu tố không thể thiếu khi phát triển và vận hành các hệ thống trực tuyến Phần mềm mã nguồn mở đã và đang đóng góp một phần quan trọng vào sự phát triển của công nghệ hiện đại, với ưu điểm về tính minh bạch, linh hoạt và cộng đồng hỗ trợ rộng lớn Tuy nhiên, các lỗ hổng bảo mật cũng có thể xuất hiện nếu không được phát hiện và khắc phục kịp thời, đặc biệt trong bối cảnh phát triển website

Báo cáo này được thực hiện với mục đích tìm hiểu về cách thức xây dựng một website có chứa các lỗ hổng bảo mật thuộc danh sách Top 10 OWASP, từ đó nghiên cứu sâu hơn về cách các lỗ hổng này có thể bị khai thác và ảnh hưởng như thế nào đến hệ thống Thông qua việc nghiên cứu này, em mong muốn có cái nhìn toàn diện hơn về bảo mật trong môi trường mã nguồn mở, cũng như nắm bắt được những phương pháp bảo vệ hệ thống hiệu quả

LỜI CẢM ƠN

4

NHẬN XÉT CỦA GIẢNG VIÊN HƯỚNG DẪN

….……….…

………

………

………

………

………

… ………

………

………

………

………

………

………

………

Giảng viên hướng dẫn

(kí và ghi rõ họ tên)

M c L c ụ ụ

LỜI NÓI ĐẦU 3

LỜI CẢM ƠN 4

NHẬN XÉT CỦA GIẢNG VIÊN HƯỚNG DẪN 5

DANH MỤC HÌNH ẢNH 8

DANH MỤC CÁC TỪ VIẾT TẮT 11

Chương I TỔNG QUAN VỀ ĐỂ TÀI 12

1.1.Thông tin về đề tài 12

1.1.1 Giới thiệu đề tài và lí do chọn đề tài 12

1.1.2 Mục tiêu ý nghĩa đối tượng của đề tài 12

1.2 Các công nghệ được sửa dụng trong đề tài 12

1.2.1.HTML 12

1.2.2.CSS 13

1.2.3.JS 13

1.2.4.Bootstrap 5 14

1.2.5.SCSS 14

1.2.6.Nodejs 15

1.2.7.EJS 16

1.2.9.Expressjs 16

1.2.10 MySQL 17

1.2.11 GITHUB 18

Chương II PHÂN TÍCH THIẾT KẾ HỆ THỐNg 19

2.1 Mô tả hệ thống 19

2.2 Thiết kế hệ thống 19

2.2.1 Biểu đồ usecase 19

2.2.2 Biểu đồ class 19

2.2.6Biểu đồ hoạt động một số chức năng 19

2.2.7 Cơ sở dữ liệu và erd 26

Chương III Cấu trúc và hình ảnh chương trình 29

6

1.1 Hình ảnh của trang web 29

KẾT LUẬN VÀ HƯỚNG PHÁT TRIỂN 31

Kết quả đạt được : 31

Việc chưa làm được: 31

Ưu, nhược điểm của đề tài: 31

Hướng phát triển của đề tài: 31

DANH MỤC HÌNH ẢNH

Hình 1.2.1 HTML 12

Hình 1.2.2 CSS 13

Hình 1.2.3 JS 13

Hình 1.2.4 Bootsrap5 14

Hình 1.2.5 SCSS 14

Hình 1.2.6 Nodejs 15

Hình 1.2.7 EJS 16

Hình 1.2.8 Express 16

Hình 1.2.9 MySQL 17

Hình 1.2.10 GITHUB 18

Hình 1.2.11 Swagger 19

Hình 2.2.1 Usecase phía quản trị 19

Hình 2.2.1 usecase phía Khách hàng 20

Hình2.2.1Usecase tổng quát 20

Hình 2.2.5Biểu đồ class 20

Hình 2.2.6 Đăng nhập 21

Hình 2.2.6Đăng kí 22

Hình 2.2.6 thêm vào giỏ hàng 23

Hình 2.2.6 Chỉnh sửa số luọng món ăn trong giỏ hàng 24

Hình 2.2.6 Xoá khỏi giỏ hàng 25

Hình 2.2.6 Thanh toán toàn bộ giỏ hàng 26

Hình 2.2.6 Sửa món ăn 27

Hình2.2.7 User_table 28

Hình 2.2.7 Food 28

Hình 2.2.7 Cart 28

Hình 2.2.7 Type of food 29

Hình 2.2.7 general_info_oder 29

Hình 2.2.7 order detail 29

8

Hình 2.2.7 comment 29

Hình 2.2.7 cơ sở dữ liệu 30

Hình 3.1 Giao diện trang chủ 30

Hình 3.1 Giao diện giới thiệu 31

Hình 3.1 Giao diện Menu 31

Hình 3.1 Giao diện liên hệ 31

Hình 3.1 Giao diện đăng nhập 31

Hình 3.1 Giao diện đăng kí 31

Hình 3.1 Giao diện giỏ hàng và thanh toán nhiều món ăn 31

Hình 3.1Giao diện thanh toán đơn 32

Hình 3.1 Giao diện đánh giá 32

Hình 3.1 Giao diện làm việc chính Bảng danh sách món ăn 32

Hình 3.1 Giao diện sửa món ăn 32

10

DANH MỤC CÁC TỪ VIẾT TẮT

STT Kí hiệu Chữ viết đầy đủ

5 SCSS Sassy Cascading Style Sheets

6 API Application programming interface

CHƯƠNG I TỔNG QUAN VỀ ĐỂ TÀI

1.1.Thông tin v đ tài ề ề

1.1.1 Gi i thi u đ tài và lí do ch n đ tài ớ ệ ề ọ ề

Giới thiệu đề tài:

Lí do chọn đề tài:

1.1.2 M c tiêu ý nghĩa đ i t ụ ố ượ ng c a đ tài ủ ề

Mục tiêu của đề tài:

Ý nghĩa:

1.2 Các công ngh đ ệ ượ ử c s a d ng trong đ tài ụ ề

1.2.1.HTML

Hình 1.2.1 HTML

Khái niệm: Là ngôn ngữ đánh dấu siêu văn bản được sử dụng để tạo và cấu trúc

các trang web HTML sử dụng các thẻ (tags) để định dạng và hiển thị nội dung trên trình duyệt web

Công dụng: Công dụng chính của HTML là xác định cấu trúc và định dạng nội

dung trên trang web Nó cho phép tạo các tiêu đề, đoạn văn bản, danh sách, bảng, hình ảnh, liên kết và các phần tử khác trên trang web HTML cung cấp khả năng tạo ra các liên kết nội bộ và liên kết đến các trang web khác, tạo ra các biểu đồ và biểu đồ, và cung cấp cấu trúc cho các phần tử trên trang web

12

Hình 1.2.2 CSS

Khái niệm: Là một ngôn ngữ định dạng được sử dụng để kiểm soát giao diện và

thiết kế của trang web CSS cho phép tạo các quy tắc để định dạng các phần tử HTML như màu sắc, kích thước, khoảng cách, vị trí và hiệu ứng

Công dụng: tạo ra giao diện và thiết kế hấp dẫn cho trang web Nó cho phép tạo

kiểu cho các phần tử HTML, điều chỉnh bố cục, tạo hiệu ứng chuyển động và thay đổi giao diện dựa trên các điều kiện khác nhau CSS cũng giúp tăng tính linh hoạt và tái sử dụng mã trong việc thiết kế trang web

1.2.3.JS

Hình 1.2.3 JS

Khái niệm: Một ngôn ngữ lập trình phía client được sử dụng để tương tác và

thay đổi nội dung trên trang web JS cho phép thực hiện các hành động động như kiểm tra dữ liệu, thay đổi nội dung động, xử lý sự kiện và tương tác với người dùng

Công dụng: JavaScript là làm cho trang web trở nên tương tác và động Nó cho

phép thêm các hiệu ứng, thay đổi nội dung dựa trên hành vi của người dùng, xácthực dữ liệu nhập và tương tác với API để lấy và gửi dữ liệu từ máy chủ

1.2.4.Bootstrap 5

Hình 1.2.4 Bootsrap5

Khái niệm: Là một framework CSS phổ biến và mạnh mẽ, được sử dụng để xây

dựng các giao diện web đáp ứng (responsive) và thân thiện với di động

Công dụng: Cung cấp một bộ công cụ và các lớp CSS để xây dựng giao diện

web nhanh chóng và dễ dàng Nó cung cấp các thành phần giao diện như nút, biểu mẫu, bảng, thanh điều hướng, v.v được thiết kế sẵn và tương thích trên nhiều thiết bị và trình duyệt khác nhau

Bootstrap 5 sử dụng hệ thống lưới linh hoạt (flexbox) để tạo bố cục và sắp xếp các phần tử trên trang Nó cũng cung cấp các lớp CSS và các thành phần

JavaScript để thực hiện các hiệu ứng, tương tác và tính năng tùy chỉnh

Với Bootstrap 5, ta có thể nhanh chóng xây dựng giao diện web chuyên nghiệp, tương thích trên nhiều thiết bị và tiết kiệm thời gian trong quá trình phát triển

1.2.5.SCSS

Hình 1.2.5 SCSS

14

SCSS (Sassy CSS) là một ngôn ngữ mở rộng của CSS, cung cấp các tính năng

và cú pháp mạnh mẽ hơn để viết mã CSS Nó giúp tăng tính linh hoạt và khả năng tái sử dụng trong quá trình phát triển giao diện web

Công dụng chính của SCSS là giúp tạo và quản lý mã CSS dễ dàng hơn SCSS

cho phép bạn sử dụng các tính năng như biến, nesting, mixins, và thừa kế để viết

mã CSS linh hoạt hơn Bạn có thể định nghĩa biến để lưu trữ giá trị và sử dụng lại chúng trong toàn bộ mã CSS Nesting cho phép bạn nhóm các quy tắc CSS bên trong nhau, giúp tạo mã nguồn rõ ràng và dễ đọc hơn Mixins cho phép tái

sử dụng các khối mã CSS, giúp giảm lặp lại và tăng hiệu suất Thừa kế cho phépbạn tạo các lớp CSS cha và kế thừa các thuộc tính từ chúng vào các lớp con.SCSS cần được biên dịch thành CSS trước khi triển khai trên trình duyệt Để biên dịch SCSS, bạn cần sử dụng một công cụ như Sass hoặc Gulp để tự động biên dịch SCSS thành CSS

SCSS là một công cụ hữu ích trong việc phát triển giao diện web, giúp viết mã CSS linh hoạt và dễ quản lý Nó cung cấp các tính năng mạnh mẽ để tăng hiệu suất và tiết kiệm thời gian trong quá trình phát triển CSS

1.2.6.Nodejs

Hình 1.2.6 Nodejs

Khái niệm: Môi trường chạy mã JavaScript phía máy chủ, cho phép thực thi mã

JavaScript không chỉ trên trình duyệt mà còn trên máy chủ Node.js sử dụng JavaScript để xây dựng các ứng dụng web và các ứng dụng phía máy chủ

Công dụng: Công dụng chính của Node.js là xây dựng các ứng dụng web phía

Node.js cũng cho phép sử dụng các thư viện và module được tạo bởi cộng đồng JavaScript thông qua npm (Node Package Manager) Điều này giúp tái sử dụng

mã nguồn mở và tăng tốc quá trình phát triển ứng dụng

1.2.7.EJS

Hình 1.2.7 EJS

Khái niệm: Một ngôn ngữ mẫu (template language) cho Node.js Nó cho phép

tạo các mẫu HTML động bằng cách nhúng mã JavaScript vào trong HTML EJSgiúp tách biệt logic và giao diện trong ứng dụng web, cho phép tái sử dụng và quản lý dễ dàng các thành phần giao diện của trang web

Công dụng: Công dụng chính của EJS là giúp tách biệt logic và giao diện trong

ứng dụng web Bằng cách sử dụng EJS, có thể tạo các mẫu HTML có thể tái sử dụng và dễ dàng quản lý EJS cho phép chèn mã JavaScript vào trong mẫu HTML để tạo ra các nội dung động, lặp lại, điều kiện và các biểu đồ dữ liệu.Với EJS, bạn có thể truyền dữ liệu từ máy chủ vào mẫu HTML và sử dụng các biểu thức JavaScript để xử lý dữ liệu đó trong quá trình hiển thị Điều này giúp tạo ra các trang web động và tương tác với dữ liệu từ máy chủ

1.2.8.Expressjs

Hình 1.2.8 Express

Khái niệm: Một framework ứng dụng web Node.js mạnh mẽ và linh hoạt Nó

cung cấp các công cụ và tính năng để xây dựng các ứng dụng web phía máy chủ nhanh chóng và dễ dàng Express cho phép xử lý các yêu cầu HTTP, quản lý định tuyến (routing), xử lý middleware, tạo API và nhiều tính năng khác

16

Công dụng: Xử lý các yêu cầu HTTP, quản lý định tuyến (routing), xử lý

middleware và tạo API Với Express, có thể xây dựng các ứng dụng web động, ứng dụng thời gian thực và các API RESTful

Express giúp tạo các định tuyến (routes) để xác định cách xử lý yêu cầu từ phía client và tạo các middleware để thực hiện các chức năng xử lý trung gian như xác thực, ghi log, nén dữ liệu, v.v Nó cũng hỗ trợ các đối tượng và phương thức

để xử lý yêu cầu và gửi phản hồi từ máy chủ

1.2.9 MySQL

Hình 1.2.9 MySQL

MySQL là hệ quản trị cơ sở dữ liệu quan hệ mã nguồn mở, sử dụng ngôn ngữ

SQL để quản lý và truy vấn dữ liệu Nó được phát triển bởi Oracle và thường sử dụng trong các ứng dụng web, đặc biệt là trên nền tảng mã nguồn mở như Linux

Công dụng của MySQL:

 Quản lý dữ liệu: Lưu trữ, truy vấn và quản lý thông tin hiệu quả.

 Hỗ trợ ứng dụng web: Thường dùng trong phát triển các trang web động

và hệ thống quản lý nội dung

 Xử lý dữ liệu lớn: Quản lý và xử lý lượng dữ liệu lớn với hiệu suất cao.

 Bảo mật: Cung cấp các cơ chế bảo mật mạnh mẽ cho cơ sở dữ liệu.

 Tương thích cao: Hoạt động trên nhiều hệ điều hành và ngôn ngữ lập

trình

1.2.10 GITHUB

Hình 1.2.10 GITHUB

GitHub là một nền tảng lưu trữ mã nguồn và quản lý dự án phát triển phần

mềm Nó cung cấp các công cụ và tính năng để phát triển, quản lý và chia sẻ mã nguồn của dự án

Các tính năng chính của GitHub bao gồm:

 Lưu trữ mã nguồn: GitHub cho phép bạn tạo kho lưu trữ (repositories)

để lưu trữ mã nguồn của dự án Bạn có thể tải lên, tạo nhánh (branch), và quản lý các phiên bản của mã nguồn

 Quản lý dự án: GitHub cung cấp các công cụ để quản lý và theo dõi tiến

độ dự án Bạn có thể tạo và gán công việc (issues), theo dõi và gán nhãn (labels) cho các vấn đề, và theo dõi thay đổi thông qua hệ thống kiểm soátphiên bản (version control)

 Hợp tác: GitHub cho phép nhiều người cùng làm việc trên cùng một dự

án Bạn có thể mời thành viên vào dự án của mình, quản lý quyền truy cập, và xem và đánh giá các thay đổi được đề xuất qua các yêu cầu kéo (pull requests)

 Chia sẻ và khám phá: GitHub là một cộng đồng lớn của các nhà phát

triển phần mềm Bạn có thể chia sẻ mã nguồn công khai, tìm kiếm và khám phá các dự án khác, và tham gia vào các dự án mã nguồn mở

18

1.2.11 Swagger

Hình 1.2.11 Swagger

Swagger thực chất là một hệ sinh thái các công cụ và tiêu chuẩn, với định dạng

dữ liệu tiêu chuẩn phổ biến nhất là OpenAPI Specification (OAS) OpenAPI là một chuẩn mô tả API RESTful, cho phép định nghĩa các endpoint, phương thức HTTP, các tham số, và các response của API

Swagger cung cấp một bộ công cụ mạnh mẽ cho nhiều giai đoạn khác nhau trong quá trình phát triển API, bao gồm:

 Tạo tài liệu tự động cho API: Swagger có khả năng tự động tạo tài liệu

cho API thông qua việc đọc các chú thích (annotations) trong mã nguồn hoặc dựa trên file cấu hình OpenAPI Người dùng có thể xem tài liệu này dưới dạng web và trực quan hơn so với cách viết tài liệu thủ công

 Giao diện thử nghiệm API trực quan: Swagger UI là công cụ cung cấp

giao diện web giúp người dùng dễ dàng tương tác và kiểm thử API Người dùng có thể nhập các tham số, gọi thử các endpoint và xem kết quảtrả về trực tiếp trên giao diện này

 Tạo mã nguồn và client SDK tự động: Swagger Codegen cho phép tự

động sinh mã nguồn cho API client (SDK) bằng nhiều ngôn ngữ lập trình khác nhau, giúp tiết kiệm thời gian và giảm rủi ro lỗi khi phát triển các client API

 Dễ dàng chia sẻ và hiểu API: Swagger giúp các bên liên quan (như

backend, frontend, QA) có một tài liệu API chi tiết và dễ đọc, giúp cải thiện khả năng giao tiếp và hợp tác giữa các nhóm

CHƯƠNG II PHÂN TÍCH THIẾT KẾ HỆ THỐNG

2.1 Mô t h th ng ả ệ ố

2.2 Thi t k h th ng ế ế ệ ố

2.2.1 Bi u đ usecase ể ồ

Đăng kí

Hình 2.2.6 Đăng kí

Thêm giỏ hàng

Hình 2.2.6 thêm vào giỏ hàng

Thay đổi số lượng món ăn trong giỏ hàng

22

Hình 2.2.6 Chỉnh sửa số luọng món ăn trong giỏ hàng

Hình 2.2.6 Xoá khỏi giỏ hàng

Thanh toán toàn bộ giỏ hàng

24

 user_table: chứa thông tin liên quan của người dùng

Hình 3.1 Giao diện giới thiệu

Giao diện thực đơn sẽ hiển thị toàn bộ thực đơn đồng thời sẽ phân loại theo loại thức ăn mặt khác cũng sẽ cho người dùng tìm kiếm thức ăn có trong thực đơn

Hình 3.1 Giao diện Menu

Khi gặp bất kì vấn đề gì khi sử dụng hệ thống trang web Người dùng có thể liên

hệ với số điện thoại được cung cấp ở phần liên hệ

Hình 3.1 Giao diện liên hệ

Giao diện đăng nhập và đăng kí sẽ cho phép phép người đã có tài khoản sẽ đăng nhập và với tài khoản đã tạo Nếu chưa có tai khoản sẽ cho phép người dùng đăng kí tài khoản mới

Hình 3.1 Giao diện đăng nhập

Hình 3.1 Giao diện đăng kí

Giao diện giỏ hàng và thanh toán giỏ hàng sẽ hiển thị toàn bộ giỏ hàng của người dùng Đồng thời sẽ cho phép xoá phần tử khỏi giỏ hàng, bên cạnh đó sẽ cho phép thay đổ số lượng mua hàng của một phần tử, và cho phép thanh toán từng phần tử riêng biệt hoạc có thể thanh toán hết các phần tử trong giỏ hàng trong một lần

Hình 3.1 Giao diện giỏ hàng và thanh toán nhiều món ăn

30

Giao diện thanh toán sẽ gửi mail thông báo về gmail của người dùng về giao dịch thành công.

Hình 3.1Giao diện thanh toán đơn

Giao diện đánh giá thì cho phép người dùng đánh giá món ăn

Hình 3.1 Giao diện đánh giá

 Phía quản lí

Khi vào vào được không gian làm việc sẽ có giao diện thống kê và bảng danh sách món ăn

Hình 3.1 Giao diện làm việc chính Bảng danh sách món ăn

Ở danh sách món ăn ở mỗi hàng sẽ chuyển tới trang cập nhật món ăn

Hình 3.1 Giao diện sửa món ăn

KẾT LUẬN VÀ HƯỚNG PHÁT TRIỂN