⚠️ Halaman ini membutuhkan JavaScript untuk tampil dengan benar. Mohon aktifkan JavaScript di pengaturan browser Anda.

Kode anti copy paste untuk website

Deddy Hidayat
Deddy Hidayat
Kode anti copy paste untuk website

Script ini berfungsi mencegah user melakukan seleksi teks, melakukan CTRL + A, CTRL +C, namun masih diizinkan melakukan klik kanan dan menyalin link URL :

Scrip anti copy paste JavaScript

Letakkan kode ini bagian paling bawah <body> disini </body> :

<script defer="defer">
document.addEventListener("DOMContentLoaded", function () {
  //  WHITELIST
  const whitelistedPaths = [
    '/artikel/install-ghost-local-di-windows-11/',
    '/artikel/menghosting-ghost/',
    '/artikel/mengganti-url-localhost-pada-ghost/'
  ]; 

  const currentPathname = window.location.pathname; 

  const isPathWhitelisted = whitelistedPaths.includes(currentPathname);

  if (!isPathWhitelisted) {
    const style = document.createElement("style");
    style.textContent = `
      body {
        user-select: none;
        -webkit-user-select: none;
        -ms-user-select: none;
      }
    `;
    document.head.appendChild(style);

    document.body.onselectstart = () => false;
    document.body.ondragstart = () => false;

    document.addEventListener("keydown", function (e) {
      if ((e.ctrlKey || e.metaKey) && e.key.toLowerCase() === "a") {
        e.preventDefault();
      }
    });
  }
});
</script>

untuk mengizinkan beberapa halaman anda dapat dicopy paste, anda dapat mengedit bagian WHITELIST pada kode diatas ganti url anda, perhatikan penggalan kode ini :

//  WHITELIST
  const whitelistedPaths = [
    '/artikel/install-ghost-local-di-windows-11/',
    '/artikel/menghosting-ghost/',
    '/artikel/mengganti-url-localhost-pada-ghost/'
  ];

Anti disable JavaScript

Namun, ada beberapa pengguna yang pintar, nonaktifkan Javascript di browser sehingga script diatas tidak berfungsi !, bagaimana solusinya?

kita gunakan keamanan tambahan, tempelkan kode ini ke <head> :

<noscript>
    <div class="noscript-overlay">
        <div class="noscript-content-wrapper">
            <p>⚠️ Halaman ini membutuhkan JavaScript untuk tampil dengan benar. Mohon aktifkan JavaScript di pengaturan browser Anda.</p>
        </div>
    </div>
</noscript>

<script>
    document.addEventListener('DOMContentLoaded', function() {
        var noscriptOverlay = document.querySelector('.noscript-overlay');
        
        if (noscriptOverlay) {
            // Animasi fade-out overlay
            noscriptOverlay.style.opacity = '0';
            noscriptOverlay.style.visibility = 'hidden';           noscriptOverlay.addEventListener('transitionend', function() {
                if (noscriptOverlay.style.opacity === '0') {
                    noscriptOverlay.style.display = 'none'; 
                }
            }, { once: true });
        }
    });
</script>

dan tempelkan css ini ke tema anda :

/* ANTI DISABLE JS */
.noscript-overlay {
    position: fixed !important; 
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    
    /* Warna latar belakang netral dan transparan */
    background-color: rgba(255, 255, 255, 0.7) !important; /* Putih transparan yang lebih umum */
    
    /* Efek blur transparan ala macOS */
    -webkit-backdrop-filter: blur(10px) !important; /* Untuk browser berbasis WebKit (Safari, Chrome) */
    backdrop-filter: blur(10px) !important; /* Standar CSS */

    z-index: 9999999 !important; /* Pastikan di atas semua elemen lain */
    visibility: visible !important; /* Pastikan terlihat (default) */
    opacity: 1 !important; /* Pastikan tidak transparan (default) */

    /* Menggunakan Flexbox untuk memusatkan 'noscript-content-wrapper' */
    display: flex !important;
    justify-content: center !important; 
    align-items: center !important; 

    /* Transisi untuk efek fade-in/out yang lebih halus */
    transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out !important;
}

/* Gaya untuk kotak pesan di tengah overlay */
.noscript-content-wrapper {
    background-color: rgba(255, 255, 255, 0.9) !important; /* Putih hampir buram untuk konten wrapper */
    border: 1px solid rgba(0, 0, 0, 0.1) !important; /* Border abu-abu sangat tipis */
    border-radius: 12px !important; /* Radius sudut yang sedikit lebih besar untuk tampilan modern */
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15) !important; /* Bayangan yang lebih menonjol namun lembut */
    max-width: 80% !important; /* Batasi lebar kotak pesan */
    padding: 2rem !important; 
    box-sizing: border-box !important;
    
    /* Properti teks */
    color: #333333 !important; /* Warna teks abu-abu gelap netral */
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif !important; /* Font yang lebih umum dan mirip sistem */
    text-align: center !important; 
    line-height: 1.5 !important; /* Spasi baris sedikit lebih longgar untuk keterbacaan */
    overflow: auto !important; /* Tambahkan scroll jika konten pesan melebihi batas */
    max-height: 90vh !important; /* Batasi tinggi kotak pesan agar tidak melebihi viewport */
}

/* Styling untuk teks di dalam wrapper */
.noscript-content-wrapper p {
    margin: 0 !important; 
    padding: 0 !important; 
    font-size: 1.1rem !important; /* Sedikit lebih kecil agar lebih rapi */
    font-weight: 500 !important; /* Sedikit lebih tebal untuk keterbacaan */
}

/* MEDIA QUERIES (UX: Penyesuaian Responsif) */

/* Untuk layar yang lebih kecil (misalnya, ponsel) */
@media (max-width: 768px) {
    .noscript-content-wrapper {
        max-width: 90% !important; /* Lebih lebar di ponsel */
        padding: 1.5rem !important; /* Padding sedikit lebih kecil */
        border-radius: 10px !important; /* Sesuaikan radius sudut */
    }
    .noscript-content-wrapper p {
        font-size: 0.95rem !important; /* Ukuran font lebih kecil */
    }
}

/* Untuk layar yang sangat kecil (misalnya, iPhone SE lama) */
@media (max-width: 480px) {
    .noscript-content-wrapper {
        max-width: 95% !important; /* Lebih lebar */
        padding: 1rem !important; /* Padding paling kecil */
        border-radius: 8px !important; /* Sesuaikan radius sudut */
    }
    .noscript-content-wrapper p {
        font-size: 0.85rem !important; /* Ukuran font terkecil */
    }
}
/* ANTI DISABLE JS END */

cara kerjanya : script ini menggunakan “pendekatan terbalik” Jadi, dengan menempelkan kode diatas maka sebenarnya situs dikunci dari awal dengan cara menutupinya dengan lapisan putih. untuk membuka situs diperlukan JavaScript, nah mau tidak mau user harus mengaktifkan JavaScript agar situs bisa aktif.

Anda mungkin suka: