tìm hiểu kỹ thuật xây dựng extention cho trình duyệt web

3 Tìm hiểu về EXTENSION3.1 Extension là gì?- Extension là các chương trình phần mềm nhỏ tùy chỉnh trải nghiệm duyệt web.Cho phép người dùng điều chỉnh chức năng và hành vi của trình duyệ

ĐẠI HỌC BÁCH KHOA HÀ NỘI

TRƯỜNG CÔNG NGHỆ THÔNG TIN VÀ TRUYỀN THÔNG

- □ □ - 

Báo Cáo Bài Tập Lớn

Đề

tài : Tìm hiểu kỹ thuật xây dựng EXTENTION cho

trình duyệt web

Học phần: Nhập môn an toàn & bảo mật thông tin

Giảng viên: ThS Đỗ Văn Uy

Nhóm sinh viên thực hiện:

Hà Nội, năm 2022

Mục Lục

1 Giới thiệu 3

2 Tìm hiểu về Browser 5

2.1 Browser là gì? 5

2.2 Browser hoạt động như thế nào? 5

3 Tìm hiểu về EXTENSION 7

3.1 Extension là gì? 7

3.2 Extension hoạt động như thế nào 7

3.3 Các thành phần chính 7

3.4 Ví dụ về một Extension cơ bản 8

4 Lỗ hổng bảo mật 11

4.1 Tổng quan về lỗ hổng trên trình duyệt 11

4.2 Một số lỗ hổng bảo mật của Extension 12

5 Kết luận và đánh giá các thành viên 18

1 Giới thiệu

Hiện nay, một nửa dân số nước ta sử dụng internet vào những công việc hàng ngày hoặc trong những lúc rảnh rỗi Điều này chứng tỏ rằng công nghệ đang ngày càng đóng một vị trí quan trọng hơn trong xã hội loài người Lúc này số người am hiểu về các ứng dụng cũng như những lợi ích của công nghệ đang không ngừng tăng lên Từ những nhu cầu mới phát sinh, các dịch vụ thiết kế Website, thiết kế Extension,… được ra đời hàng loạt Những dịch vụ này đã nhanh chóng trở thành những ngành “hot” trên thị trường hiện nay Vậy vì sao doanh nghiệp, cá nhân cần phải thiết kế Extension cho riêng mình? Thứ nhất, không phải khi nào các Extension trên trình duyệt đều có thể đáp ứng được tối

đa nhu cầu của tất cả chúng ta Các Extension trên những trình duyệt được tạo ra cho rất rất nhiều người sử dụng Vì thế, những tiện ích này chỉ nhắm vào nhu cầu cần thiết của đa

số những người sử dụng có thể dùng Vậy nếu chúng ta có những nhu cầu riêng thì phải làm sao? Câu trả lời chính là tự tạo ra các Extension cho riêng mình Chúng sẽ giúp cho những ai sử dụng nó được hỗ trợ trực tiếp và tiết kiệm được tối đa nguồn nhân lực và thời gian

Mỗi một lĩnh vực bạn sẽ cần đến một Extension riêng

Những lợi ích mà các Extension này mang lại cho chúng ta là vô cùng to lớn Nó hoàn toàn có thể giúp bạn quản lý đơn hàng khi khách hàng đặt hàng tại website của mình, tạo

ra fake IP để làm MMO, auto click cho các dự án auto IT,… Tùy vào mỗi nhu cầu mà bạn

có thể tạo nên những Extension phù hợp

Thứ hai, các Extension có sẵn trên trình duyệt sẽ tiềm ẩn những hiểm họa khôn lường Khi chúng ta tải về một Extension nào đó trên các trình duyệt thì nguy cơ bị nhiễm mã độc vào máy vi tính của mình là rất lớn Những mã độc này có thể vô hiệu hóa những tài liệu bảo mật của chúng ta vì trước đó khi cài đặt vô tình chúng ta đã cho nó quyền truy cập Điều này là vô cùng nguy hiểm khi các mã độc (như WannaCry) có thể tấn công các tài liệu bất cứ lúc nào Khi một máy vi tính bị nhiễm mã độc thì vô tình chiếc máy vi tính này sẽ làm cho mã độc bị phát tán một cách nhanh hơn

Hẳn là ai cũng hiểu, mã độc WannaCry ban đầu cũng chỉ nhiễm vào một máy vi tính mà thôi Sau một thời gian ngắn, ta đã có thể thấy được nó lan truyền nhanh chóng như thế nào rồi Nó không chỉ lan ra các máy vi tính trong khuôn khổ của một quốc gia mà nó có thể lây lan ra toàn cầu

Vì vậy, việc tự xây dựng Extension cho trình duyệt web là vô cùng quan trọng

Mã độc tấn công máy tính của bạn âm thầm, lặng lẽ

2 Tìm hiểu về Browser

2.1 Browser là gì?

- Browser là gì? Web Browser hay còn gọi là Browser được dịch ra tiếng Việt là trình duyệt web

- Công dụng của trình duyệt web chính là giúp bạn có thể truy cập các trang web

mà bạn muốn và thực hiện các hoạt động trên đó như: Tìm kiếm thông tin, xem phim, đọc sách báo, chơi game, đăng nhập tài khoản thuộc trang web,…

riêng biệt cho phép trình duyệt web nhận biết, truy xuất và hiển thị chúng trên thiết bị của người dung

2.2 Browser hoạt động như thế nào?

- Khi browser tìm nạp dữ liệu từ một máy chủ được kết nối internet, nó sẽ sử dụng một phần mềm được gọi là công cụ kết xuất để dịch dữ liệu đó thành văn bản và hình ảnh Dữ liệu này được viết bằng Ngôn ngữ đánh dấu siêu văn bản (HTML) và các browser đọc mã này để tạo ra những gì chúng ta thấy, nghe và trải nghiệm trên internet

- Chức năng chính của browser là hiển thị trang web, được yêu cầu từ người sử dụng đến Server, lên cửa sổ trình duyệt Hình thức của web (resource format) chủ yếu được xây dựng dưới định dạng HTML, với các nguồn tài nguyên như pdf, <img> được định danh bằng một lien kết URI (Uniform Resource Identifier)

- Cấu trúc của browser gồm các phần:

o UI Front-end: giao diện người sử dụng, chính là cửa sổ trình duyệt với các thanh địa chỉ, các nút Back/Forward …

o Browser Engine: một giao diện (interface) để truy xuất và điều khiển Rendering Engine phía dưới

o Rendering Engine: chịu trách nhiệm về việc hiển thị các nội dung được yêu cầu lên cửa sổ giao diện người sử dụng

o Networking: bộ phận thực hiện tác vụ gửi các yêu cầu về mạng (network call), ví dụ như các gói HTTP Request

o UI Back-end: hỗ trợ người sử dụng dùng các widget cơ bản như combo box ( một dạng drop-down box hoặc list box có kèm theo 1 khung cửa

sổ có thể edit text) và cửa sổ (windows)

o JavaScript Interpreter: dịch và thi hành các đoạn code JavaScript

o Data Storage/Web Database: nơi mà trình duyệt lưu trữ các dữ liệu cần thiết lên ổ cứng của máy, ví dụ như Cookies

- Trong số các phần trên, có thể nói Rendering Engine là phần quan trọng nhất, vì

nó giúp chuyển đổi các đoạn code HTML và CSS sang dạng text hiển thị cho user

- Đa số các thiết bị điện tử ngày nay đều có tốc độ làm mới (Refresh Rate) là 60 fps, nghĩa là cứ 1 giây màn hình hiển thị lại được load lại 1 lần Do vậy, để trải nghiệm người sử dụng – QoE (Quality of Experience) được tốt, các browser phải đảm bảo được một tốc độ render tương ứng Trên thực tế, theo tính toán, browser phải cố gắng hoàn thành được tác vụ render dưới 10ms để không gây

ra giựt (gọi là jank)

3 Tìm hiểu về EXTENSION

3.1 Extension là gì?

- Extension là các chương trình phần mềm nhỏ tùy chỉnh trải nghiệm duyệt web Cho phép người dùng điều chỉnh chức năng và hành vi của trình duyệt theo nhiều cách, cung cấp những thứ như:

o Công cụ tăng năng suất làm việc

o Làm phong phú nội dung

o Tổng hợp thông tin

o Giải trí và trò chơi

- Đây chỉ là một vài ví dụ về nhiều thứ mà tiện ích mở rộng có thể làm Xem Cửa hàng Chrome trực tuyến để xem hàng nghìn ví dụ khác nhau về các tiện ích mở rộng đã xuất bản

3.2 Extension hoạt động như thế nào

CSS Chúng chạy trong một môi trường thực thi riêng biệt và tương tác với trình duyệt Chrome

- Các Extension cho phép bạn "mở rộng" trình duyệt bằng cách sử dụng các API để sửa đổi hành vi của trình duyệt và truy cập nội dung web Các tiện ích mở rộng hoạt động bằng giao diện người dùng người dùng cuối và API nhà phát triển:

- Giao diện người dùng tiện ích mở rộng Điều này cung cấp một cách nhất quán để người dùng quản lý tiện ích mở rộng của họ

- API tiện ích mở rộng Các API tiện ích mở rộng cho phép mã của tiện ích mở rộng truy cập vào các tính năng của chính trình duyệt: kích hoạt tab, sửa đổi yêu cầu mạng, v.v

- Để tạo tiện ích mở rộng, bạn tập hợp một số tài nguyên - tệp kê khai, tệp JavaScript

và HTML, hình ảnh và những tài nguyên khác - tạo thành tiện ích mở rộng Để phát triển và thử nghiệm, bạn có thể tải các "giải nén" này vào Chrome bằng chế độ nhà phát triển tiện ích mở rộng Khi bạn hài lòng với tiện ích mở rộng của mình, bạn có thể đóng gói nó và phân phối nó cho người dùng

3.3 Các thành phần chính

- Về cơ bản, một Chrome Extension chủ yếu sẽ được viết bằng Javascript và HTML Bạn có thể tổ chức các thư mục tùy ý sao cho phù hợp và tiện lợi nhất trong quá trình code

a File manifest

- Mỗi một extension đều có một file manifest với định dạng json (manifest.json) Với file này bạn có thể cung cấp các thông tin cần thiết về extension như: version, tên, icon, các quyền cần thiết,…

b Background script

- Đây là file bạn xử lý các sự kiện của trình duyệt: load extensions, nhận message từ content script hoặc extension khác,

c Các thành phần UI

- Là phần giao diện tương tác với người dùng của extension, nó có thể là context trên trang web, hộp tìm kiếm trên thanh menu, hoặc phím tắt, thường là một popup hiện ra khi bạn bấm vào Icon của extension trên Chrome menu

d Content script

- Đầu tiên bạn cần biết content script có thể chạy trên trang web bạn đang xem nghĩa

là bạn có thể thao tác với DOM, gọi các Web API, như các script thông thường tuy nhiên content script chạy trên một môi trường độc lập với các script trên trang web chính, nghĩa là nếu bạn trên trang web của bạn có một thư viện JS như Jquery bạn sẽ không thể sử dụng nó trong content script

3.4 Ví dụ về một Extension cơ bản

Bước 1: Tạo file manifest

{

"name":"Hello Extensions",

"description" :"Base Level Extension",

"version":"1.0",

"manifest_version":2

}

Bước 2:

Giờ với ví dụ Hello Extensions ở trên bạn hãy thêm đoạn code sau vào file manifest.json:

"background": {

"scripts": [“background.js”],

“persistent”: false

}

Bạn hãy tạo thêm file background.js:

chrome.runtime.onInstalled.addListener(function() {

alert('Hello Extensions');

});

Giờ khi ngay khi cài đặt extensions, sẽ có một alert thông báo hiện ra Đây là một ví

dụ đơn giản về background script giúp bạn dễ hình dung

Bước 3: Tạo thành phần UI

Mình sẽ lấy ví dụ đơn giản là một popup sẽ hiện ra khi bạn bấm vào Icon của Extension trên Chrome menu

Trong file manifest.json bạn thêm đoạn code sau:

"browser_action": {

"default_popup":"popup.html"

}

Giờ trong file popup.html:

<html>

<head>

<title>Stone Block</title>

</head>

<body>

<iframe width="560"height="315"

src="https://www.youtube.com/embed/xCkcSL3zfJk"frameborder="0"

allow="accelerometer; autoplay; encrypted-media; gyroscope;

picture-in-picture"allowfullscreen></iframe>

</body>

</html>

Bước 4: Load lại extension:

Vậy là mình có cái extension bấm vào thì sẽ hiện một video trên youtube từ đường dẫn ở trên:

4 Lỗ hổng bảo mật

4.1 Tổng quan về lỗ hổng trên trình duyệt

- Các chuyên gia của Awake Security cho biết đã phát hiện nhiều phần mềm gián điệp qua 32 triệu lượt tải về của các tiện ích mở rộng dành cho trình duyệt Google Chrome Đã có ít nhất 70 tiện ích độc hại đã bị xóa bỏ khỏi cửa hàng trực tuyến của Google

- Đây là điều đáng lo ngại bởi đây là một trong những trình duyệt được sử dụng nhiều nhất hiện nay với các hoạt động cho trao đổi thông tin, quản lý tài khoản, mua bán trực tuyến

- Đối với những ai chưa biết, tiện ích mở rộng (Extension) là các tính năng bổ sung mà người dùng có thể thêm vào trình duyệt của mình, ví dụ như các tính năng để chặn quảng cáo hoặc tăng cường bảo mật web

- Phát ngôn viên của Google - Scott Westover cho biết: “Khi chúng tôi nhận được cảnh báo về các tiện ích mở rộng trên cửa hàng trực tuyến vi phạm chính sách của Google, chúng tôi đã hành động và sử dụng các sự cố đó làm tài liệu đào tạo để cải thiện việc phân tích tự động và thủ công”

- Hầu hết các tiện ích độc hại đều đã được liệt kê để cảnh báo người dùng về các trang web nguy hiểm tiềm tàng hoặc chuyển đổi định dạng tệp Những tiện ích này được báo cáo là đã đánh cắp lịch sử và dữ liệu duyệt web của người dùng, trong đó có thể bao gồm cả thông tin đăng nhập

- Các tiện ích mở rộng đã được thiết kế có chủ đích để chúng không bị phát hiện bởi phần mềm diệt virus hoặc bảo mật

- Awake cũng nhận thấy rằng, các nhà phát triển đã gửi thông tin liên hệ sai khi

họ gửi tiện ích mở rộng cho Google

- Theo Engadget, báo cáo từ Duo Security dựa trên việc kiểm tra mức độ an toàn của 180.000 ứng dụng và tiện ích mở rộng cho trình duyệt Chrome 85% trong

số này không đi kèm chính sách bảo mật, nghĩa là các nhà phát triển về cơ bản

có thể xử lý dữ liệu của người dùng mà họ thu thập được theo ý muốn

- Trong quá trình xây dựng một công cụ miễn phí để phân tích các tiện ích mở rộng của Chrome, Duo đã đánh giá 120.000 ứng dụng và tiện ích mở rộng trong Chrome Web Store Công ty nhận thấy 35% trong số này có thể đọc dữ liệu trên bất kỳ trang web nào mà người dùng truy cập Gần 32% sử dụng các thư viện của bên thứ ba với nhiều lỗ hổng bảo mật và 77% không có trang web hỗ trợ

quan tâm tới tình trạng trên Hệ quả là tiện ích có thể bị một bên thứ ba mua lại hoặc hack bằng phần mềm độc hại Tháng 10/2018, các nhà phát triển tiện ích

mở rộng của Chrome là mục tiêu của một cuộc tấn công lừa đảo hàng loạt

Trong đó, tin tặc đã cố gắng truy cập thông tin đăng nhập cho tài khoản Google của nhà phát triển

Người dùng thường không chú ý tới các ứng dụng và tiện ích cài trên trình duyệt

Ảnh: Engadget

- Google đã thực hiện nhiều bước để cải thiện mức độ bảo mật của Chrome, chặn việc cài đặt các tiện ích mở rộng bên ngoài Chrome Web Store, cũng như đặt ra các quy tắc nhằm cải thiện quyền riêng tư và bảo mật của người dùng Tuy nhiên, dữ liệu từ Duo cho thấy Google còn rất nhiều việc phải làm Người dùng được khuyên tránh sử dụng các tiện ích mở rộng trên Chrome không thuộc các đơn vị phát triển có tiếng, đặc biệt nên kiểm tra các chính sách bảo mật đi kèm trước khi cài đặt

- Theo thống kê, ước tính có khoảng 85% ứng dụng và tiện ích trên Chrome có nguy cơ bảo mật Điều này rấy lên một sự lo ngại cho người dùng bởi đa số những thông tin cá nhân cũng như thanh toán online đều được thông qua trình duyệt Web

4.2 Một số lỗ hổng bảo mật của Extension

a Phát hiện lỗ hổng bảo mật nghiêm trọng trong tiện ích mở rộng LastPass trên Chrome và Firefox

e Chuyên gia bảo mật phát hiện đến 3 lỗ hổng bảo mật cực nghiêm trọng có trong tiện ích mở rộng của dịch vụ lưu trữ mật khẩu phổ biến LastPass trên hai trình duyệt nổi tiếng Chrome và Firefox

f Chuyên gia nghiên cứu bảo mật Tavis Ormandy từ nhóm Google Project Zero đã phát hiện ra một số vấn đề bảo mật nghiêm trọng trong dịch vụ quản lý mật khẩu nổi tiếng LastPass Năm nay, ông tiếp tục tìm ra nhiều lỗ hổng mới từ ứng dụng này

g Ormandy đã đề cập đến việc phát hiện một lỗ hổng bên trong tiện ích mở rộng trên trình duyệt Firefox Ngay sau đó, ông tìm ra một lỗi ảnh hưởng cả hai trình duyệt Chrome và Firefox Cuối cùng, ông phát hiện thêm một lỗ hổng bên thứ ba cho phép hacker đánh cắp mật khẩu từ bất cứ tên miền nào

h Lỗ hổng đầu tiên chưa được công bố cụ thể, bởi theo Ormandy, Mozilla cần thời gian để kiểm tra lại lỗi và ra bản cập nhật vá lỗi trước khi tung ra cho người dùng Theo chia sẻ của Ormandy trên Twitter, lỗ hổng này có thể tiết lộ mật khẩu của người dùng, nhưng chưa thông báo cụ thể lỗi này có thể ảnh hưởng đến người dùng như thế nào

ông báo đã vá lỗi xong của LastPass

j Lỗ hổng thứ hai có vẻ nghiêm trọng hơn vì khả năng đánh cắp mật khẩu người dùng của nó, hoặc nếu người dùng cài đặt tiện ích mở rộng này thì ứng dụng sẽ khởi chạy bất kỳ đoạn mã nào mà hacker yêu cầu Theo phản hồi của LastPass thì lỗ hổng này

đã được xử lý trong phiên bản cập nhật mới nhất Để vá lỗ hổng này, người dùng nên cập nhật càng nhanh càng tốt

Nộ

i dung Twitter của Ormandy về lỗ hổng thứ hai

k Lỗ hổng thứ ba mà Ormandy phát hiện có liên hệ đến phiên bản cũ của tiện ích này trên Firefox, nhưng may mắn là nhà cung cấp LastPass đã sửa thông qua bản cập nhật mới nhất Hiện phiên bản mới nhất là phiên bản 3.3.6

l Đây không phải là lần đầu tiên LastPass gặp phải những vấn đề bảo mật nghiêm trọng như thế này Trước đây, dịch vụ lưu trữ mật khẩu nổi tiếng này đã bị tấn công vào năm 2011 và tháng 6/2015

m Kaspersky Proguide khuyến cáo người dùng nên cập nhật phiên bản mới nhất của tiện ích mở rộng LastPass trên cả hai trình duyệt Chrome và Firefox để tiếp tục sử dụng Nếu cảm thấy lo lắng về độ bảo mật của dịch vụ này trong tương lai, người