Chặn F12 và DevTools: Cách bảo vệ website cơ bản

Giải pháp được triển khai bằng một tệp JavaScript dùng chung, sau đó nhúng tệp này vào đúng vị trí tùy theo nền tảng website. Bạn có thể áp dụng cho React, Next.js App Router, Next.js Page Router và HTML thuần.

Script bảo vệ website hoạt động như thế nào?

Script được dùng để vô hiệu hóa thao tác nhấn chuột phải, chặn phím F12 và hạn chế mở DevTools bằng một số tổ hợp hoặc thao tác khác. Khi DevTools được mở, phần hiển thị trong các khu vực như Elements, Sources hoặc Application có thể không cung cấp nội dung hữu ích như kỳ vọng.

Điểm quan trọng là bạn chỉ cần duy trì một tệp security.js và gọi tệp này từ tất cả các trang cần bảo vệ. Nhờ vậy, khi cần điều chỉnh hành vi chặn, bạn chỉ cập nhật một nơi thay vì sửa từng tệp HTML hay từng trang riêng lẻ.

Bạn có thể lấy tệp JavaScript bảo vệ và lưu vào dự án trước khi thực hiện các bước tích hợp bên dưới.

1. Cài chặn F12 và DevTools cho React

1.1 Tạo tệp JavaScript dùng chung

1. Mở thư mục public của dự án.
   • Đây là vị trí phù hợp để đặt tệp tĩnh mà trình duyệt có thể tải trực tiếp.
   • Tạo một tệp JavaScript, ví dụ security.js.
2. Dán nội dung script vào tệp vừa tạo.
   • Lưu tệp sau khi hoàn tất để script sẵn sàng được gọi từ website.
   • Giữ đúng phần mở rộng .js để trình duyệt nhận diện đây là tệp JavaScript.

1.2 Nhúng script vào trang gốc

1. Mở tệp index.html của dự án React.
   • Tệp này thường là điểm khởi đầu của phần giao diện chạy trên trình duyệt.
   • Bạn cần thao tác trong phần head của tệp.
2. Thêm thẻ script trỏ đến security.js.
   • Đường dẫn phải tham chiếu đúng đến tệp trong thư mục public.
   • Lưu lại và kiểm tra lại website để xác nhận script đã được tải.

2. Thiết lập cho Next.js App Router

Với Next.js sử dụng App Router, bạn cũng bắt đầu bằng cách tạo tệp security.js trong thư mục public. Sau đó, phần khai báo script sẽ được đặt trong tệp layout của ứng dụng để áp dụng rộng rãi cho các trang.

2.1 Chuẩn bị tệp security.js

1. Tạo security.js trong thư mục public.
   • Bạn có thể đặt tên khác, nhưng phải dùng nhất quán khi khai báo đường dẫn.
   • Sao chép nội dung script bảo vệ vào tệp này và lưu lại.
2. Kiểm tra tên tệp trước khi nhúng.
   • Tên trong thuộc tính src phải khớp hoàn toàn với tên tệp thực tế.
   • Sai tên hoặc sai phần mở rộng sẽ khiến script không chạy.

2.2 Khai báo Script trong layout

1. Mở tệp layout trong thư mục app.
   • Đây là nơi phù hợp để cấu hình script dùng chung cho cấu trúc App Router.
   • Thêm phần head nếu cấu trúc hiện tại chưa có.
2. Dùng thẻ Script của Next.js để tải tệp.
   • Khai báo thuộc tính src trỏ đến security.js.
   • Thiết lập chiến lược tải sau khi giao diện có thể tương tác để script chạy đúng trong môi trường Next.js.

3. Thiết lập cho Next.js Page Router

Next.js Page Router sử dụng cấu trúc khác App Router, vì vậy vị trí nhúng script cũng thay đổi. Bạn vẫn lưu tệp JavaScript trong thư mục public, nhưng cần mở khu vực pages và làm việc với tệp _document.js.

Nếu phần head trong tệp _document.js đang dùng dạng tự đóng không phù hợp để chèn nội dung, hãy chuyển thành cặp thẻ mở và đóng. Sau đó đặt thẻ script trong phần head, khai báo đường dẫn đến security.js, rồi lưu tệp.

Điều cần kiểm tra ở bước này là cấu trúc head phải được đóng đầy đủ và đường dẫn script không sai tên. Khi các dấu đóng thẻ bị thiếu hoặc tệp nằm sai vị trí, ứng dụng có thể không tải được script như mong muốn.

4. Cài script bảo vệ cho HTML thuần

Với HTML thuần, việc tích hợp trực tiếp hơn vì bạn chỉ làm việc với các tệp HTML và đường dẫn tương đối. Trước hết, hãy tạo tệp security.js tại thư mục gốc của website, nơi chứa các tệp HTML cấp cao nhất.

4.1 Hiển thị phần mở rộng tệp trên Windows

1. Bật hiển thị phần mở rộng tên tệp.
   • Trên Windows, bạn cần vào mục View để bật File name extensions.
   • Trên Windows 11, tùy chọn này nằm trong View, Show, rồi đến File name extensions.
2. Đặt đúng tên security.js.
   • Phần mở rộng phải là .js, không phải tên tệp chỉ có chữ security.
   • Việc hiển thị phần mở rộng giúp bạn tránh tạo nhầm tệp dạng security.js.txt.

4.2 Gọi script theo đúng vị trí tệp HTML

1. Với tệp HTML nằm tại thư mục gốc, dùng đường dẫn hiện tại.
   • Thêm thẻ script vào phần head của từng tệp HTML.
   • Dùng dấu chấm và dấu gạch chéo để biểu thị thư mục hiện tại, sau đó trỏ đến security.js.
2. Với tệp HTML nằm trong thư mục con, lùi lại một cấp thư mục.
   • Dùng ký hiệu hai dấu chấm để quay về thư mục cha trước khi gọi security.js.
   • Trình soạn thảo như Visual Studio Code thường gợi ý tên tệp khi bạn nhập đúng đường dẫn.
3. Kiểm tra từng trang HTML sau khi nhúng.
   • Mỗi tệp HTML là một trang riêng, nên từng tệp cần có khai báo script nếu bạn muốn áp dụng bảo vệ ở trang đó.
   • Nếu script không hoạt động, hãy kiểm tra lại đường dẫn trước tiên.

Những lỗi dễ gặp khi chặn Inspect Element

Lỗi	Nguyên nhân thường gặp	Cách xử lý
Script không chạy	Tệp JavaScript sai tên hoặc sai phần mở rộng	Kiểm tra lại tên security.js và bật hiển thị phần mở rộng tệp
Trang HTML không tải được script	Đường dẫn tương đối không đúng vị trí thư mục	Dùng ./ cho thư mục hiện tại và ../ khi cần lùi về thư mục cha
Next.js không áp dụng toàn bộ website	Đặt Script sai tệp cấu hình	Dùng layout cho App Router và _document.js cho Page Router
Giao diện lỗi sau khi chèn script	Thẻ head hoặc script chưa được đóng đúng	Rà soát cấu trúc thẻ trước khi chạy lại dự án

FAQ

Chặn chuột phải có cần áp dụng cho toàn bộ website không?

Nếu mục tiêu của bạn là hạn chế sao chép nội dung và thao tác Inspect Element trên toàn bộ website, hãy nhúng cùng một tệp security.js vào tất cả trang cần bảo vệ. Với React hoặc Next.js, nên khai báo tại vị trí gốc để giảm việc lặp lại cấu hình.

Tại sao tệp HTML trong thư mục con phải dùng đường dẫn khác?

Tệp nằm trong thư mục con không cùng vị trí với security.js ở thư mục gốc. Bạn cần dùng ký hiệu ../ để lùi về thư mục cha, rồi mới tham chiếu đến tệp JavaScript.

App Router và Page Router của Next.js khác nhau ở điểm nào khi nhúng script?

App Router đặt cấu hình tại layout trong thư mục app và dùng thẻ Script của Next.js. Page Router dùng cấu trúc pages, trong đó script được khai báo ở tệp _document.js.

Nếu bạn cần một website được tổ chức mã nguồn rõ ràng, dễ duy trì và có các lớp bảo vệ giao diện phù hợp, [dịch vụ thiết kế website của MintStack](https://mintstack.vn) có thể hỗ trợ bạn từ cấu trúc kỹ thuật đến tối ưu vận hành.