Hướng dẫn chặn copy nội dung trên website bằng Javascript

Chặn copy nội dung không chỉ bảo vệ quyền lợi của bạn mà còn giúp người đọc hiểu rằng họ đang truy cập vào một nguồn thông tin đáng tin cậy và duy nhất.

Giới thiệu về nền tảng thiết kế website Astro

Astro là một nền tảng Static Site Generator (SSG) hiện đại, được thiết kế để giúp các nhà phát triển xây dựng các trang web tĩnh nhanh chóng, linh hoạt và tối ưu hóa cho hiệu suất. Một trong những điểm nổi bật của Astro là khả năng “Zero JavaScript by Default” – nghĩa là các trang web được tạo ra chỉ chứa HTML và CSS cơ bản, giúp trang tải nhanh hơn và cải thiện đáng kể trải nghiệm người dùng.

Astro hỗ trợ các framework frontend phổ biến như React, Vue, Svelte, và SolidJS. Điều này giúp các nhà phát triển tận dụng được thế mạnh của từng framework mà không cần lo lắng về việc làm chậm trang web. Ngoài ra, Astro tích hợp mạnh mẽ với các hệ thống quản lý nội dung (CMS), cho phép bạn dễ dàng xây dựng blog, trang thương mại điện tử, hoặc các ứng dụng web quy mô lớn.

Bên cạnh đó, Astro cũng nổi bật với khả năng Partial Hydration – chỉ tải JavaScript khi cần thiết trên từng phần của trang web. Tính năng này giúp bạn giữ cho trang web của mình luôn nhẹ nhàng và nhanh chóng, ngay cả khi tích hợp các thành phần động như thanh tiến trình đọc hoặc các tính năng tương tác khác.

Tầm quan trọng của chặn copy nội dung trên website

Việc bảo vệ nội dung số là một trong những yếu tố quan trọng trong việc duy trì giá trị của một website. Trong kỷ nguyên số, khi nội dung chất lượng cao trở thành tài sản quan trọng của nhiều doanh nghiệp, vấn đề sao chép trái phép nội dung ngày càng trở nên phổ biến.

Bảo vệ quyền sở hữu trí tuệ

Đối với các trang web cung cấp nội dung gốc như blog, bài viết chuyên môn, hoặc tài liệu kỹ thuật, nội dung là tài sản có giá trị. Khi nội dung bị sao chép và sử dụng mà không có sự cho phép, bạn không chỉ mất đi công sức đã đầu tư vào việc tạo ra nội dung mà còn có thể bị mất đi vị thế trên các công cụ tìm kiếm.

Ví dụ, một bài viết về kỹ thuật SEO mà bạn đã đầu tư nhiều giờ nghiên cứu và viết ra có thể bị copy bởi một trang khác và xuất hiện trên Google trước bạn. Điều này ảnh hưởng đến uy tín, lưu lượng truy cập và cả thứ hạng SEO của bạn.

Cải thiện trải nghiệm người dùng chính hãng

Chặn copy nội dung không chỉ bảo vệ quyền lợi của bạn mà còn giúp người đọc hiểu rằng họ đang truy cập vào một nguồn thông tin đáng tin cậy và duy nhất. Khi nội dung của bạn không thể bị sao chép dễ dàng, người dùng sẽ phải quay lại trang web của bạn để tham khảo, thay vì tìm kiếm thông tin từ các nguồn sao chép không đáng tin cậy.

Hướng dẫn cách chặn copy nội dung bằng Javascript

Để chặn copy nội dung trên website bằng Javascript, bạn cần quan tâm đến 2 tệp chính: anti-copy.astro chứa Javascript tạo kích hoạt tính năng chặn copy và click chuột phải, và single.astro đặt vị trí tiến trình chặn các thao tác đó trên website. Tùy vào cấu trúc thư mục, mà 2 tệp này được định nghĩa, định dạng khác nhau, bạn cần tạo tệp table.astro và xác định vị trí của tệp single.astro để tiến hành điều chỉnh.

Tạo file Javascript để chặn copy nội dung trên website

Để chặn copy nội dung trên website, nhằm bảo vệ nội dung khỏi copy bất hợp tác, bạn có thể thêm các đoạn code dưới đây để kích hoạt tính năng.

Đầu tiên, tạo một tệp mới có tên anti-copy.astro và đặt chúng trong thư mục ~/components/javascript với đoạn code sau:

<script client:load>
	document.onselectstart = () => false;

	function preventCopy(e) {
		e.preventDefault();
	}

	function allowCopy() {
		return true;
	}

	if (window.sidebar) {
		document.onmousedown = preventCopy;
		document.onclick = allowCopy;
	}
</script>

<script client:load type="text/javascript">
	function preventRightClickIE() {
		if (document.all) {
			return false;
		}
	}

	function preventRightClickNS(e) {
		if (document.layers || (document.getElementById && !document.all)) {
			if (e.which == 2 || e.which == 3) {
				return false;
			}
		}
	}

	if (document.layers) {
		document.captureEvents(Event.MOUSEDOWN);
		document.onmousedown = preventRightClickNS;
	} else {
		document.onmouseup = preventRightClickNS;
		document.oncontextmenu = preventRightClickIE;
	}

	document.oncontextmenu = () => false;
</script>

Bước 2: Đặt thuộc tính năng chặn copy nội dung vào trong bài viết

Tiếp theo, trong tệp cấu hình bài viết, bạn chèn phần tử để chặn copy nội dung. Cụ thể, trong tệp single.astro, hãy thêm đoạn code sau:

---
import Anticopy from '~/components/javascript/anti-copy.astro';
---

<section>
	<Anticopy/>
</section>

Phần tử <Anticopy> này sẽ là nơi kích hoạt tính năng chặn copy nội dung trong toàn bộ phần tử bài viết.

Vị trí ~/components/article/anti-copy.astro cần điều chỉnh, xác định đúng vị trí để đoạn code có thể triển khai được trên bài viết.

Nếu đoạn code không hoạt động, hoặc không thể sử dụng, có thể chúng đã được điều chỉnh. Truy cập vào đây để tiếp cận đoạn code chặn copy nội dung mới nhất.

Như vậy, với đoạn code Javascript nêu trên, website của bạn đã có thêm Chặn copy nội dung, giúp nội dung hiển thị trực quan, tối ưu SEO và thân thiện với người đọc hơn rất nhiều.