CSS를 사용하여 사용자를 추적하는 방법을 가르쳐주세요.

우리가 할 수 있는 일

화면 해상도(브라우저가 최대화되었을 때), 사용자가 사용 중인 브라우저(엔진) 등 사용자에 대한 몇 가지 기본 정보를 수집할 수 있습니다

또한 사용자를 모니터링할 수 있습니다. 링크를 클릭하거나 마우스를 요소 위로 가져가는 경우 사용자가 마우스를 가져가는 링크를 추적하는 데 사용할 수 있으며 사용자가 마우스를 움직이는 방법도 추적할 수 있습니다(페이지의 보이지 않는 필드 사용). 그러나 현재 방법을 사용합니다. 내 방법을 수정하면 결국 사용자의 모든 클릭을 추적할 수 있다고 믿습니다

마지막으로 이 정보를 기반으로 사용자가 특수 글꼴을 설치했는지 여부도 모니터링할 수 있습니다. Windows의 Calibri와 같이 서로 다른 운영 체제에서 사용하는 글꼴도 약간 다르기 때문에 사용자가 사용하는 글꼴을 추적할 수 있습니다. ) 속성은 이미지를 추가하기 위한 외부 리소스를 참조합니다. 흥미롭게도 이 리소스는 필요할 때만 로드됩니다(예: 링크를 클릭할 때).

따라서 사용자가 링크를 클릭할 때 CSS를 사용하여 선택기를 만들 수 있습니다. 특정 UPL

#link2:active::after {
  content: url('track.php?action=link2_clicked');
}

서버를 호출하면 URL

브라우저 모니터링

브라우저 모니터링은 @supports Media-Query를 기반으로 하며 브라우저 속성의 일부 특수 기능을 모니터링할 수 있습니다. -webkit-appearance

@supports (-webkit-appearance: none) {
  #chrome_detect::after {
    content: url('track.php?action=browser_chrome');
  }
}

글꼴 모니터링

글꼴 모니터링을 위해서는 새 글꼴을 정의해야 합니다. 글꼴이 있으면 텍스트는 해당 글꼴을 사용하여 스타일링을 시도합니다. 그러나 사용자가 시스템에서 찾을 수 없는 경우입니다. 글꼴에 도달하면 정의된 글꼴이 백업으로 사용됩니다. 이 경우 브라우저는 정의된 글꼴을 로드하고 서버에서 추적 스크립트를 호출하려고 시도합니다.

/** Font detection **/
@font-face {
  font-family: Font1;
  src: url('track.php?action=font1');
}
 
#font_detection1 {
  font-family: Calibri, Font1;
}

호버 모니터링

호버 모니터링을 위해(기반) jeyroik 아이디어), 키프레임을 정의해야 하고 이 키프레임을 사용할 때마다 URL을 요청해야 합니다

@keyframes pulsate {
  0% {
    background-image: url('track.php?duration=00');
  }
  20% {
    background-image: url('track.php?duration=20');
  }
  40% {
    background-image: url('track.php?duration=40');
  }
  60% {
    background-image: url('track.php?duration=60');
  }
  80% {
    background-image: url('track.php?duration=80');
  }
  100% {
    background-image: url('track.php?duration=100');
  }
}

그런 다음 정의된 키프레임을 사용하여 애니메이션을 만들고 애니메이션의 지속 시간을 정의할 수 있습니다. 또한 우리가 측정한 최대값은 Time

#duration:hover::after {
  -moz-animation: pulsate 5s infinite;
  -webkit-animation: pulsate 5s infinite;
  /*animation: pulsate 5s infinite;*/
  animation-name: pulsate;
  animation-duration: 10s;
  content: url('track.php?duration=-1');
}

키프레임 설정을 보완하여 해상도 모니터링을 최적화할 수 있습니다

입력 모니터링

사용자가 특정 확인란을 선택하는지 모니터링하고 CSS에서 제공하는 :selected 선택기를 사용할 수 있습니다

#checkbox:checked {
  content: url('track.php?action=checkbox');
}

In 문자열을 모니터링하기 위해 이를 HTML 패턴 속성과 결합하여 몇 가지 기본 입력 유효성 검사를 해결하는 데 도움을 주고, :valid 선택기와 결합하여 입력이 성공적으로 일치하면 브라우저가 추적 사이트를 요청합니다

<input type="text" id="text_input" pattern="^test$" required=""/>
#text_input:valid {
  background: green;
  background-image: url(&#39;track.php?action=text_input&#39;);
}

있는 경우 속성 콘텐츠 뒤에 아무것도 표시되지 않거나 PHP 경고가 표시됩니다. 이는 이 속성의 값이 false이거나 사용자가 페이지나 링크를 방문하지 않았음을 의미합니다(정말 짜증나지만 이러한 방법의 원리를 알 수 있습니다)

In 또한 현재 가장 일반적으로 사용되는 화면 너비만 모니터링할 수 있으므로 해상도 모니터링은 특히 정확하지 않습니다. 마지막으로, 사용자의 실제 화면 너비를 모니터링하는 것은 생각만큼 간단하지 않다는 점을 말씀드리고 싶습니다. CSS로 모니터링하는 높이는 브라우저 창의 높이이고 일반적으로 시스템 패널/작업 표시줄로 인해 브라우저 창은 화면 너비보다 작기 때문입니다. 모니터

위 방법으로 추적을 방지할 수 있는 방법이 있나요

지금까지 제가 아는 유일한 방법은 CSS를 완전히 비활성화하는 것뿐입니다(이를 달성하려면 uMatrix와 같은 플러그인을 사용할 수 있습니다). 하지만 비용도 매우 엄청납니다. , CSS가 없으면 웹 페이지는 더 이상 예전만큼 보기에 좋지 않거나 심지어 사용할 수 없게 되므로 개인 정보 보호에 대해 정말로 걱정하지 않는 한(예를 들어, Tor 브라우저를 사용하는 경우 CSS를 비활성화해야 할 수도 있습니다. )

더 나은 해결책은 웹 페이지가 로드될 때 브라우저가 필요한 외부 리소스를 로드하지 않는다는 것입니다. 이러한 방식으로 사용자의 개인 행동을 모니터링하는 것은 불가능합니다. 의 콘텐츠 로딩은 브라우저를 통해 수행할 수 있으며 플러그인을 통해서도 구현할 수 있습니다(NoScript 또는 uMatrix와 유사)

위 방법에도 명백한 문제가 있습니다. 즉, 성능에 특정 영향을 미친다는 것입니다. , 페이지를 초기화할 때 브라우저가 많은 양의 콘텐츠를 로드하기 때문입니다(일부 콘텐츠는 페이지에 전혀 필요하지 않습니다)

위 내용은 CSS를 사용하여 사용자를 추적하는 방법을 가르쳐주세요.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!