Đề tài tìm hiểu webassembly

HỌC VIỆN KỸ THUẬT MẬT MÃ KHOA CÔNG NGHỆ THÔNG TIN BÀI TẬP LỚN MÔN HỌC CƠ SỞ AN TOÀN THÔNG TIN Đề tài TÌM HIỂU WEBASSEMBLY Giảng viên hướng dẫn GV NGUYỄN MẠNH THẮNG i Mục Lục DANH MỤC HÌNH ẢNH i CHƯƠNG.

HỌC VIỆN KỸ THUẬT MẬT MÃ KHOA CÔNG NGHỆ THÔNG TIN BÀI TẬP LỚN MƠN HỌC CƠ SỞ AN TỒN THƠNG TIN Đề tài: TÌM HIỂU WEBASSEMBLY Giảng viên hướng dẫn: GV NGUYỄN MẠNH THẮNG Mục Lục DANH MỤC HÌNH ẢNH i CHƯƠNG TỔNG QUAN VỀ WEBASSEMBLY 1.1 Tìm hiểu WebAssembly 1.1.1 Khái niệm WebAssembly .3 1.1.2 Ngữ nghĩa WebAssembly .3 1.2 Chức WebAssembly .4 CHƯƠNG CÁCH THỨC LẬP TRÌNH VỚI CÁC NGÔN NGỮ 2.1 Đối với lập trình C,C++,Rust 2.1.1 Minh họa bước làm 2.1.2 Cách thực 2.1.3 Kết 12 2.2 Đối với AssemblyScript .13 2.2.1 Khởi tạo 13 2.2.2 Cách thực 14 2.2.3 Kết 15 2.3 Đối với Go 16 2.3.1 Khởi động chạy với Go 16 2.3.2 Chương trình WebAssembly từ Go Code .17 2.3.3 Sử dụng trình biên dịch WebAssembly trình duyệt 17 2.3.4 Tương tác với JavaScript DOM .18 CHƯƠNG VẤN ĐỀ AN TOÀN VỚI WEBASSEMBLY .22 3.1 Mục tiêu bảo mật 22 3.1.1 Người dùng 22 3.1.2 Nhà phát triển .22 3.1.3 An toàn nhớ .22 3.1.4 Tính tồn vẹn luồng điều khiển .22 TÀI LIỆU THAM KHẢO 22 DANH MỤC HÌNH ẢNH Hình 2.1.1 Nhập hàm Tong Hieu Hình 2.1.2 WasmExplorer sau biên dịch Hình 2.1.3 WebAssembly Text Fomat Hình 2.1.4 Dịch mã export Hình 2.1.5 Tạo file chứa mã Webassembly Text Format 10 Hình 2.1.6 Kết thực nghiệm với C++ 13 Hình 2.2.1 Câu lệnh khởi tạo 14 Hình 2.2.2 Các mục dự án tạo thành công 15 Hình 2.2.3 Nhập hàm vào dự án 15 Hình 2.2.4 Mã binary sau biên dịch 16 Hình 2.2.5 Mã WebAssembly Text Format sau biên dịch 16 Hình 2.2.6 Thử nghiệm mã đưa hình 17 Hình 2.2.7 Kết thử nghiệm 17 Hình 2.3.1 Lệnh cài đặt Go 1.11 .18 Hình 2.3.2 Chương trình Hello World 18 Hình 2.3.3 Code file index.html 19 Hình 2.3.4 Cách gọi hàm updateDOM từ mã Go .20 Hình 2.3.5 Code chuyển số cấu trúc thành JSON 21 Hình 2.3.6 Code sử dụng phương pháp newCallback 22 i LỜI MỞ ĐẦU WebAssembly ngơn ngữ lập trình JavaScript mà định dạng nhị phân mức thấp cho web Mức thấp tức gần với ngơn ngữ máy điều mà xem ngơn ngữ Assembly cho giới Web tên WebAssembly đời Nhưng WebAssembly đâu mà có? Chúng ta biết rằng, trước xuất WebAssembly, trình duyệt thực thi HTML, CSS JavaScript Các đoạn mã ngôn ngữ khác C, C++,…muốn thực thi trình duyệt phải thơng qua nhiều giai đoạn trung gian Khi WebAssembly xuất hiện, đoạn mã viết ngơn ngữ C, C++ Rust biên dịch thành WebAssembly – đơn giản tập tin nhị phân có phần mở rộng WASM hình hài chúng thực thi trực tiếp trình duyệt Mặc dù khơng thể thay hồn tồn JS nhiều chuyên gia khuyên sử dụng song song hai cơng nghệ này, WebAssembly có số lợi so với JS tốc độ nhanh hơn, hiệu hơn, an toàn nhiều đặc điểm hữu ích khác CHƯƠNG TỔNG QUAN VỀ WEBASSEMBLY 1.1 Tìm hiểu WebAssembly WebAssembly tiêu chuẩn mở phát triển bởi “Nhóm cộng đồng W3C”  Sự cải tiến về JavaScript: Triển khai công việc quan trọng wasm nhập module JavaScript chuẩn  Một ngôn ngữ mới: Code WebAssembly xác định AST (cây cú pháp trừu tượng - Abstract Syntax Tree) thể dạng nhị phân Bạn ghi tên tác giả (author) gỡ lỗi (debug) định dạng văn đọc  Cải thiện trình duyệt: Các trình duyệt hiểu định dạng nhị phân, có nghĩa biên dịch gói nhị phân nén nhỏ đoạn JavaScript sử dụng ngày Phần tải liệu (payload) nhỏ chuyển giao nhanh Tùy thuộc vào việc tối ưu hoá thời gian biên dịch, gói WebAssembly chạy nhanh JavaScript  Một Compile Target: Một cách cho ngơn ngữ khác có hỗ trợ nhị phân tốt toàn tảng web 1.1.1 Khái niệm WebAssembly WebAssembly (viết tắt Wasm ) một định dạng mã an toàn, di động, cấp thấp được thiết kế để thực thi hiệu biểu diễn nhỏ gọn. Mục tiêu cho phép ứng dụng hiệu suất cao Web, khơng đưa giả định dành riêng cho Web cung cấp tính dành riêng cho Web, sử dụng môi trường khác 1.1.2 Ngữ nghĩa WebAssembly Về mặt khái niệm, ngữ nghĩa WebAssembly chia thành ba giai đoạn. Đối với phần ngôn ngữ, đặc tả định phần  Giải mã: Các mô-đun WebAssembly phân phối ở định dạng nhị phân . Q trình giải mã định dạng chuyển đổi thành đại diện bên mô-đun. Trong đặc tả này, biểu diễn mơ hình hóa bằng cú pháp trừu tượng , thay vào đó, triển khai thực biên dịch trực tiếp sang mã máy  Thẩm định: Mô-đun giải mã phải hợp lệ . Việc xác nhận kiểm tra số điều kiện tính ổn định để đảm bảo mơ-đun có ý nghĩa an tồn. Đặc biệt, thực hiện kiểm tra kiểu của hàm chuỗi lệnh phần thân chúng, đảm bảo ngăn xếp toán hạng sử dụng quán  Chấp hành: Cuối cùng, mô-đun hợp lệ được thực thi . Việc thực thi chia thành hai giai đoạn: - Thuyết minh: Một cá thể mô-đun là biểu diễn động mơ-đun, hồn chỉnh với trạng thái ngăn xếp thực thi riêng nó. Instantiation thực thi phần thân mô-đun, định nghĩa cho cho tất lần nhập nó. Nó khởi tạo tồn cầu, nhớ bảng gọi hàm khởi động mơ-đun định nghĩa. Nó trả trường hợp xuất mô-đun - Gọi : Sau khởi tạo, tính tốn WebAssembly bắt đầu bằng cách gọi một hàm xuất phiên mô-đun. Đưa đối số bắt buộc, hàm thực thi hàm tương ứng trả kết Thuyết minh gọi hoạt động môi trường nhúng 1.2 Chức WebAssembly Các mục tiêu thiết kế WebAssembly là:  Ngữ nghĩa nhanh chóng, an tồn di động : - Nhanh chóng : thực thi với hiệu suất gần mã gốc, tận dụng khả phổ biến cho tất phần cứng đại - An toàn : mã xác thực thực thi trong mơi trường hộp cát an tồn cho nhớ , ngăn ngừa lỗi liệu vi phạm bảo mật - Được xác định rõ ràng : xác định đầy đủ xác chương trình hợp lệ hành vi chúng theo cách dễ dàng để suy luận chương trình khơng thức thức - Khơng phụ thuộc vào phần cứng : biên dịch tất kiến trúc đại, máy tính để bàn thiết bị di động hệ thống nhúng - Không phụ thuộc vào ngôn ngữ : khơng đặc quyền cho ngơn ngữ, mơ hình lập trình mơ hình đối tượng cụ thể - Khơng phụ thuộc vào tảng : nhúng trình duyệt, chạy máy ảo độc lập tích hợp mơi trường khác - Mở : chương trình tương tác với môi trường chúng cách đơn giản phổ biến  Hiệu di động đại diện : - Nhỏ gọn : có định dạng nhị phân truyền nhanh cách nhỏ định dạng văn mã gốc điển hình - Mơ-đun : chương trình chia thành phần nhỏ để truyền, lưu nhớ cache sử dụng riêng biệt - Hiệu quả : giải mã, xác thực biên dịch lần chuyển nhanh chóng, cách biên dịch lúc (JIT) trước thời hạn (AOT) - Có thể truyền trực tuyến : cho phép bắt đầu giải mã, xác thực biên dịch sớm tốt, trước tất liệu nhìn thấy - Parallelizable : cho phép phân tách việc giải mã, xác nhận biên dịch thành nhiều tác vụ song song độc lập - Di động : không đưa giả định kiến trúc không hỗ trợ rộng rãi phần cứng đại Mã WebAssembly nhằm mục đích dễ dàng kiểm tra gỡ lỗi, đặc biệt mơi trường trình duyệt web, tính nằm ngồi phạm vi đặc điểm kỹ thuật CHƯƠNG CÁCH THỨC LẬP TRÌNH VỚI CÁC NGƠN NGỮ 2.1 Đối với lập trình C,C++,Rust Dùng cơng cụ online WebAssembly Explorer cho phép viết mã C/C++ biên dịch chúng thành tập tin wasm cách nhanh chóng mà không cần cài đặt công cụ (https://mbebenita.github.io/WasmExplorer/ ) 2.1.1 Minh họa bước làm Bài viết minh họa đơn giản cách dùng WebAssembly bao gồm bước:  Viết đoạn mã C, C++ hay Rust Bài viết dùng C++  Biên dịch thành WebAssembly Kết tập tin nhị phân có phần mở rộng wasm  Tích hợp tập tin wasm vào dự án  Biên dịch tập tin wasm thành thứ mà JS sử dụng 2.1.2 Cách thực Gõ đoạn mã C++ sau đến ô bên trái Explorer: int Tong(int a, int b) { return a + b;}   int Hieu (int a, int b) { return a-b;} 2.1.2.1 Biên dịch mã C++ Sau gõ đoạn mã, nhấn nút COMPILE để biên dịch đoạn mã Hình 2.1.1 Nhập hàm Tong Hieu Kết hiển thị thơng tin đến cửa sổ: Hình 2.1.2 WasmExplorer sau biên dịch Sau nhấn nút COMPILE, mã C++ biên dịch thành tập tin nhị phân wasm Cửa sổ phiên WAT (WebAssembly Text Format), phiên đọc cho người cửa sổ bên phải phiên ngôn ngữ Assembly tập tin Cùng xem lại phiên WAT đoạn mã C++ vừa biên dịch: Hình 2.1.3 WebAssembly Text Fomat Tìm đến từ khóa “export” 13 }; 14   15 loadWebAssembly('http://localhost:8081/WebProject/pheptinh.wasm') 16  //chú ý địa localhost khác máy 17    .then(instance => { 18   19    tong = instance.exports._Z4Tongii; 20   21    hieu = instance.exports._Z4Hieuii; 22   23    document.getElementById("tong").innerHTML = "Tong va la: " + 24 tong(5,6); 25   26    document.getElementById("hieu").innerHTML = "Hieu va la: " + 27 28 hieu(8,9); }); Chúng ta định nghĩa hàm loadWebAssembly với bước thực thi sau:  Đặt tập tin wasm nhớ tạm gọi array buffer dùng hàm arrayBuffer()  Biên dịch bytes lưu nhớ tạm array buffer thành mô đun WebAssembly  Chúng ta có mơ đun WebAssembly để sử dụng cần thể hóa (Instantiate) mô đun Điều tương tự việc tạo đối tượng (objects) hay thể (instaneces) từ lớp (class) lập trình hướng đối tượng Khi gọi hàm loadWebAssembly trả thể mô đun WebAssembly gọi instance Các hàm C++ biên dịch thành  _Z4Tongii và _Z4Hieuii được gọi thông qua thuộc tính exports của thể instance gán 12 đến biến tồn cục tong và hieu Chúng ta sử dụng hàm C++ thông qua biến tong hieu này: document.getElementById("tong").innerHTML = "Tong va la: " + tong(5,6);   document.getElementById("hieu").innerHTML = "Hieu va la: " + hieu(8,9); Lưu đóng tập tin scripts.js Di chuyển thư mục WebProject đến thư mục để chạy localhost như:htdocs Xampp (có đường dẫn thơng thường C:\xampp\htdocs) 2.1.3 Kết Hình 2.1.6 Kết thực nghiệm với C++ Địa localhost phải khớp với địa nhập hàm loadWeabAssembly tập tin scripts.js Cổng localhost khác máy Hàm Tong và Hieu được định nghĩa ngôn ngữ C++ gọi thành cơng trình duyệt Chrome nhờ có WebAssembly 13 2.2 Đối với AssemblyScript 2.2.1 Khởi tạo Đầu tiên tạo thư mục chứa dự án, thư mục chứa dự án bật Command Prompt nhập câu lệnh để tạo dự án Hình 2.2.7 Câu lệnh khởi tạo Sau tạo xong dùng phần mềm lập trình để mở dự án (ở dùng Visual Studio Code) 14 Hình 2.2.8 Các mục dự án tạo thành công 2.2.2 Cách thực Ở file index.ts tạo hàm “add” “sub” sau Hình 2.2.9 Nhập hàm vào dự án Chạy lại câu lệnh “npm run asbuild” terminal để cập nhật lại dự án Ở file optimized.wasm build nơi chứa mã webassembly dạng nhị phân 15 Hình 2.2.10 Mã binary sau biên dịch Tôi biên dịch sang dạng text file optimized.wat sau: Hình 2.2.11 Mã WebAssembly Text Format sau biên dịch Ở dịng “add” “sub” tên hàm xác định “$add” “$sub” chọn hàm WebAssembly bên modun xuất Ở file index.js mục test nơi ta thử nghiệm: 16 Hình 2.2.12 Thử nghiệm mã đưa hình 2.2.3 Kết Bật terminal nhập câu lệnh “npm run test” để xem kết thử nghiệm: Hình 2.2.13 Kết thử nghiệm Vậy thử nghiệm chạy thành công 2.3 Đối với Go 2.3.1 Khởi động chạy với Go Để biên dịch sang WebAssembly, có sẵn từ phiên Go 1.11 Ngay bạn cài đặt Go, kiểm tra go version , phiên cài đặt Để tải Go 1.11, sử dụng lệnh sau: 17 Hình 2.3.14 Lệnh cài đặt Go 1.11 Kết 1.11 bạn cài đặt thành cơng 2.3.2 Chương trình WebAssembly từ Go Code Chúng ta tạo gói gọi webassembly Các thư mục $GOPATH nên có thư mục tên src chứa thư mục gói webassembly Cuối thực tập tin với đường dẫn sau: $GOPATH/src/webassembly/webassembly.go Viết chương trình “ Hello World” đơn giản: Hình 2.3.15 Chương trình Hello World Sau đó, biên dịch tệp Go thành WASM lệnh sau: 2.3.3 Sử dụng trình biên dịch WebAssembly trình duyệt Để gọi mã Go biên dịch sẵn, cần sử dụng thư viện cấp nguồn Go wasm_exec.js Tạo tệp index.html (lưu trữ code cho trang web), nơi tải tệp WASM thư mục chỗ viết tệp Go : $GOPATH/src/webassembly/webassembly.go 18 ...Mục Lục DANH MỤC HÌNH ẢNH i CHƯƠNG TỔNG QUAN VỀ WEBASSEMBLY 1.1 Tìm hiểu WebAssembly 1.1.1 Khái niệm WebAssembly .3 1.1.2 Ngữ nghĩa WebAssembly... nhanh hơn, hiệu hơn, an toàn nhiều đặc điểm hữu ích khác CHƯƠNG TỔNG QUAN VỀ WEBASSEMBLY 1.1 Tìm hiểu WebAssembly WebAssembly tiêu chuẩn mở phát triển bởi “Nhóm cộng đồng W3C”  Sự cải tiến về JavaScript:... biên dịch: Hình 2.1.3 WebAssembly Text Fomat Tìm đến từ khóa “export” Hình 2.1.4 Dịch mã export Từ export thứ kèm từ memory liên quan đến nhớ khơng cần hiểu sâu dịng mã cần ý hai export kế tiếp