[Site Web] Comment interdire et débloquer du texte sur les pages du navigateur

2023, semaine 37. Donnez-vous un objectif, puis insistez sur le fait qu'il y aura toujours un reçu, si vous ne me croyez pas, essayez-le !
Parfois, du point de vue du site Web, le contenu textuel de la page Web ne doit pas être copié, c'est pourquoi certaines restrictions sur la page Web du navigateur sont nécessaires, ce qui constitue une mesure de protection lors du développement de sites Web.
Parfois, j'espère pouvoir copier du texte de la page web, mais c'est interdit.
Cela nous amène à la relation entre la lance et le bouclier : tout a deux faces.

1. Avantages et inconvénients de l'interdiction

Interdire le texte du navigateur (pas de vérification ni de copie) est une protection dans le développement Web, mais elle est souvent controversée.

1. Cause d'interdiction

1.1. Prévention du piratage et de la contrefaçon

Certains sites Web ont un contenu unique, tel que des articles, des images, des fichiers audio ou vidéo, que l'on peut souhaiter protéger contre toute copie et distribution non autorisées. La suppression du texte du navigateur peut rendre plus difficile la reproduction de ce contenu.

1.2. Protection du droit d'auteur

Le blocage du texte du navigateur offre un certain degré de protection des droits d'auteur contre l'utilisation et la distribution non autorisées du contenu.

1.3. Sécurité du site Web

Parfois, le blocage du texte du navigateur peut réduire le risque de certains types d'attaques, comme empêcher les scripts malveillants ou la duplication de code.

2. Il y a des lacunes :

2.1. Expérience utilisateur

Le blocage du texte du navigateur peut affecter négativement les actions et les habitudes des utilisateurs. Les utilisateurs peuvent ne pas être en mesure de sélectionner et de copier le contenu qui les intéresse, ce qui peut entraîner confusion et désagréments.

2.2. Fonctions auxiliaires

La suppression du texte du navigateur peut enfreindre les normes d'accessibilité du Web, ce qui peut rendre difficile l'accès au site pour les utilisateurs malvoyants ou d'autres utilisateurs ayant des besoins particuliers.

2.3. Limites techniques

Bien que la désactivation du texte du navigateur empêche les utilisateurs occasionnels de copier du texte à partir du menu contextuel, les utilisateurs expérimentés peuvent toujours copier du texte par d'autres moyens, par exemple en utilisant des outils de développement ou en désactivant la feuille de style CSS d'un site.

En résumé, l’interdiction du texte du navigateur est une mesure qui met en balance la protection de la vie privée, la protection des droits d’auteur et la sécurité, mais elle pose également des défis en matière d’expérience utilisateur et d’accessibilité.
Avant de mettre en œuvre un texte sans navigateur, les développeurs doivent peser le pour et le contre et s'assurer qu'il est légal et conforme aux meilleures pratiques.

2. Interdire la sélection de texte

1. Réglage du style

La désactivation de la sélection et de la copie de texte sur un site Web est une mesure de protection courante des sites Web.

Si vous êtes un développeur de sites Web et que vous souhaitez désactiver la sélection et la copie de texte sur votre site Web, vous pouvez utiliser la propriété CSS user-select pour ce faire.
La définition de l'attribut user-select sur "aucun" désactive la sélection et la copie de texte.

• Voici un exemple de code CSS :

.unselectable {
    
    
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

Définissez ensuite le nom de classe de l'élément de texte dont vous souhaitez interdire la sélection et la copie sur "non sélectionnable".

• Par exemple:

<p class="unselectable">这个文本无法选中和复制。</p>

Veuillez noter que la désactivation de la sélection et de la copie de texte sur le site peut constituer un inconvénient pour l'expérience utilisateur et n'empêche pas complètement les utilisateurs avancés de copier du texte en utilisant d'autres méthodes.

2. Copiez avec le bouton droit de la souris

Si vous souhaitez empêcher l'option de copie d'apparaître dans le menu du bouton droit de la souris lorsque du texte est sélectionné sur un site Web, vous pouvez utiliser JavaScript pour le faire.

• Voici un exemple de code :

document.addEventListener('contextmenu', function(event) {
    
    
    if (event.target.closest('.unselectable')) {
    
    
        event.preventDefault();
    }
});

Dans le code ci-dessus, nous avons utilisé contextmenul'événement, qui est l'événement de menu du bouton droit de la souris. Lorsqu'un clic droit se produit, le code vérifie si l'élément cliqué contient .unselectablele nom de la classe.
Si ce nom de classe est inclus, event.preventDefault()cela empêchera le menu contextuel par défaut d'apparaître, supprimant ainsi l'affichage de l'option de copie.

Ensuite, ajoutez .unselectableun nom de classe à l'élément de texte dont vous souhaitez interdire la copie par clic droit :

<p class="unselectable">这个文本无法选中，也无法右键复制。</p>

Il convient de noter que l'interdiction de la copie par clic droit n'est qu'une restriction superficielle, qui ne peut empêcher les utilisateurs ordinaires de copier du texte via le menu contextuel, et que les utilisateurs avancés peuvent toujours copier du texte par d'autres moyens.
De plus, interdire la copie par clic droit peut entraîner des désagréments pour l’expérience utilisateur.

3. Levée du texte interdit

Si le texte ne peut pas être copié après avoir été sélectionné sur certains sites Web (le clic droit ne peut pas copier), il est probable que le développeur du site Web ait désactivé le menu contextuel via le code.
Il s'agit d'une mesure prise par les sites Web pour protéger leur contenu contre la copie ou le vol.

Dans ce cas, vous pouvez essayer ce qui suit pour contourner cette limitation :

1. Utilisez les touches de raccourci pour copier

Après avoir sélectionné le texte, vous pouvez utiliser les touches de raccourci pour copier, telles que « Ctrl+C » (pour Windows) ou « Commande+C » (pour Mac) pour copier le contenu sélectionné.

2. Utilisez les outils de développement du navigateur

Ouvrez les outils de développement du navigateur (appuyez généralement sur la touche « F12 »), puis passez à l'onglet « Éléments » ou « Éléments/Inspecteur ».
Recherchez l'élément HTML correspondant au-dessus du code de texte sélectionné, cliquez avec le bouton droit sur l'élément et sélectionnez « Modifier en HTML » ou « Modifier HTML » dans le menu contextuel contextuel.
Dans la zone d'édition qui apparaît, vous pouvez directement copier le texte sélectionné.

Il convient de noter que même si ces méthodes peuvent contourner les restrictions du site Web, nous devons respecter le contenu et les droits d'auteur du site Web.