Jump to content
Followers 0
GanGster

Protectie anti-copiere si protejarea continutului unui site web

Recommended Posts

GanGster    515

GanGster
Posted

 

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

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>

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;
  • 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.

Share this post

Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Followers 0
Go to topic listing
HAPPYHALLOWEEN PUBZONE

Theme Made by Zayon

×
×
  • Create New...