Làm thế nào để ngăn chặn (hạn chế) việc người dùng chỉnh sửa page source?
Hí anh em, lại là mình đây. Hôm nay mình xin chia sẻ về vấn đề (như tít le). Sau khi làm 1 sản phẩm web & bàn giao thì mình gặp vấn đề là chính nhân viên khách hàng lại đi inspect & chỉnh sửa content của web để lừa nhau 🙁 sad. Khách hàng claim ngay cho mình => phải sửa thôi.
Sau khi tìm hiểu thì mình thấy có 1 số cách để ngăn chặn như sau ( chống chỉ định cho developer, hacker, nắc cơ,… cố tình sửa source nhớ 🙁 )
Render từ Dom, Html ra Image/PDF
Set Interval ở client để update content web liên tục
Ngăn chặn người dùng edit/inspect
Cách 1: Render từ Dom, Html ra image. Cách này có ưu điểm là 99% là không sửa được rồi :)) Bạn có thể trả thẳng Image/PDF về từ API hoặc trả về data và dùng JS để render ra canvas. Tuy nhiên sẽ gặp phải 1 số nhược điểm:
Vấn đề responsive sẽ bị ảnh hưởng
Phần client khá nặng (nếu để render canvas) dẫn tới trải nghiệm kém
Nếu trả về từ API thì phải định kỳ tạo, xóa ảnh nếu không ổ cứng sẽ đầy khá nhnah
Cách 2: Set Interval ở client để update content web liên tục.
Cách này thì khá là “ối giồi ôi” . Tất nhiên bạn sẽ luôn được update dữ liệu mới theo định kỳ, người dùng muốn sửa cũng phải “nhanh tay” mới có thể update được source vào page của bạn. Tuy nhiên việc bạn set bao lâu thì update lại data 1 lần cũng là vấn đề khá nan giải, và API của bạn sẽ phải chịu tải kha khá khi lượng người dùng lớn cộng với việc liên tục refresh như vậy
Cách 3: Ngăn chặn người dùng edit/inspect. Hiện tại mình đang dùng cách này, khá đơn giản, hiệu quả có thể kém 2 cách kia nhưng cũng giúp loại bỏ được kha khá thành phần “low tech” nhưng vẫn muốn edit page source. Qua Google thần công & Stackoverflow thần chưởng thì mình bổ sung đoạn JS sau vào Code
// prevent f12 & inspect source
$(document).keydown(function (event) {
if (event.keyCode == 123) { // Prevent F12
return false;
} else if (event.ctrlKey && event.shiftKey && event.keyCode == 73) { // Prevent Ctrl+Shift+I
return false;
}
});
$(document).on("contextmenu", function (e) {
e.preventDefault();
});
// set debugger
setInterval(function () {
debugger;
}, 50);Đầu tiên là mình sẽ chặn việc người dùng nhấn F12/inspect page source bằng cách check keypress & contextmenu. Thế này là vào page user sẽ không thể bật được màn hình Dev tool ở dưới nữa.
Tuy nhiên lại xảy ra vấn đề là họ sẽ bật Dev tool từ trước rồi mới vào Page của mình. Do vậy mình bổ sung thêm phần set debugger ở dưới, với thời gian là 50ms. Đại khái là cứ edit thì nó sẽ nhảy sang debug liên tục :)) gây khó chịu cho người nghịch. Nhớ set ở môi trường production thôi nhé ae :))
Đó, trên đây là 1 số cách mình muốn giới thiệu cho ae. Mong nhận được thêm góp ý và phản hồi của mọi người 😀 đừng ném gạch đá e tội nghiệp
công nghệ thông tin
,lập trình
Thx Nam. Bài viết rất chi tiết và truyền cảm hứng
Lê Minh Hưng
Thx Nam. Bài viết rất chi tiết và truyền cảm hứng