웹 사이트는 텍스트 선택을 어떻게 차단하며 어떻게 차단을 해제합니까?

74

어떻게 든 텍스트 선택을 차단 하는 웹 사이트 ( 예 )가 있습니다. 또한 Ctrl+ A를 차단 하여 모든 것을 선택하고 팝업 메뉴에 "복사"도 없습니다.

내가 시도한 것 :

일부 사이트는 JavaScript를 사용하여 선택을 차단합니다. 그래서 Firefox에서 no-script addon의 모든 JavaScript 소스를 비활성화했습니다. Script Safe 애드온으로 Chrome에서 동일한 사이트를 사용해 보았습니다. 모든 내용이 차단되어 여전히 텍스트를 선택할 수 없는지 확인하십시오. 마우스 포인터는 전체 사이트에서도 텍스트 커서가 아닌 화살표로 유지됩니다.

about:configFirefox에서 JavaScript를 완전히 비활성화하는 데 사용 됩니다. 여전히 효과가 없습니다.

일부 사이트는 style display : block과 함께 DIV를 사용하므로 사이트의 스타일을 검사하기 위해 Inspect를 사용했습니다. 웹 사이트 전체에 "block"에 대한 언급이 없으며, 내장 CSS 나 object style = -attributes에는 없습니다.

텍스트는 이미지 나 플래시 또는 HTML5 캔버스가 아닙니다. 모든 것이 DIV 및 P 태그 내에 있지만 텍스트 선택을 차단할 수있는 스타일이 없습니다.

웹 사이트에서 텍스트 선택을 어떻게 차단할 수 있습니까? 브라우저가 이러한 동작을 전혀 지원하지 않는 이유는 말할 것도 없습니다. 선택한 단어 나 문장을 사용하고 마우스 오른쪽 버튼을 클릭하여 Google에서 검색하고 싶습니다. 웹 사이트가 그러한 일을하고 기술 용어와 이름을 Google에 직접 입력하도록 강요하면 꽤 짜증납니다. 작업 흐름을 방해합니다.

— 사용자
소스

8

"웹 사이트에서 텍스트 표시를 어떻게 차단합니까?" -로 설정 style.userSelect되었습니다 none.

2

@ Xen2050 주로 텍스트 복사에 신경 쓰지 않습니다. 마우스 클릭만으로 문구와 용어를 표시하고 Google에서 검색하는 기능이 마음에 듭니다 (더블 클릭 단어, "Google 검색 ..."을 마우스 오른쪽 버튼으로 클릭). 나는 소스로 가서 (깨끗한 소스라면) 단어를 스캔하고, 복사하고, Google에 붙여 넣습니다. 그러나 이것은 성가신 일입니다. 귀하의 웹 사이트 텍스트를 복사하려는 Some1은 어쨌든 그것을 할 수 있지만 편안한 워크 플로우를 원하는 누군가는 방해를받습니다.

— user6329530

122

이것이 좋은 보안 조치라고 생각하는 모든 망상 웹 개발자들에게 잠시 시간을내어 동정 할 수 있습니까?

— MCMastery

3

나는 더 이상 그 실습이 얼마나 널리 퍼져 있는지 알지 못하지만 텍스트 복사 등을 방지하기 위해 전체 페이지를 덮기 위해 단일 픽셀 이미지의 몇 인스턴스를 실행하는 것을 기억합니다. 모든 곳에서 텍스트를 깜박이와 함께 유니콘 - 별 ...

— RIanGillis

27

@MCMastery 또는 더 나쁜 것은, 그것을 알고 있지만 어쨌든 그것을해야한다고 말하는 개발자. 대부분의 경우 사람들은 콘텐츠를 훔치는 사람들이 걱정됩니다. 그렇다면 항상 긁히거나 도난당하는 SO와 같은 사이트가 있지만 상업적으로 실행 가능합니다. 사용자층을 소외시키는 것은 사업에 좋지 않습니다. 누가 이런일이 일어날 거라고 생각 했 겠어?!

— corsiKa

81

https://www.angst-panik-hilfe.de/angst-panik.css 는 다음을 보여줍니다.

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

따라서이 효과는 BODY 태그 전체에 적용됩니다.

이 CSS에 대한 문서 : Mozilla 개발자 사이트 : user-select .

개발자 도구에서 스타일을 제거하여이 스타일을 무시할 수 있습니다 ( F12Firefox 또는 Chrome에서 누르기 ). 설정 시간을 투자 한 후 즉각적인 노력으로 해당 스타일을 제거 할 수있는 JavaScript 애플릿을 만들 수도 있습니다. 귀하의 일부 (사이트를 여러 번 방문하려는 경우 시간을 절약 할 수 있음).

나는 또한이 메모를 추가하고 싶습니다 : 이것은 적어도 그 영향을 미치는 유일한 방법은 아닙니다. 또 다른 가능한 방법은 텍스트 가있는 보이지 않는 DIV표지를 포함하는 것 DIV입니다. 이렇게하면 커서가 최상위의 내용을 기반으로하기 때문에 마우스 커서가 I- 빔 (텍스트 커서)으로 바뀌지 않습니다 DIV. ( Ctrl- A하지만 아마도 그 텍스트를 다룰 것입니다.)

웹 사이트가 그러한 일을하고 기술 용어와 이름을 Google에 직접 입력하도록 강요하면 꽤 짜증납니다. 작업 흐름을 방해합니다.

아멘! 이것을 보았을 때, 나는 주요 브라우저에 의해 구현되는 CSS 스타일의 존재에 실망했습니다. 그런 일은 정말 성가시다!

— 투암
소스

61

user-select책임감을 적용 할 때 CSS 스타일은 꽤 도움이된다. 예를 들어, 레이블 텍스트 근처의 버튼을 클릭하는 터치 스크린 사용자 (특히 나이가 많은 사용자)가 버튼을 클릭하는 대신 레이블 텍스트를 표시하지 않도록 할 수 있습니다.

— phihag

14

"기본적으로"는 무엇을 의미합니까? 이 설정은 웹 사이트에서 웹 사이트를 특별히 활성화 한 경우에만 활성화되며 "기본적으로"들리지 않습니다. 나쁜 웹 디자이너가 잘못 사용할 수있는 기능이 항상있을 것입니다. 이러한 기능을 사용해야하는 합법적 인 이유가있는 사용자에게 부정적인 영향을 미치지 않으면 서이를 막기 위해 할 수있는 일은 많지 않습니다.

— Sean Burton

11

@SeanT 다시 한번, 웹 페이지를보고있는 사람에게 서비스를 제공하기 위해 브라우저가 존재한다면, 그 역할은 웹 서버가 보내는 것에 응답하지만 사용자가 그에게 알려주는 것입니다. 사용자가 페이지를 음소거하거나 팝업을 허용하지 않거나 텍스트를 복사하도록 지시하면 브라우저가 그렇게해야합니다.

— 누적

8

어떤 브라우저 사용자도 이와 같은 기능을 명시 적으로 활성화하기 위해 브라우저를 구성하는 데 신경 쓰지 않을 것입니다. 기본적으로 활성화되어 있지 않으면 본질적으로 쓸모가 없으며 전혀 구현되지 않을 수도 있습니다. 그리고 사용자가 모든 기능을 명시 적으로 활성화해야한다고 제안하는 경우 선을 어디에서 그릴 수 있습니까? 웹 사이트에서 이미지를 표시하려면 사용자가 "이미지"기능을 활성화해야합니까? 사용자가 원하는 모든 기능을 활성화 할 때까지 기본적으로 모든 브라우저가 Lynx 여야합니까?

— Sean Burton

13

@Acccumulation 사용자 선택 : 없음 기능은 웹 페이지의 스타일을 유지하기 위해 모든 곳에서 사용됩니다 (예 : 드롭 다운 목록에서 옵션을 선택할 때 못생긴 파란색 배경 중지). 올바르게 구현되었으므로 알 수 없습니다. 여기서 문제는 사용자에게 제한적으로 구현되었으며 브라우저가 두 가지를 구분할 방법이 없다는 것입니다. 따라서 개발자의 책임 :)

— Sean T

11

이미 언급했듯이 user-select: none페이지의 CSS에서 설정 하면 페이지에서 텍스트를 선택할 수 없습니다. 해당 텍스트 선택 블록을 제거하는 가장 쉬운 방법은 설정을 재정의하는 다음과 같은 사용자 스크립트를 사용하는 것입니다.

// ==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);
})();

참고 : 활성화 된 상태로 모든 페이지에 적용되므로 모든 상황에서 바람직하지 않을 수 있습니다.

스크립트는 같은 사용자 스크립트 관리자와 온 / 오프 전환을 쉽게 설치 할 수 있습니다 Violentmonkey , Tampermonkey , 또는 그리스 몽키 .

— 헤로 타
소스

9

사용자 스크립트를 추가하려면 'greasemonkey'와 같은 확장이 필요할 수 있습니다.

— Stilez

1

This will apply to every page if left enabled, which might not be desirable in all situations.URL이 특정 사이트 또는 사이트 배열과 일치하는 경우에만 스크립트를 실행하는 if 문에 함수를 중첩시킬 수 있습니까?

— Hashim

1

@Hashim 필요하지 않습니다. 하나 이상의 @match명령문으로 적용 할 페이지를 지정할 수 있지만 항상 수정하려는 특정 사이트 또는 사이트 세트 만 방문하지 않는 한 특정 페이지에 적용하려는 경우 스크립트를 수정해야합니다. 예제 스크립트의 경우 *://*/*일치하는 URL을 사용하여 일반으로 만들었 으므로 모든 곳에 적용됩니다. 사용자 스크립트 관리자의 메뉴에서 켜거나 끌 수 있습니다.

— Herohtar

10

개발자 도구 (F12)를 열고 요소 탭으로 변경 한 후 본문 에서 다음 CSS 규칙을 선택 해제하십시오 .

사용자 선택 : 없음;
웹킷 사용자 선택 : 없음;

— JMK
소스

7

Firefox에는 정말 쉬운 방법이 있습니다.

View > Page Style > No Style

독일어로:

Ansich > Webseiten-Stil > Kein Stil

마우스 오른쪽 버튼 클릭이 비활성화 된 내장 이미지를 다운로드하는 것도 좋습니다.

— 에릭 뒤미 닐
소스

1

네, IE11에서도 작동합니다.

— 마르코 데마 이오

4

Ctrl+를 P누르고 인쇄 미리보기에서 필요한 것을 얻을 수 있습니다 .

— 데르 호 슈타 플러
소스

3

Stylus ( https://add0n.com/stylus.html )를 사용하고 있으며 모든 웹 사이트에 적용 할 스타일을 만들었으므로 모든 것을 선택할 수 있습니다.

* {
  -webkit-user-select: auto !important;
  -moz-user-select: inherit  !important;
  -ms-user-select: inherit  !important;
  user-select: auto  !important;
}

별표는 스타일이 특정 CSS 요소 (예 :) <body>뿐만 아니라 모든 요소에 적용되도록하는 것입니다. 선택 차단이 버튼 텍스트에만 적용되는 경우가 발생하여 CSS를 만드는 <body>것이 도움이되지 않습니다.

외국어 웹 사이트에서 즉석 번역을 위해 선택을 사용합니다.

— 데 레이
소스

인라인 <body>태그 의 형식과 가시성을 수정했습니다 . 참조 superuser.com/help/formatting

— Arjan

0

사용자 스크립트 또는 브라우저 확장 프로그램에 " bookmarklets "를 사용하는 것이 좋습니다. 많은 북마크릿 중 하나 를 사용하여 CSS를 비활성화하고 필요한 텍스트를 가져옵니다.

웹 페이지의 가독성을 엉망으로 만들 수 있으므로 북마크를 사용하여 스타일을 제거하기 전에 때때로 다른 탭에서 페이지를 열면 (탭을 마우스 오른쪽 버튼으로 클릭하고 복제를 선택하십시오)

Google Mobilizer Bookmarklet을 사용하여 웹 페이지의 텍스트 만 볼 수도 있습니다.

— mvark
소스

0

다른 답변에서 언급했듯이 페이지 본문의 CSS와 관련이 있습니다. 매번 수동으로 편집 할 수 있지만 이 사이트를 많이 사용하는 경우 Chrome을 사용하는 경우 Stylish 확장 프로그램 을 설치하는 것이 좋습니다 .

Stylish를 사용하면 페이지에 적용 할 추가 CSS를 만들 수 있습니다. 웹 전체에서 사용할 수 있습니다. 웹 사이트를 방문 할 때마다 자동으로 적용되는 이점이 있으므로 페이지를로드 할 때마다 개발 도구를 통해 추가 할 필요가 없습니다.

설치가 완료되면 툴바에서 아이콘을 클릭하고 "새 스타일 만들기"를 선택하십시오. 현재 방문중인 웹 사이트에 대한 항목이 자동으로 생성됩니다. 그런 다음 원하는 CSS를 페이지에 추가 할 수 있습니다. 그러나 일부 스타일은 무시할 수 없습니다 (특히 CSS 클래스가 아닌 요소 자체에 작성된 경우).

이 경우 가져 오기 기능을 사용하고 아래 코드를 추가하면 연결된 웹 사이트에서 텍스트를 선택할 수 있습니다.

@-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;
  }
}

— 흑요석 피닉스
소스

firefox에서만 실행될 웹킷 및 ms 접두사를 추가하는 것은 약간 중복됩니다.

— Stephan Bijzitter

@StephanBijzitter 사실, 나는 이미 페이지에서 사용자 선택과 관련된 모든 스타일을 덮어 썼습니다. 그러나 다시 말하지만 크롬을 사용하지 않지만 비슷한 확장명을 가진 사람은이 클래스를 상당히 쉽게 복사하고 작업하지 않고도 동일한 이점을 얻을 수 있으며 실제로 솔루션에 해를 끼치 지 않습니다.

— 흑요석 피닉스

0

제안 된 솔루션 중 일부는 브라우저마다 다를 수 있으므로 몇 가지 대안을 제안하는 것이 좋습니다.

당신을 더 존중하는 형제를 사용하십시오.

에이. Emacs에는 브라우저가 emacs-w3m있으며 eww항상 텍스트를 선택할 수 있습니다.

비. 다른 텍스트 기반과 같은 브라우저 lynx, elinks그리고는 w3m, 하나의 텍스트를 선택할 수 있습니다,하지만도하지 않을 경우 터미널 창에서 해당 프로그램을 실행하는 경우, 하나는 하나의 마우스를 사용하여 텍스트를 선택할 수 있습니다. 그리고에서 프로그램을 사용하는 경우 마우스 없이도 텍스트를 복사 tmux할 수 있습니다 tmux.
명령 줄 도구를 사용하여 읽을 수있는 텍스트 형식으로 전체 URL을 다운로드하십시오.

에이. w3m -dump [your_url] > your_file.txt

비. lynx -dump [your_url] > your_file.txt. 나는 보통 하이퍼 링크를 읽을 수있는 각주로 표시하기 때문에 이것을 선호합니다!

— 사용자 1404316
소스

0

AddOn "Absolute Enable Right Click & Copy"를 설치하면 다른 스크립트 없음 애드온이 할 수없는 모든 것을 사용할 수 있습니다.

— 크리스
소스

0

다음 CSS 스타일을 만드십시오 .

html, body {
    user-select: text;
}

Stylish 라는 확장 프로그램 을 사용하면 선택한 모든 웹 사이트에 해당 (또는 다른) CSS 코드를 설치할 수 있습니다. 위의 CSS 코드를 입력하고 적용하려는 웹 사이트를 알려주십시오. 이 확장 프로그램은 Chrome, Baidu, Firefox 및 Opera에서 작동합니다. IE에 있으면 운이 좋지 않습니다. 그러나 당신은 이미 당신을 알고 있습니다.

— Agcala
소스