Chuyển link image thành HTTPS với CAMO

Bài viết này mình sẽ giới thiệu cho các bạn về Camo. Vậy Camo là gì thì chúng ta cùng xem bài toán sau nhé.

I. GIỚI THIỆU

Giả tỉ bạn là chủ của một website bán hàng, mà bán sản phẩm của những công ty khác. Trang web của bạn chỉ việc trưng bày các sản phẩm đó. Link hình ảnh sản phẩm là link lấy từ website khác (website đối tác). Và website bạn có đăng ký HTTPS, người mua hàng vào website của bạn có đăng ký HTTPS đã yên tâm phần nào. Nhưng khi họ phát hiện ra các link sản phẩm mà bạn bán, lấy từ các website không có đăng ký HTTPS (như hình bên dưới), lúc này, người mua sẽ lo ngại về nguồn cung cấp sản phẩm.

Để giải quyết vấn đề này, Camo sẽ giúp biến hóa link image sản phẩm, không trỏ thẳng trực tiếp đến server khách hàng, mà sẽ thông qua server của bạn - là server đã có đăng ký HTTPS.

II. MỤC TIÊU

Như vậy, hiện trạng bạn có link sản phẩm là như sau:

<img src="http://media.thethao247.vn/files/thinh/Honda-city_2016.png" >

Và mục tiêu sẽ biến đổi link về dạng sau:

<img src="https://frontend.local/camo/<digest>?url=<image-url >

Trong đó, https://frontend.local/ là domain của bạn nhé. <digest> là một chuỗi mã hoá. <image-url> là link gốc hình ảnh, trong trường hợp này sẽ là  http://media.thethao247.vn/files/thinh/Honda-city_2016.png  

III. CHUẨN BỊ ĐỒ NGHỀ

• phpamo
  • Github: https://github.com/willwashburn/phpamo
  • Ý nghĩa: Cái này giúp tạo link camo, viết bằng PHP.
• Camo server
  • Github: https://github.com/atmos/camo
  • Ý nghĩa: Được viết bằng Nodejs, giúp tạo server camo.

Lưu ý:

Bản camo trên được tác giả viết dựa trên định nghĩa link camo theo format http://example.org/<digest>?url=<image-url>
Nhưng mục tiêu của mình là muốn có link theo format http://example.org/camo/<digest>?url=<image-url > nên mình đã chỉnh code một xíu và up lên github của mình. Nên để tạo Camo server, mình sẽ lấy code ở đây https://github.com/lando110390/php_camo.git. Bạn nào thích giữ nguyên link theo format của tác giả thì clone code từ link trên giúp mình nhé.

IV. CÀI ĐẶT

Camo server

// clone camo
$ git clone https://github.com/lando110390/php_camo.git
$ cd php_camo
$ git checkout feature/camo_gmopoint
// run camo server với key là 0x24FEEDFACEDEADBEEFCAFE

// key này là tuỳ ý, bạn có thể đặt key khác.

// Nhớ chuỗi key này, vì ở trong code php mình sẽ dùng nó để tạo link image

$ CAMO_KEY="0x24FEEDFACEDEADBEEFCAFE" node server.js
// run with forever

// forever là một tool giúp bạn chạy ngầm server ngay cả lúc bạn đóng connect đến server đó thì nó vẫn chạy.

// nên run server camo bằng forever để server không bị out.

$ npm i -g forever

$ forever start -a --uid camo server.js

$ forever list

$ forever logs 0

Thiết lập Nginx:  Ở bài viết này mình đang làm demo trên Nginx, bạn nào dùng Apache thì tham khảo ở đây nhé https://wiki.diasporafoundation.org/Installation/Camo

// Thêm đoạn config dưới đây vào file nginx config
$ sudo vi /etc/nginx/sites-enabled/frontend.conf

// Đoạn config dưới để server chạy được https.

// Trước đó bạn phải chắc chắn đã tạo cặp key và chứng chỉ.

// Bạn nào chưa biết tạo thì tham khảo trên mạng cách thiết lập ssl trên nginx nhé.

listen 443 ssl;

ssl_certificate /etc/nginx/ssl/nginx.crt;

ssl_certificate_key /etc/nginx/ssl/nginx.key;
// Config khi request từ client đến mà có chứa /camo/ thì sẽ chuyển request đó đến server camo. Vì đang demo ở local nên là 127.0.0.1.

location /camo/ {

proxy_pass http://127.0.0.1:8081;

}

Thiết lập PHP: Bài viết này mình đang dùng Yii để demo, nên mình sẽ cài đặt phpamo bằng composer

$ php composer.phar require willwashburn/phpamo

Sau khi cài đặt xong, trong code mình sẽ thêm như sau:

$key    = '0x24FEEDFACEDEADBEEFCAFE'; // key mà bạn đã sử dụng khi start camo server ở trên
$server = 'frontend.local/camo';
$url    = 'http://media.thethao247.vn/files/thinh/Honda-city_2016.png';
$phpamo = new \WillWashburn\Phpamo\Phpamo($key, $server, new QueryStringFormatter(new QueryStringEncoder));
// tạo link image thông qua camo

$camo_url = $phpamo->camo($url);
echo $camo_url;

Bây giờ bạn thử nhúng $camo_url vào html để xem kết quả nhé:

V. KẾT LUẬN

Thật ảo diệu phải không. Camo giúp bạn biến hoá link image từ nguồn khác không có https thành link có https và người dùng nhìn vào cữ ngỡ link image là của chính server bạn.

VI. THAM KHẢO