Question Comment les sites Web bloquent-ils la sélection du texte et comment le débloquer?


Il y a un site web (Exemple) qui bloque en quelque sorte la sélection du texte. Aussi ça bloque Ctrl+UNE pour tout sélectionner, il n'y a pas non plus de "Copie" dans le menu contextuel.

Ce que j'ai essayé:

Certains sites utilisent JavaScript pour bloquer la sélection. J'ai donc désactivé toutes les sources JavaScript dans addon no-script dans Firefox. J'ai essayé le même site dans Google Chrome avec l'addon Script Safe. Assurez-vous que tout est bloqué, ne peut toujours pas sélectionner le texte. Mousepointer reste une flèche et non un curseur de texte sur tout le site.

Utilisé about:config désactiver complètement JavaScript dans Firefox. Toujours pas d'effet.

J'ai lu que certains sites utilisent DIVs avec l'affichage de style: block, j'ai donc utilisé Inspect pour examiner les styles du site. Il n’ya pas une seule mention de "bloc" sur l’ensemble du site, pas en CSS incorporé ni en style d’objet = -attributs.

Le texte n'est pas une image ou un flash ou une toile HTML5. Tout est dans les balises DIV et P mais aucun style n'a été trouvé qui pourrait bloquer la sélection du texte.

Comment le site Web peut-il toujours bloquer toute sélection de texte? Sans compter que les navigateurs prennent en charge de tels comportements. Je veux juste utiliser un mot ou une phrase sélectionnée et je veux rechercher Google pour cela en cliquant avec le bouton droit de la souris. C'est assez ennuyant quand un site Web fait de telles choses et me force à taper manuellement des termes techniques et des noms dans Google. Cela perturbe mon flux de travail.


69
2018-01-05 09:30


origine


"Comment les sites bloquent-ils le marquage du texte" - Ils ont mis style.userSelect à none.
@ Xen2050 La plupart du temps, je ne me soucie pas de copier du texte. J'adore la possibilité de marquer des phrases et des termes et de la rechercher sur Google d'un simple clic de la souris (double-cliquez sur un mot, cliquez avec le bouton droit sur "Rechercher Google ..."). Je pourrais aller dans la source (si c’est du code source) et rechercher le mot, le copier, coller dans Google mais bien… comme cela a été dit. Quelqu'un qui veut copier le texte de votre site Web peut le faire de toute façon, mais une personne qui veut simplement un flux de travail confortable est entravée. - bxyify
Pouvons-nous prendre un moment pour compatir avec tous les développeurs Web délirants qui pensent que cette mesure de sécurité est bonne? - MCMastery
Je ne sais plus à quel point la pratique est répandue, mais je me souviens d'avoir parcouru quelques exemples d'une image d'un seul pixel étirée pour couvrir toute la page afin d'empêcher la copie de texte, etc. des étoiles de licorne avec du texte clignotant partout ... - RIanGillis
@MCMastery Ou pire, les développeurs qui savent que c'est terrible, mais on leur dit de le faire quand même. La plupart du temps, ils s'inquiètent du vol de contenu. Ensuite, vous avez des sites comme SO qui sont volés / volés tout le temps ... mais commercialement viables. Il s'avère que l'aliénation de votre base d'utilisateurs est mauvaise pour les affaires. Qui aurait pensé?! - corsiKa


Réponses:


https://www.angst-panik-hilfe.de/angst-panik.css montre:

body{-webkit-user-select:none;-moz-user-select:-moz-none;
-ms-user-select:none;user-select:none}

Cet effet s’applique donc à l’ensemble du tag BODY.

Documentation sur ce CSS: Site développeur Mozilla: sélection de l'utilisateur.

Vous pouvez probablement remplacer cela en supprimant le style dans Developer Tools (appuyez sur F12 dans Firefox ou Chrome) - vous pouvez même créer une applet JavaScript qui, après avoir investi du temps pour le configurer, peut supprimer ce style avec un effort moins instantané de votre part (ce qui peut vous faire gagner du temps si vous prévoyez de visiter le site plusieurs fois).

Je voudrais également ajouter cette note: cela pourrait ne pas être la seule façon d’avoir au moins une partie de cet effet. Une autre manière possible pourrait être d'avoir un invisible DIV couvrir le DIV qui a le texte. De cette façon, le curseur de la souris ne se transformerait pas en I-beam (curseur de texte) car le curseur serait basé sur le contenu DIV. (Ctrl-UNE couvrirait probablement ce texte, cependant.)

C'est assez ennuyant quand un site Web fait de telles choses et me force à taper manuellement des termes techniques et des noms dans Google. Cela perturbe mon flux de travail.

Amen! En voyant cela, je suis déçu de l'existence d'un tel style CSS mis en œuvre par les principaux navigateurs. De telles choses sont assez ennuyeuses, en effet!


78
2018-01-05 10:00



le user-select Le style CSS est très utile lorsqu'il est appliqué de manière responsable. Par exemple, si vous souhaitez que les utilisateurs (en particulier les plus anciens) sur un écran tactile cliquent sur des boutons à proximité du texte de l'étiquette, vous ne souhaitez pas qu'ils marquent le texte de l'étiquette au lieu de cliquer sur le bouton. - phihag
Que voulez-vous dire par défaut? Ce paramètre est uniquement activé si le site Web l’autorise spécifiquement, ce qui ne ressemble pas à "par défaut" pour moi. Il y aura toujours des fonctionnalités qui peuvent être mal utilisées par les mauvais concepteurs Web, vous ne pouvez pas faire grand chose pour empêcher cela sans affecter négativement ceux qui ont une raison légitime d'utiliser ces fonctionnalités ... - Sean Burton
@SeanT Encore une fois, si le navigateur existe pour servir la personne qui consulte les pages Web, son travail consiste à répondre à ce que le serveur Web envoie à l'utilisateur. Si l'utilisateur lui demande de désactiver la page ou d'interdire les fenêtres contextuelles ou de copier du texte, le navigateur doit le faire. - Acccumulation
Aucun utilisateur du navigateur ne se donne la peine de configurer son navigateur pour activer explicitement une fonctionnalité comme celle-ci, s'il n'est pas activé par défaut, il est essentiellement inutile et pourrait ne pas être implémenté du tout. Et si vous suggérez que chaque fonctionnalité doit être explicitement activée par l'utilisateur, alors où tracez-vous la ligne? L'utilisateur doit-il activer la fonctionnalité "images" avant qu'un site Web puisse afficher des images? Tous les navigateurs doivent-ils être Lynx par défaut jusqu'à ce que l'utilisateur active toutes les fonctionnalités qu'ils souhaitent? - Sean Burton
@Acccumulation La fonctionnalité de sélection par l'utilisateur: none est utilisée partout pour conserver le style d'une page Web, par exemple en arrêtant un fond bleu laid lors de la sélection d'une option dans les listes déroulantes. Vous ne remarquez simplement pas parce que c'est implémenté correctement. Le problème est qu’il a été mis en œuvre de manière restrictive pour l’utilisateur, et qu’un navigateur n’a aucun moyen de différencier les deux. Par conséquent, blâmer les devs :) - Sean T


Ouvrez les outils de développement (F12), accédez à l’onglet Éléments et décochez les règles CSS suivantes sous corps:

  • sélection par l'utilisateur: aucun;
  • webkit-user-select: aucun;

Demo Image


10
2018-01-05 16:44





Comme cela a déjà été dit, réglage user-select: none dans la page CSS, c'est ce qui désactive la sélection de texte sur une page. La méthode la plus simple pour supprimer ce bloc de sélection de texte consiste à utiliser un script utilisateur comme celui-ci qui remplace le paramètre:

// ==UserScript==
// @name         Force Select
// @version      1.0
// @description  Stop sites from disabling selection of text
// @author       You
// @match        *://*/*
// @grant        none
// ==/UserScript==

(function() {
  'use strict';

  let style = document.createElement('style');
  style.innerHTML = '*{ user-select: auto !important; }';

  document.body.appendChild(style);
})();

Remarque: Cela s'appliquera à chaque page si elle reste activée, ce qui peut ne pas être souhaitable dans toutes les situations.

Le script peut être installé et facilement activé / désactivé avec un gestionnaire de script utilisateur tel que Violentmonkey, Tampermonkey, ou Mécano.


9
2018-01-05 16:32



Il convient de mentionner que vous pourriez avoir besoin d'une extension telle que «greasemonkey» pour ajouter des scripts utilisateur. - Stilez
This will apply to every page if left enabled, which might not be desirable in all situations. Ne pouvez-vous pas simplement imbriquer la fonction dans une instruction if qui exécute le script uniquement si l'URL correspond à un site ou à un tableau de sites particulier? - Hashim
@Hashim Ce n'est pas nécessaire vous pouvez spécifier les pages auxquelles il s'applique avec un ou plusieurs @match déclarations, mais cela nécessiterait de modifier le script lorsque vous souhaitiez qu’il s’applique à une page spécifique, à moins que vous ne visitiez qu’un site ou un ensemble de sites spécifique que vous souhaitez toujours modifier. Pour l'exemple de script je l'ai fait générique en utilisant *://*/* comme l'URL à faire correspondre, il s'appliquera donc partout. Il peut être activé ou désactivé dans le menu du gestionnaire de scripts utilisateur. - Herohtar


Avec Firefox, il existe un moyen très simple:

View > Page Style > No Style

En allemand:

Ansich > Webseiten-Stil > Kein Stil

enter image description here

Cela fonctionne également très bien pour télécharger des images incorporées sur lesquelles le clic droit a été désactivé.


7
2018-01-08 09:04



Yeap, ça marche aussi sur IE11. - Marco Demaio


Vous pouvez frapper Ctrl + P et récupérez ce dont vous avez besoin dans l'aperçu avant impression.

enter image description here


1
2018-01-09 19:17





Je préfère utiliser "bookmarklets"aux scripts utilisateur ou aux extensions de navigateur. Essayez d'utiliser un du beaucoup de bookmarklets désactiver CSS et récupérer le texte requis

Comme cela peut gêner la lisibilité de la page Web, j'ouvre parfois la page dans un onglet différent (clic droit sur l'onglet, sélectionnez Duplicate) avant de supprimer le style avec le bookmarklet

Vous pouvez également essayer le Google Mobilizer Bookmarklet pour afficher uniquement le texte des pages Web


0
2018-01-06 13:19





Comme d’autres réponses l’ont dit, il s’agit du CSS sur le corps des pages. Alors que vous pouvez éditez ceci à la main chaque fois, si vous utilisez ce site beaucoup, je suggère que si vous utilisez Chrome, vous installez le Élégant extension.

Élégant vous permet de créer des CSS supplémentaires à appliquer aux pages. Il peut être utilisé sur tout le Web. Il présente l'avantage de s'appliquer automatiquement chaque fois que vous visitez le site Web (vous n'avez donc pas besoin de l'ajouter via les outils de développement sur chaque chargement de page).

Une fois installé, cliquez sur l'icône dans la barre d'outils et sélectionnez "Créer un nouveau style". Il créera automatiquement l'entrée pour le site Web que vous visitez actuellement. Vous pouvez ensuite ajouter n'importe quel CSS que vous aimez à la page. Mais soyez averti: certains styles peuvent ne pas être surchargeables (en particulier si c'est écrit sur l'élément lui-même, plutôt que sur une classe CSS).

Dans ce cas, vous pouvez utiliser la fonction d'importation et ajouter le code ci-dessous, cela devrait vous permettre de sélectionner le texte sur le site Web auquel vous êtes lié.

@-moz-document domain("www.angst-panik-hilfe.de") {
  body {
    -webkit-user-select: auto !important;
    -moz-user-select: inherit  !important;
    -ms-user-select: inherit  !important;
    user-select: auto  !important;
  }
}

0
2018-01-08 09:56



L'ajout de préfixes webkit et ms pour quelque chose qui ne fonctionnera que sur Firefox est un peu ... redondant. - Stephan Bijzitter
@StephanBijzitter Vrai, j'ai juste écrasé tous les styles relatifs à la sélection des utilisateurs déjà présents sur la page. Mais encore une fois, cela signifie que quelqu'un qui n'utilise pas chrome mais avec une extension similaire pourrait facilement copier cette classe et obtenir les mêmes avantages sans travailler - et cela ne nuit pas vraiment à la solution. - Obsidian Phoenix


Plusieurs des solutions proposées pourraient être spécifiques à un navigateur, il convient donc de proposer quelques alternatives:

  1. Utilisez un broswer qui vous respecte davantage.

    une. Emacs a des navigateurs emacs-w3m et eww cela permettra toujours de sélectionner du texte.

    b. D'autres navigateurs textuels tels que lynx, elinks, et w3m, peut permettre de sélectionner du texte, mais même si ce n'est pas le cas, si vous exécutez ces programmes dans une fenêtre de terminal, vous pouvez sélectionner du texte à l'aide de la souris. Et, si on utilise ces programmes de l'intérieur tmux, on peut utiliser tmuxla possibilité de copier du texte même sans souris.

  2. Utilisez un outil de ligne de commande pour télécharger l'intégralité de l'URL au format texte lisible.

    une. w3m -dump [your_url] > your_file.txt

    b. lynx -dump [your_url] > your_file.txt. Je préfère généralement celui-ci car il marque les hyperliens comme des notes de bas de page lisibles!


0
2018-01-11 23:44