Protectie anti-copiere si protejarea continutului unui site web

[GanGster 516]

 

Metode practice (HTML/CSS/JS + server) care descurajează copierea și clonarea, fără a afecta indexarea în Google și Bing.

Cuprins

1. Introducere & limite
2. Metoda SEO-safe: anti-copiere „deterrent”
3. Copiere cu atribuire automată (recomandat)
4. Watermark invizibil în text (urmărire)
5. Watermark vizibil (overlay CSS)
6. Protecție imagini: anti-hotlink (Apache/Nginx)
7. Antiframe & CSP (securitate suplimentară)
8. Aspecte legale (DMCA) & bune practici
9. Checklist de testare & revert
10. FAQ scurt

1) Introducere & limite

Nu există o metodă perfectă care să impiedice 100% copierea. Browserul trebuie să primească conținutul pentru a-l afișa, deci orice soluție pur front-end poate fi ocolită. Totuși, putem descuraja majoritatea încercărilor fără a afecta SEO: blocăm copierea „casual”, adăugăm atribuire automată la clipboard, marcăm textul cu un watermark invizibil și protejăm imaginile de hotlink.

2) Metoda SEO-safe: anti-copiere „deterrent” (CSS + JS)

Această metodă nu afectează indexarea în Google/Bing. Blochează click dreapta, selectarea textului și shortcut-uri uzuale (F12, Ctrl+U, Ctrl+C etc.). Este ușor de implementat și oprește încercările obișnuite.

CSS (în <head>)

<style>
/* Interzice selecția pe tot site-ul (dar permite pe controale) */
body, .nocopy {
  -webkit-user-select: none !important;
  -moz-user-select: none !important;
  -ms-user-select: none !important;
  user-select: none !important;
}
a, button, input, textarea { -webkit-user-select: text !important; user-select: text !important; }
::selection { background: transparent; color: inherit; }

/* Mesaj discret în colț */
.copy-warning {
  position: fixed; right: 18px; bottom: 18px;
  background: rgba(59,130,246,.96); color:#fff;
  padding:10px 14px; border-radius:12px; font-size:14px;
  box-shadow:0 6px 18px rgba(0,0,0,.4); z-index:99999; display:none;
}
</style>

HTML (în <body>)

<div id="copyWarning" class="copy-warning" role="status" aria-live="polite">
  Copierea conținutului este restricționată.
</div>

JS (înainte de </body>)

<script>
(function(){
  const warn = (msg) => {
    const el = document.getElementById('copyWarning');
    if(!el) return;
    el.textContent = msg || 'Copierea conținutului este restricționată.';
    el.style.display = 'block';
    clearTimeout(el._t);
    el._t = setTimeout(() => el.style.display = 'none', 2200);
  };

  document.addEventListener('contextmenu', (e) => { e.preventDefault(); warn('Click dreapta dezactivat.'); });
  document.addEventListener('copy', (e) => { e.preventDefault(); warn('Copierea este dezactivată.'); });

  document.addEventListener('selectstart', (e) => {
    const t = e.target;
    if (t && (t.tagName==='INPUT' || t.tagName==='TEXTAREA' || t.isContentEditable || t.closest('a'))) return;
    e.preventDefault();
  });

  document.addEventListener('keydown', (e) => {
    const t = e.target;
    if (t && (t.tagName==='INPUT' || t.tagName==='TEXTAREA' || t.isContentEditable)) return;
    const k = e.key.toUpperCase();
    if (k==='F12' || (e.ctrlKey && (k==='U' || k==='S' || k==='A')) || (e.ctrlKey && e.shiftKey && (k==='I' || k==='J' || k==='C'))) {
      e.preventDefault(); e.stopPropagation(); warn('Acces limitat la sursă.'); 
    }
  }, true);

  document.addEventListener('mouseup', () => {
    const sel = window.getSelection && window.getSelection();
    if (sel && sel.toString().length > 24) { sel.removeAllRanges(); warn('Copierea textului este restricționată.'); }
  });
})();
</script>

3) Copiere cu atribuire automată (recomandat)

În loc să blochezi complet copierea, poți permite copierea dar adăuga automat sursa în clipboard. SEO rămâne intact, iar tu primești mențiune când textul e lipit.

<script>
document.addEventListener('copy', async (e) => {
  const sel = window.getSelection();
  if (!sel || sel.toString().length < 1) return;
  const page = location.href;
  const plain = sel.toString() + `\n\n— Copiat de pe: ${page}`;
  const html  = (() => {
    try {
      const div = document.createElement('div');
      for (let i=0; i<sel.rangeCount; i++) div.appendChild(sel.getRangeAt(i).cloneContents());
      return `${div.innerHTML}<br><br><em>— Copiat de pe: <a href="${page}">${page}</a></em>`;
    } catch(_) { return sel.toString(); }
  })();
  e.preventDefault();
  if (navigator.clipboard && window.ClipboardItem) {
    await navigator.clipboard.write([
      new ClipboardItem({
        "text/plain": new Blob([plain], {type:"text/plain"}),
        "text/html" : new Blob([html],  {type:"text/html"})
      })
    ]);
  } else {
    const tmp = document.createElement('textarea');
    tmp.value = plain; document.body.appendChild(tmp);
    tmp.select(); document.execCommand('copy'); document.body.removeChild(tmp);
  }
  alert('Text copiat cu atribuire la sursă ✅');
});
</script>

4) Watermark invizibil în text (urmărire)

Inserează caractere „zero-width” în textul principal (clasa .wm). Te ajută să demonstrezi proveniența când găsești copia online.

<script>
// Marchează discret textul din elementele .wm
(function watermark(){
  const MARK = "\u200B"; // zero-width space
  const targets = document.querySelectorAll('.wm');
  const stampEvery = 10; // inserează la fiecare 10 caractere
  targets.forEach(el => {
    const walk = document.createTreeWalker(el, NodeFilter.SHOW_TEXT, null);
    let node;
    while (node = walk.nextNode()) {
      const t = node.nodeValue;
      if (!t || t.trim().length < 20) continue;
      let out = '', c = 0;
      for (let i=0; i<t.length; i++) {
        out += t[i];
        if (++c % stampEvery === 0) out += MARK;
      }
      node.nodeValue = out;
    }
  });
})();
</script>

5) Watermark vizibil (overlay CSS, opțional)

Un overlay ușor peste zona de conținut descurajează copierea vizuală (screenshot-uri reutilizate).

<style>
.brand-watermark { position: relative; overflow: hidden; }
.brand-watermark::before {
  content: "© NumeleBrandului • siteul-tau.ro";
  position: absolute; inset: 0; pointer-events: none;
  font: 700 16px/1.2 system-ui, Arial; color: rgba(255,255,255,.08);
  transform: rotate(-30deg); white-space: nowrap;
  background: repeating-linear-gradient(-30deg, transparent 0 40px, rgba(255,255,255,.06) 40px 42px);
  display: grid; place-items: center;
}
</style>
<main class="brand-watermark wm">
  <!-- conținutul tău aici -->
</main>

6) Protecție imagini: anti-hotlink

Apache (.htaccess)

# Activează mod_rewrite
RewriteEngine On
# Permite doar de pe site-ul tău și motoarele de căutare
RewriteCond %{HTTP_REFERER} !^https?://(www\.)?siteul-tau\.ro/ [NC]
RewriteCond %{HTTP_REFERER} !google\. [NC]
RewriteCond %{HTTP_REFERER} !bing\.com [NC]
# În rest, servește o imagine placeholder
RewriteRule \.(jpg|jpeg|png|gif|webp)$ /images/no-hotlink.png [L,NC]

Nginx

location ~* \.(jpg|jpeg|png|gif|webp)$ {
  valid_referers none blocked server_names *.siteul-tau.ro *.google.* *.bing.com;
  if ($invalid_referer) {
    rewrite ^/ /images/no-hotlink.png last;
  }
}

7) Antiframe & CSP (securitate suplimentară)

Împiedică includerea site-ului tău în iframe-uri (clickjacking) și aplică o politică CSP simplă.

# Nginx
add_header X-Frame-Options "DENY" always;
add_header Content-Security-Policy "frame-ancestors 'none'; upgrade-insecure-requests" always;

😎 Aspecte legale & bune practici

• Adaugă în footer: © [An] [Brand] — Toate drepturile rezervate.
• Publică o pagină „Copyright & DMCA” cu adresa ta de contact.
• Activează Google Alerts/Copyscape pentru a detecta copii.
• La nevoie, trimite notificări de înlăturare (DMCA) către hostingul copierului.

9) Checklist de testare & revert

• Testează în Chrome/Firefox/Edge (desktop + mobil).
• Verifică PageSpeed/Lighthouse: scorurile nu ar trebui să scadă.
• Asigură-te că formularul/inputs permit selectare (sunt exceptate).
• Dacă vrei să revii: șterge blocurile CSS/JS adăugate.

10) FAQ scurt

Îmi va afecta SEO?
Nu. Metodele de mai sus sunt SEO-safe: conținutul rămâne în HTML, indexabil de Google și Bing.

Poate cineva totuși să copieze?
Un utilizator avansat poate ocoli restricțiile. De aceea combinăm „deterrent” + atribuire + watermark + protecție server.

Ce recomandare minimă?
1) Anti-copiere „deterrent”, 2) Atribuire automată, 3) Anti-hotlink imagini, 4) Pagină DMCA.

💡 Recomandare: dacă rulezi pe Apache/Nginx, implementează și anti-hotlink pentru a descuraja clonarea media. Pentru orice întrebare, lasă un comentariu mai jos și te ajut cu configurarea exactă pe domeniul tău.