J'ai trouvé un site Web intéressant qui désactive la copie du contenu des pages Web en utilisant une technique mystérieuse.
Premièrement, il désactive le clic droit de la souris. Cela peut être surmonté en désactivant javascript du navigateur.
Cependant, même après avoir désactivé javascript, le contenu de la page Web n'est toujours pas sélectionnable. J'ai regardé dans le CSS de la page Web mais je n'ai pas trouvé d'indice.
Comment implémente-t-il la fonctionnalité de désactivation de la copie de contenu?
4 Réponses :
Il existe une propriété en CSS appelée user-select que vous pouvez utiliser pour empêcher les utilisateurs de mettre en évidence le texte.
Habituellement, il est utilisé pour les boutons ou les objets avec lesquels vous souhaitez interagir (comme cliquer et faire glisser).
Il existe également une méthode d'interface utilisateur jQuery disableSelection qui fera une chose similaire, et vous pouvez voir son utilisation dans l'API de l'interface utilisateur
Remarque: disableSelection est désormais obsolète car user-select est disponible
Vous pouvez voir que le site Web que vous avez lié a la propriété CSS sur la balise html , ce qui l'empêche à l'échelle du site
J'ai parcouru leur code et ils ont plusieurs couches supplémentaires pour empêcher la sélection des utilisateurs, principalement dans le Javascript. Voir le violon ci-dessous pour quelques exemples de la façon dont ils bloquent la sélection. Il peut y avoir plus de méthodes utilisées, mais il faudrait un certain temps pour toutes les déchiffrer; Le moyen le plus simple de les contourner est d'installer un addon dans votre navigateur qui désactivera l'exécution de tous les scripts, puis désactivez simplement le CSS qui vous bloque et vous l'avez. Ou prenez simplement la solution de facilité et copiez le code HTML directement à partir de la fenêtre d'inspection des éléments. Comme d'autres l'ont dit dans les commentaires, il existe plusieurs façons de les contourner vous empêchant d'ouvrir les outils de développement tels que Ctrl + Maj + I ou d'utiliser le menu du navigateur.
Cependant, si vous connaissez un peu la programmation, cela ne vous arrêtera pas. Vous pouvez facilement appuyer sur F12 , aller aux éléments et toujours copier ce que vous voulez. Mais bonne approche, je ne le savais pas, merci!
Malheureusement, @mindmaster, le site Web désactive également le clic droit et la pression sur F12, j'ai donc dû charger un site différent, ouvrir la console du développeur, puis accéder au site. Le site vraiment ne veut pas que vous copiiez des éléments
lol, tu as raison! putain de merde, ce sont des trucs précédents que vous ne pouvez pas copier ... eh bien, je me suis totalement trompé! F12 ne fonctionne pas du tout
@MickelsonMichael vous pouvez toujours l'ouvrir via le menu de votre navigateur, F12 n'est qu'un raccourci. Ils ont également répété le user-select: none; partout dans la hiérarchie: D mais j'ai réussi à copier en supprimant les règles et en désactivant JS aussi
@Kaddath a raison! vous pouvez y accéder en faisant CTRL + SHIFT + i
Il semble que nous ayons trouvé collectivement un tas de moyens très simples de déjouer ses plans. Mais je suppose que cela arrête les "criminels" paresseux? Personne ne volera les avis de Johnn sans au moins un petit effort
Les scrappers de sites n'utilisent pas de navigateur Web GUI ... De telles limitations ne feront que faire du mal à vos utilisateurs honnêtes, ceux contre lesquels vous essayez de vous protéger ne le remarqueront jamais ...
Vous ne pouvez pas arrêter le cheval de fer appelé "outils de développement"
non. Le "user-select: none! Important;" est barré dans mon Firefox et ne devrait pas avoir d'effet sur le texte. Que signifie le "! Important"?
@William la balise ! Important est un outil CSS pour aider à contourner les règles de spécificité CSS. Consultez cet article MDN pour plus d'informations. Essentiellement, les propriétés marquées ! Important écraseront les autres propriétés correspondantes sur un élément, indépendamment de leur spécificité ou de leur ordre de chargement (à moins que ces propriétés également aient un code ! Important )
La page utilise le css suivant, contenu dans un élément dans le :
html {
-webkit-touch-callout:none;
-webkit-user-select:none;
-khtml-user-select:none;
-moz-user-select:none;
-ms-user-select:none;
user-select:none;
-webkit-tap-highlight-color:rgba(0,0,0,0)
}
Lorsque je désactive javascript, recharge la page Web, clique avec le bouton droit sur du texte, clique sur "Inspecter l'élément", je trouve que "user-select: none" est barré d'un point d'interrogation jaune indiquant "nom de propriété invalide". Cela signifie que la propriété de sélection par l'utilisateur ne s'applique pas au texte. Je n'ai trouvé aucune autre propriété que vous avez mentionnée qui s'applique à cet élément. BTW, "sélection par l'utilisateur: aucun! Important;" , que signifie «! important»?
@William, pouvez-vous me dire quel élément vous regardez spécifiquement et quelle version de Firefox vous utilisez?
@MickelsonMichael, par exemple, lorsque vous cliquez avec le bouton droit sur le texte "Afficher les messages dans" et inspectez l'élément, dans la vue des règles, vous trouverez que la sélection utilisateur effective est dans le corps, div, p, span {curseur: hériter ; sélection par l'utilisateur: aucun! important; }. Si vous désélectionnez la ligne de sélection par l'utilisateur, vous ne pouvez toujours pas sélectionner de texte. La sélection utilisateur déclarée dans le style de l'élément
n'apparaît pas dans la vue des règles. Je viens de mettre à niveau mon firefox vers 69.0 et l'avertissement "nom de propriété invalide" disparaît maintenant.
@William consultez la mise à jour de ma réponse pour plus d'informations. Ils utilisent une multitude de méthodes pour empêcher la sélection de l'utilisateur, y compris la propriété CSS user-select . Voir ce violon pour quelques exemples
Merci, @ MickelsonMichael. Bien que je puisse copier le HTML directement à partir de la fenêtre d'inspection des éléments, il n'est pas facile de sélectionner avec précision ce que je veux copier. Je souhaite accéder à la vue des règles, désactiver la ligne "utiliser-sélectionner", puis sélectionner le texte directement sur la page Web. Je me demande pourquoi après avoir désactivé la ligne "utiliser-sélectionner", je ne peux toujours pas sélectionner le texte.
Pour désactiver la sélection de texte en HTML, nous devons donner à la propriété sélectionnée par l'utilisateur une valeur nulle.
Vous pouvez ajouter la ligne suivante dans votre CSS
body{
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}