WebAssembly101 - Chạy đoạn mã WASM đầu tiên

Tôi có viết một bài giới thiệu về WebAssembly tại đây, nội dung cũng khá dài, ở đây tôi chỉ note lại một số phần về kỹ thuật cho bạn đọc.

Một vài đặc điểm của WASM  bạn đọc cần chú ý, theo quan điểm của tác giả:
  • WASM sinh ra để giải quyết bài toán hiệu năng của Javascript trước tiên, tận dụng sức mạnh tính toán ở phía thiết bị của người dùng, đặc biệt ở các tác vụ xử lý truyền thông đa phương tiện (video, audio, image), game, mô phỏng, thuật toán,...
  • WASM là hợp ngữ (Assembly Language) được thiết kế riêng cho các Javascript Engine, đây không hẳn là một ngôn ngữ lập trình độc lập, chỉ có các Javascript Engine mới có thể hiểu và thực thi các Instruction của WASM.
  • WASM có thể làm được mọi việc Javascript có thể làm, nhưng không phải được thiết kế để thay thế một ngôn ngữ linh động như Javascript, ít nhất ở thời điểm hiện tại vẫn cần Javascript để chạy được WASM.
  • WASM được nạp vào trình duyệt dưới định dạng nhị phân (chuỗi bytecode), vì vậy mã nguồn thường sẽ được viết bằng cách ngôn ngữ cấp cao như C/C++, Rust, … sau đó sẽ được biên dịch về định dạng nhị phân của WASM.
Để hiểu thêm về công nghệ WASM, ta sẽ bắt đầu bằng một ví dụ đơn giản. Giả sử trong lập trình Javascript ta cài đặt một hàm tên add2num cho phép cộng 2 số nguyên, nhìn vào bảng bên dưới ta sẽ có được so sánh về cách biểu diễn mã nguồn
Javascript
WASM Text Format
WASM Bytecode
function add2num(p0,p1)
{
 return p0 + p1;
}
(func $add2num
     (param $p0 i32)
     (param $p1 i32)
     (result i32)
      (i32.add
          (get_local $p0)
          (get_local $p1)
      )
)
<add2num>:
20 00
20 01
6a
0b
WASM Bytecode chính là đoạn mã cuối cùng mà trình duyệt cần để thực thi. Tiếp theo đây ta sẽ cần làm một số thao tác để hàm add2num viết bằng WASM chạy được trên trình duyệt Web. Đầu tiên, tạo tập tin module.wat có nội dung như sau:
(module
(func $add2num (param $p0 i32) (param $p1 i32) (result i32)
(i32.add
(get_local $p0)
(get_local $p1)
)
)
(export "wasm_add" (func $add2num))
)

Đoạn mã này là WASM ở định dạng Text (WebAssembly Text Format, gọi tắt là WAT), sử dụng cú pháp S-Expression tương tự ngôn ngữ lập trình LISP. Các ngôn ngữ Assembly đều được thiết kế các định dạng Text đi kèm, giúp cho việc đọc và sử dụng ngôn ngữ đó được dễ dàng hơn thay vì sử dụng các Bytecode Instruction khô khan và khó nhớ.

Với đoạn mã trên, ta đã định nghĩa một hàm cộng 2 số nguyên 32-bit:

  • Các đoạn mã WASM được đóng gói trong một đối tượng gọi là module, trình duyệt sẽ dựa vào các module này để thực thi WASM.
  • Tên hàm là add2num, gồm 2 tham số $p0 và $p1 kiểu số nguyên 32-bit. Hàm sẽ trả về một giá trị số nguyên 32-bit thông qua lệnh chỉ thị result. Trong WASM, đặt tên biến hoặc hàm sẽ dùng dấu dollar “$” ở phía trước.
  • Khi gọi hàm sẽ có một vùng nhớ gọi là locals chứa các giá trị khởi tạo, cụ thể ở đây là 2 tham số truyền vào hàm là $p0 và $p1, lệnh get_local sẽ đọc các giá trị trong vùng locals này và đưa vào Stack.
  • Lệnh i32.add sẽ lấy 2 giá trị nằm trên Stack, ở đây là $p0 và $p1, cộng lại với nhau, kết quả trả về đưa lại vào Stack. Hàm sẽ trả về giá trị nằm trên cùng của Stack, chính là tổng của $p0 và $p1.
  • Lệnh export sẽ định nghĩa hàm add2num sẽ được gọi bên ngoài module thông qua nhãn wasm_add

Như đã đề cập, WASM nạp vào trình duyệt dưới dạng nhị phân, nên ta cần biên dịch nội dung của module.wat thành dạng nhị phân. Rất may, WebAssembly Binary Toolkit (gọi tắt là WABT) cung cấp rất nhiều công cụ để làm việc với WASM
(https://github.com/WebAssembly/wabt), trong đó có công cụ wat2wasm cho phép biên dịch các đoạn mã WAT thành bytecode.

Thực hiện lệnh sau để biên dịch module.wat

$ wat2wasm module.wat -o module.wasm


Đoạn byte-code như trên khá khó đọc, ta có thể sử dụng công cụ wasm-objdump giúp việc hiển thị byte-code bên trong tập tin WASM nhị phân module.wasm dễ đọc hiểu hơn.

$ ./wabt/bin/wasm-objdump -d module.wasm


Bạn đọc có thể tham khảo thêm ý nghĩa và cách sử dụng của các WASM Instruction tại https://github.com/sunfishcode/wasm-reference-manual/blob/master/WebAssembly.md

Ở thời điểm hiện tại, bytecode của WASM sẽ được gọi từ Javascript. Tiếp tục tạo một tập tin index.html với nội dung như sau

<!DOCTYPE html>
<html>
<script type="text/javascript">
var wasm_instance = null;
fetch('module.wasm').then(response =>
response.arrayBuffer()
).then(bytes =>
WebAssembly.instantiate(bytes)
).then(obj => {
wasm_instance = obj.instance.exports;
});
</script>
<body>
Hello, WASM!
</body>
</html>



Đoạn Javascript trên sẽ nạp mã WASM từ tập tin module.wasm vào đối tượng wasm_instance, sau khi quá trình này diễn ra thành công, ta có thể sử dụng hàm add2num. Để kiểm tra kết quả, có thể mở một Web Server đơn giản tại thư mục đang làm việc, nhanh nhất là dùng php-cli

$ php -S 127.0.01:8888


Truy cập http://127.0.0.1:8888/index.html để xem kết quả, trong bài viết này tác giả sử dụng trình duyệt Google Chrome


Mở Chrome DevTools, kiểm tra ở Network-Tab ta sẽ thấy khi truy cập index.html, đoạn Javascript sẽ tải về tập tin module.wasm, nội dung ở định dạng nhị phân. Tiếp tục chuyển sang Console-Tab để xem mã WASM tải về có được khởi tạo thành công không.


Như ta thấy, đối tượng wasm_instance được khởi tạo thành công, đang chứa hàm wasm_add được viết bằng WASM (chính là hàm add2num được export). Có thể thử gọi hàm wasm_add ngay tại Console để kiểm tra


Ở ví dụ trên, Javascript nạp WASM bytecode từ một tập tin riêng, bên cạnh đó ta cũng có thể truyền một chuỗi bytecode trực tiếp vào Javascript thông qua một Byte Array.

Thực hiện chuyển nội dung tập tin module.wasm sang dạng Hex Array, đơn giản nhất là sử dụng Python

$ python -c "print [hex(ord(c)) for c in open('module.wasm').read()]" | tr -d "'"


Ta thực hiện nạp bytecode trên trực tiếp vào mã Javascript như sau
const wasm_bytecodes = new Uint8Array(
[
0x00, 0x61, 0x73, 0x6d, // header
0x01, 0x00, 0x00, 0x00, // header
0x01, 0x07, 0x01, 0x60, // header
0x02, 0x7f, 0x7f, 0x01, // header
0x7f, 0x03, 0x02, 0x01, // header
0x00, 0x07, 0x0c, 0x01, // header
0x08, 0x77, 0x61, 0x73, // header
0x6d, 0x5f, 0x61, 0x64, // header
0x64, 0x00, 0x00, 0x0a, // header
0x09, 0x01, 0x07, 0x00, // header
0x20, 0x00, // get_local $0
0x20, 0x01, // get_local $1
0x6a, // i32.add
0x0b // end
]
);

var new_instance = new WebAssembly.Instance(new WebAssembly.Module(wasm_bytecodes));

Có thể kiểm tra nhanh đoạn mã này sử dụng DevTools Console


Ta thấy mã WASM đã chạy thành công!

Ở bài viết tiếp theo, tác giả sẽ giải thích thêm về cơ chế stack-based trong WASM, đồng thời tìm hiểu cách Debug mã WASM trên các trình duyệt, áp dụng để giải quyết Challenge-5 tại sự kiện Flare On 2018 của hãng bảo mật FireEye.


Nhận xét

Đăng nhận xét

Bài đăng phổ biến từ blog này

CVE-2019-12839: Lỗ hổng thực thi mã lệnh tùy ý trên OrangeHRM CMS

Hình ảnh
Tổng quan -        Ứng dụng bị lỗ hổng: OrangeHRM | Open Source Human Resource Management System -        Phiên bản ảnh hưởng: 4.3.1 và trước đó. -        Mã CVE: CVE-2019-12839 Giới thiệu OrangeHRM OrangeHRM l à một hệ thống quản lý nguồn nhân lực có thể được dùng để theo dõi các thông tin khác nhau liên quan đến nguồn nhân lực trong một tổ chức. Chi tiết lỗ hổng Khi thực hiện chức cài đặt các tham số gửi Mail của hệ thống thông qua menu Admin à Configuration à Email Configuration Chọn “Sending method” là Sendmail, lúc này tham số “Path to Sendmail” s ẽ là đường dẫn tuyệt đối đến tập tin thực thi sendmail có trên hệ thống (ví dụ /usr/sbin/sendmail). Sendmail là một tiện ích dùng để gửi mail rất phổ biến trên các hệ thống Unix/Linux. OrangeHRM không kiểm tra tính hợp lệ của tập tin Sendmail người dùng gửi lên máy chủ, dẫn đến lỗ hổng thực thi mã ...
Xem chi tiết »

[Steganography] Kỹ thuật che dấu thông tin - Phần 2

Hình ảnh
Bài viết này tôi chia sẻ về cách cài đặt thuật toán LSB Steganography mà tôi đã trình bày tại Phần 1 Một số lý thuyết cần chú ý trước khi chúng ta bắt đầu: Một bức ảnh sẽ có chiều rộng là W, chiều cao là H nên số điểm ảnh (pixel) là W x H, chúng ta sẽ có một ma trận các pixel có H dòng và W cột (W x H) Mỗi pixel có một giá trị màu RGB (Red – Green – Blue), mỗi giá trị R – G – B có giá trị từ 0 -> 255 tương ứng với một Byte trong lưu trữ, suy ra có tất cả 256 3 tổ hợp màu khác nhau có thể được tạo ra.  Ví dụ: Màu đỏ R có giá trị RGB là (255, 0, 0); Xanh lá cây G (0,255,0); màu vàng Yello (255,255,0);….  Mỗi Byte gồm 8 Bit, Bit có chỉ số nhỏ nhất gọi là LSB (Least Significant Bit).  Ví dụ: Giá trị 147 chuyển sang nhị phân là 10010011 sẽc có LSB là 1. Giá trị 200 chuyển sang nhị phân là 11001000 sẽ có LSB là 0  Ý tưởng của thuật toán này là sẽ thay thế các bit LSB của từng byte trong giá trị RGB của từng Pixel. Sỡ dĩ chúng ta chỉ thay thế các bit ...
Xem chi tiết »

PHP Race Condition Vulnerability Example

This article based-on the excellent article " Practical Race Condition Vulnerabilities in Web Applications ". I have made my own sample source-code for testing. ================ # Let's start! Log-into MySQL(or MariaDB) Shell to create sample database MariaDB [test]> create database test character set utf8 collate utf8_general_ci; MariaDB [test]> grant all privileges on test.* to test@'localhost' identified by 'test@123'; MariaDB [test]> flush privileges; MariaDB [test]> create table bank_accounts(uid int auto_increment primary key,ucode varchar(10) not null,balance int(11) not null default 0,uname varchar(50) not null); MariaDB [test]> insert into bank_accounts(ucode,uname,balance) values ('BANK000001','User 1',20000),('BANK000002','User 2',5500),('BANK000003','User 3',8700); We'll test with User-1's account. MariaDB [test]> select * from bank_accounts; +-----+--------...
Xem chi tiết »