Konfiguracja blokowania kopiowania

W tym zadaniu nauczysz się, jak zablokować kopiowanie, kliknięcie prawym przyciskiem myszy i użycie skrótów klawiszowych Ctrl+C oraz Ctrl+X na stronie.

                // Blokowanie zaznaczania tekstu
                document.addEventListener('selectstart', function (e) {
                    e.preventDefault();
                });
    
                // Blokowanie kliknięcia prawym przyciskiem myszy
                document.addEventListener('contextmenu', function (e) {
                    e.preventDefault();
                });
    
                // Blokowanie kombinacji klawiszy Ctrl+C i Ctrl+X
                document.addEventListener('keydown', function (e) {
                    if ((e.ctrlKey || e.metaKey) && (e.key === 'c' || e.key === 'x')) {
                        e.preventDefault();
                    }
                });
            

Metody implementacji zabezpieczeń

Oto dwie metody, jak zaimplementować blokowanie kopiowania na stronie:

1. Zewnętrzne pliki CSS i JavaScript

Tworzymy zewnętrzne pliki CSS i JavaScript, które załączamy do każdej strony.

Krok 1: Tworzenie pliku CSS (np. styles.css)

            /* Wyłączenie zaznaczania tekstu */
            .no-copy {
                user-select: none;
            }
    
            /* Stylizacja przykładowego kodu */
            pre {
                background-color: #333;
                color: #00ff00; /* Zielony kolor kodu */
                padding: 10px;
                border-radius: 5px;
            }
        

Krok 2: Tworzenie pliku JavaScript (np. disable-copy.js)

            // Blokowanie zaznaczania tekstu
            document.addEventListener('selectstart', function (e) {
                e.preventDefault();
            });
    
            // Blokowanie kliknięcia prawym przyciskiem myszy
            document.addEventListener('contextmenu', function (e) {
                e.preventDefault();
            });
    
            // Blokowanie kombinacji klawiszy Ctrl+C i Ctrl+X
            document.addEventListener('keydown', function (e) {
                if ((e.ctrlKey || e.metaKey) && (e.key === 'c' || e.key === 'x')) {
                    e.preventDefault();
                }
            });
        

Krok 3: Załączanie plików w nagłówku każdej strony HTML