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 CƠ SỞ 4 ĐỀ TÀI XÂY DỰNG MỘT TRÌNH DUYỆT WEB CƠ BẢN LỜI CẢM ƠN Trong lời đầu tiên của báo cáo đồ án cơ s[.]
Trang 1TRƯỜ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 CƠ SỞ 4
ĐỀ TÀI XÂY DỰNG MỘT TRÌNH DUYỆT WEB CƠ BẢN
Trang 2LỜI CẢM ƠN
Trong lời đầu tiên của báo cáo đồ án cơ sở này, nhóm báo chúng em muốn gửinhững lời cảm ơn và biết ơn chân thành nhất của mình tới tất cả những người đã hỗ trợ,giúp đỡ chúng em về kiến thức và tinh thần trong quá trình thực hiện đồ án cơ sở 4
Trước hết, chúng em xin chân thành cảm ơn cô – Trần Uyên Trang , người đã trựctiếp hướng dẫn, nhận xét, giúp đỡ chúng em trong quá trình thực hiện đồ án Chúng emxin chân thành cảm ơn đội ngũ giảng viên Khoa Công nghệ thông tin – Đại học côngnghệ thông tin Việt Hàn đã tạo điều kiện tốt nhất cho chúng em và các bạn sinh viênkhác trong quá trình học tập và làm đồ án cơ sở 4
Do thời gian thực hiện có hạn, kiến thức còn nhiều hạn chế nên đồ án cơ sở 4chắc chắn không tránh khỏi những thiếu xót Chúng em rất mong nhận được ý kiếnđóng góp của thầy cô để chúng em có thêm kinh nghiệm và cố gắng hơn cho những đồ
án sau này
Chúng em xin chân thành cảm ơn!
Trang 3MỤC LỤC
MỞ ĐẦU 1
1 Lý do chọn đề tài 1
2 Mục đích của đề tài 2
3 Đối tượng và phạm vi nghiên cứu đề tài 2
3.1 Đối tượng: 2
3.2 Phạm vi nghiên cứu: 2
4 Kết cấu của đồ án 2
CHƯƠNG 1: CƠ SỞ LÝ THUYẾT 3
1 Tổng quan về bộ giao thức TCP/IP và giao thức HTTP 3
2 Cấu trúc của một trình duyệt 7
3 Tìm hiểu thêm về Render Engine 9
4 Python và bộ thư viện PyQtWebkit 13
CHƯƠNG 2: THIẾT KẾ VÀ XÂY DỰNG HỆ THỐNG 15
1 Code 15
1.1 Xây dựng giao diện 15
1.2 Thao tác với nút 16
1.3 Xử lí địa chỉ URL 17
1.4 Thêm tab mới 17
1.5 Thay đổi khi chuyển trang 17
2 DEMO 18
CHƯƠNG 3 : KẾT LUẬN VÀ HƯỚNG PHÁT TRIỂN 19
1 Kết luận 19
2 Hướng phát triển 19
Trang 4MỞ ĐẦU
1 Lý do chọn đề tài.
toàn thế giới, vì vậy nhu cầu duyệt web và tiếp cận internet là cực kì cần thiết để bắt nhịp với xu thế toàn cầu và tiếp cận với thông tin, làm việc, giải trí, trao đổi thông tin, tròchuyện vv…
Do đó, để đáp ứng những nhu cầu trên, việc truy cập vào các trang web luôn luôncần đến trình duyệt web để thao tác với các dữ liệu số khô khan từ hệ thống mạng toàn cầu internet thành các dữ liệu đa phương tiện hình ảnh, âm thanh video… đa dạng nhiều màu sắc Và để đáp ứng các điều kiện đó, một trình duyệt web luôn phải đảm bảonhiều yếu tố như bảo mật, hiển thị thông tin tốt, trình bày hợp lí để có thể mang đến cho người dùng một trải nghiệm tốt nhất
Trong học phần lập trình mạng của trường, em đã được học về các giao thức mạng, các bộ giao thức, các tầng trong một bộ giao thức, đường đi của dữ liệu trong mạng, bảo mật mạng Những kiến thức trên thực sữ hữu ích để áp dụng vào đề tài xây dựng một trình duyệt web cơ bản Đề tài xây dựng một trình duyệt web cơ bản là một
đề tài phổ biến trong môn lập trình mạng, và nó giúp em áp dụng được tất cả kiến thức
đã học vào đề tài Vì vậy đề tài xây dựng trình duyệt web cơ bản là một đề tài hoàn hảo
để tìm hiểu, nghiên cứu và hoàn thành đồ án cơ sở 4
Trang 52 Mục đích của đề tài.
- Xây dựng một phần mềm duyệt web
- Tìm hiểu về Python và thư viện PyQtWebkit,PyWebEngine
3 Đối tượng và phạm vi nghiên cứu đề tài.
3.1 Đối tượng:
- Bộ giao thức TCP/IP và giao thức HTTP
- Các phương pháp, thuật toán phục vụ cho việc duyệt web và xử lí URL
- Bộ thư viện PyQtWebkit và bộ thư viện xử lí giao diện PyQt5
3.2 Phạm vi nghiên cứu:
- Tập trung vào nghiên cứu về trình duyệt , các thành phần của trình duyệt, hướng
đi của gói tin
- Nghiên cứu về các giao thức chủ yếu sử dụng trong việc duyệt web như TCP/IP vàHTTP,HTTPS
- Nghiên cứu về các parser, browser engine và chủ yếu là browser engine webkit được sử dụng trong đề tài
4 Kết cấu của đồ án
Gồm 3 chương :
Trang 6CHƯƠNG 1: CƠ SỞ LÝ THUYẾT
Giao thức TCP/IP
Cơ quan chỉ đạo các dự án nghiên cứu Quốc phòng tiên tiến (Defense Advanced Research Projects Agency - DARPA), chi nhánh nghiên cứu của Bộ Quốc phòng Mỹ, đã tạo ra model TCP/IP trong những năm 1970 để sử dụng trong ARPANET, một mạng diện rộng có trước Internet TCP/IP ban đầu được thiết kế cho hệ điều hành Unix và được tích hợp vào tất cả các hệ điều hành sau nó Model TCP/IP và các giao thức liên quan hiện được Internet Engineering Task Force duy trì
Bộ giao thức TCP/IP, là một bộ các giao thức truyền thông cài đặt chồng giao thức(protocol stack) mà Internet và hầu hết các mạng máy tính thương mại đang chạy trên
đó Bộ giao thức này được đặt tên theo hai giao thức chính của nó là TCP (Giao thức Điều khiển Giao vận) và IP (Giao thức Liên mạng) Chúng cũng là hai giao thức đầu tiên được định nghĩa
Như nhiều bộ giao thức khác, bộ giao thức TCP/IP có thể được coi là một tập hợpcác tầng, mỗi tầng giải quyết một tập các vấn đề có liên quan đến việc truyền dữ liệu, vàcung cấp cho các giao thức tầng cấp trên một dịch vụ được định nghĩa rõ ràng dựa trên việc sử dụng các dịch vụ của các tầng thấp hơn Về mặt logic, các tầng trên gần với người dùng hơn và làm việc với dữ liệu trừu tượng hơn, chúng dựa vào các giao thức tầng cấp dưới để biến đổi dữ liệu thành các dạng mà cuối cùng có thể được truyền đi một cách vật lý
Mô hình OSI miêu tả một tập cố định gồm 7 tầng mà một số nhà sản xuất lựa chọn và nó có thể được so sánh tương đối với bộ giao thức TCP/IP Sự so sánh này có thể gây nhầm lẫn hoặc mang lại sự hiểu biết sâu hơn về bộ giao thức TCP/IP
Bộ giao thức IP dùng sự đóng gói dữ liệu hòng trừu tượng hóa (thu nhỏ lại quan niệm cho dễ hiểu) các giao thức và các dịch vụ Nói một cách chung chung, giao thức ở
Trang 7tầng cao hơn dùng giao thức ở tầng thấp hơn để đạt được mục đích của mình Chồng giao thức Internet gần giống như các tầng cấp trong mô hình của Bộ quốc phòng Mỹ:
Sự phát triển của HTTP được Tim Berners-Lee tại CERN khởi xướng vào năm
1989 Việc phát triển các RFC HTTP ban đầu là một nỗ lực phối hợp của Lực lượng Đặc nhiệm Kỹ thuật Internet (IETF) và World Wide Web Consortium (W3C), với các thay đổi sau đó chuyển sang do IETF phụ trách
HTTP/1.1 lần đầu tiên được chuẩn hóa trong RFC 2068 vào năm 1997 Đặc điểm
kỹ thuật đó đã được RFC 2616 tuân theo vào năm 1999, cũng được thay thế bằng họ RFC RFC 7230 vào năm 2014
HTTP/2 là một giao thức hiệu quả hơn về ngữ nghĩa của HTTP "trên dây" và được xuất bản vào năm 2015; nó hiện được hỗ trợ bởi hầu như tất cả các trình duyệt web và các máy chủ web lớn qua Bảo mật tầng truyền tải (TLS) bằng cách sử dụng tiện ích mở rộng Application-Layer Protocol Negotiation (ALPN) trong đó TLS 1.2 hoặc mới hơn là bắt buộc phải có
HTTP/3 là sự kế thừa được đề xuất cho HTTP / 2, đã được sử dụng trên web (được bật theo mặc định trong macOS mới nhất), sử dụng UDP thay vì TCP cho giao thức truyền tải cơ bản Giống như HTTP / 2, nó không lỗi thời các phiên bản chính trước
đó của giao thức Hỗ trợ cho HTTP/3 đã được thêm vào Cloudflare và Google Chrome vào tháng 9 năm 2019, và có thể được kích hoạt trong các phiên bản ổn định của
Chrome và Firefox
HTTP là một giao thức ứng dụng của bộ giao thức TCP/IP (các giao thức nền tảng cho Internet) Bộ giao thức TCP/IP là một bộ các giao thức truyền thông cài đặt chồng
Trang 8giao thức mà Internet và hầu hết các mạng máy tính thương mại đang chạy trên đó Bộ giao thức này được đặt theo tên hai giao thức chính là TCP (Transmission Control
Protocol – Giao thức điều khiển truyền vận) và IP (Internet Protocol – Giao thức
Internet)
HTTP hoạt động theo mô hình Client (máy khách) – Server (máy chủ) Việc truy cập website được tiến hành dựa trên các giao tiếp giữa 2 đối tượng trên Khi bạn truy cập một trang web qua giao thức HTTP, trình duyệt sẽ thực hiện các phiên kết nối đến server của trang web đó thông qua địa chỉ IP do hệ thống phân giải tên miền DNS cung cấp Máy chủ sau khi nhận lệnh, sẽ trả về lệnh tương ứng giúp hiển thị website, bao gồm các nội dung như: văn bản, ảnh, video, âm thanh,…
Trong quá trình kết nối và trao đổi thông tin, trình duyệt của bạn sẽ mặc nhiên thừa nhận địa chỉ IP đó đến từ server của chính website mà bạn muốn truy cập mà không hề có biện pháp xác thực nào Các thông tin được gửi đi qua giao thức HTTP (bao gồm địa chỉ IP, các thông tin mà bạn nhập vào website…) cũng không hề được mã hóa
và bảo mật Đây chính là kẽ hở mà nhiều hacker đã lợi dụng để đánh cắp thông tin người dùng, thường được gọi là tấn công sniffing
HTTP Request Method chỉ phương thức để được thực hiện trên nguồn được nhận diện bởi Request-URI đã cung cấp:
Trang 9HTTPS hoạt động tương tự như HTTP, tuy nhiên được bổ sung thêm chứng chỉ
SSL (Secure Sockets Layer – tầng ổ bảo mật) hoặc TLS (Transport Layer Security – bảo mật tầng truyền tải) Hiện tại, đây là các tiêu chuẩn bảo mật hàng đầu cho hàng triệu website trên toàn thế giới
Cả SSL và TLS đều sử dụng hệ thống PKI (Public Key Infrastructure -hạ tầng khóa công khai) không đối xứng Hệ thống này sử dụng hai “khóa” để mã hóa thông tin liên lạc,
“khóa công khai” (public key) và “khóa riêng” (private key) Bất cứ thứ gì được mã hóa bằng khóa công khai chỉ có thể được giải mã bởi khóa riêng và ngược lại Các tiêu chuẩn này đảm bảo các nội dung sẽ được mã hóa trước khi truyền đi, và giải mã khi nhận Điềunày khiến hacker dù có chen ngang lấy được thông tin cũng không thể “hiểu” được thông tin đó
Mặc dù cùng là giao thức truyền tải thông tin trên mạng internet, nhưng HTTP và HTTPS có những điểm khác nhau cốt lõi khiến cho HTTPS được ưa chuộng hơn trên toànthế giới
Sự khác biệt lớn nhất giữa HTTP và HTTPS là chứng chỉ SSL Về cơ bản, HTTPS là một giao thức HTTP với bảo mật bổ sung Tuy nhiên, trong thời đại mà mọi thông tin đều được số hóa, thì giao thức HTTPS lại trở nên cực kỳ cần thiết cho bảo mật website
Dù bạn sử dụng máy tính cá nhân hay công cộng, các tiêu chuẩn SSL sẽ luôn đảm bảo liên lạc giữa máy khách và máy chủ được an toàn, chống bị dòm ngó
Port là cổng xác định thông tin trên máy khách, sau đó phân loại để gửi đến máy chủ Mỗi Port mang một số hiệu riêng với chức năng riêng biệt Giao thức HTTP sử dụng Port 80, trong khi đó HTTPS sử dụng Port 443 – đây chính là cổng hỗ trợ mã hóa kết nối
từ máy tính client đến server, nhằm bảo vệ gói dữ liệu đang được truyền đi
Trang 10Giao thức HTTPS sử dụng phương thức mã hóa (encryption) để đảm bảo các thông điệp trao đổi giữa máy khách và máy chủ không bị kẻ thứ ba (hackers) đọc được.
Nếu truy cập một website không được cài đặt giao thức HTTPS, người dùng sẽ đối diện với nguy cơ bị tấn công sniffing Hacker có thể “chen ngang” vào kết nối giữa máy khách và máy chủ, đánh cắp các dữ liệu mà người dùng gửi đi (password, thông tin thẻ tín dụng, văn bản email,…) và các thông tin sẵn có từ website Thậm chí, mọi thao tác của người dùng trên website đều có thể bị quan sát, ghi lại mà họ không hề hay biết
Với giao thức HTTPS, người dùng và máy chủ hoàn toàn có thể tin tưởng rằng các thông điệp chuyển giao qua luôn trong trạng thái nguyên vẹn, không qua bất kì chỉnh sửa, sai lệch nào so với dữ liệu đầu vào
Một số trình duyệt web phổ biến như Google Chrome, Mozilla Firefox, Microsoft Edge, hay Apple Safari đều có những cảnh báo người dùng về những website “không bảo mật” sử dụng HTTP Động thái này giúp bảo vệ thông tin của người dùng khi lướt web, bao gồm thông tin cá nhân, thẻ ngân hàng và dữ liệu nhạy cảm khác
Trang 112 Cấu trúc của một trình duyệt
Trước tiên chúng ta đi qua cấu trúc, thành phần chung và cơ bản nhất của một trình duyệt web hiện đại, nó sẽ gồm các thành phần (tầng) như sau:
Thành phần nằm phía trên là những thành phần gần với tương tác của người dùng, càng phía dưới thì càng sâu và nặng về xử lý dữ liệu hơn tương tác Nhiệm vụ của các lớp này như sau:
User Interface: Là tầng cao nhất, nơi tương tác chủ yếu giữa người dùng và trình
duyệt, nó bao gồm các thành phần quen thuộc như thanh Address, các nút Reload – Back – Home, Biểu tượng Bookmarks…
Browser Engine: Đây là tầng nằm giữa và là cầu nối giữa User Interface &
Rendering Engine Tầng này sẽ cung cấp các hành động (actions) để giao tiếp và
xử lý dữ liệu từ tầng Rendering Engine lên tầng User Interface và ngược lại, chuyển đổi những hành động người dùng thao tác trên tầng Interface xuống Rendering Engine Ví dụ khi nhấp vào nút Reload trang ở User Interface thì sẽ có một “tên” mang thông điệp đó xuống bên dưới để xử lý và thực hiện load lại trang, “tên” đó đang đóng vai trò như Browser Engine Vậy để dễ phân biệt bạn
Trang 12có thể xem Reload icon là User Interface, còn Reload page action là Browser Engine lo.
Rendering Engine (Layout engine): Đây là một tầng quan trọng, nó đóng vai trò
xử lý (rendering) các thẻ – câu lệnh HTML, CSS, XML, JS để hình thành giao diện (layout) hiển thị lên tầng User Interface, những gì chúng ta sẽ nhìn thấy và tương tác Nên cũng có thể hiểu nếu tầng này xử lý không hiệu quả thì phía trên người dùng cũng không hiển thị tốt
Các trình duyệt họ dùng những bộ xử lý Rendering Engine không giống nhau như sau:
Safari & Chrome: WebKit (Note: Chrome uses Blink after version 27)
Trang 13 Opera: Presto
Đây cũng là lý do tại sao trang web của bạn lại hiểu thị không giống nhau giữa các trình duyệt, vì các trình duyệt họ sử dụng những Rendering Engine khác nhau để xử lý
Networking – JavaScript Interpreter – Display UI Backend
HTTP (Hypertext Transfer Protocol)
combo-boxes, textbox, drop-down hiển thị trên web
JavaScript interpreter: xử lý và thực thi các đoạn mã JavaScript để hiển thị lên trang web Đây cũng là một thành phần rất quan trọng ảnh hưởng đến việc hiển thị trang web, do các trang web hiện nay thường cần xử lý và sử dụng khá nhiều mã JavaScript.ý khác nhau thì không thể trông mong nó xử lý và hiển thị giống nhau được
Data persistence: Có chức năng lưu trữ thông tin và dữ liệu trên máy local
Những dữ liệu này có thể là Cache, Cookies, localStorage, IndexedDB, WebSQL and FileSystem tùy vào từng hệ thống web
Vậy có thể thấy được trình duyệt cần khá nhiều thàn phần và mỗi thành phần có nhữn chức năng riêng biệt, tất cả sẽ ảnh hưởng ít nhiều đến việc hình thành và xử lý giao diện, chức năng của trang web khi hiển thị lên cho người sử dụng
Render Engine là phần quan trọng nhất của một trình duyệt, nó sẽ giúp xử lí dữ liệu HTML CSS thành Render tree và từ đó đưa ra layout và giúp nó hiển thị lên màn hình người dùng
Dưới đây là các bước xử lý (render) cơ bản và thường có trên các trình duyệt hiệnnay:
Trang 14Bước 1: Parsing HTML & CSS
Ở bước đầu tiên này, Rendering Engine sẽ có những nhiệm vụ như sau:
Parses HTML tag:
Phân tích các thẻ (tags) HTML được viết trong trong code và tạo thành một cấu trúc dạng DOM (Document Object Model) tree như hình bên dưới, giải đoạn này còn được gọi lại “content tree” Thành phần cao nhất của DOM là thẻ <html>
HTML parsing được xử lý từ trên xuống và sẽ dừng lại nếu gặp thẻ internal / external <script>, quá trình này sẽ dừng lại để tìm đến các thẻ mã <script> sau đó gởi các script này qua cho lớp “Javascript engine” xử lý, làm xong xong giai đoạn tìm kiếm vàbàn giao này HTML parsing mới tiếp tục công việc đang làm Nên đây là lý do chúng ta nên đưa thẻ <script> xuống cuối cùng khi code (bên dưới nội dung web) để trang
parsing nhanh hơn, không phải dừng lại để tìm kiếm khi gặp các thẻ <script> giữa chừng,điều này cũng khá quan trọng để tăng tốc tộ trang web
Thẻ <script> có hai thuộc tính quyết định việc load scripts là async attribute và defer attribute: