우리가 할 수 있는 일
화면 해상도(브라우저가 최대화되었을 때), 사용자가 사용 중인 브라우저(엔진) 등 사용자에 대한 몇 가지 기본 정보를 수집할 수 있습니다
또한 사용자를 모니터링할 수 있습니다. 링크를 클릭하거나 마우스를 요소 위로 가져가는 경우 사용자가 마우스를 가져가는 링크를 추적하는 데 사용할 수 있으며 사용자가 마우스를 움직이는 방법도 추적할 수 있습니다(페이지의 보이지 않는 필드 사용). 그러나 현재 방법을 사용합니다. 내 방법을 수정하면 결국 사용자의 모든 클릭을 추적할 수 있다고 믿습니다
마지막으로 이 정보를 기반으로 사용자가 특수 글꼴을 설치했는지 여부도 모니터링할 수 있습니다. 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('track.php?action=text_input'); }
있는 경우 속성 콘텐츠 뒤에 아무것도 표시되지 않거나 PHP 경고가 표시됩니다. 이는 이 속성의 값이 false이거나 사용자가 페이지나 링크를 방문하지 않았음을 의미합니다(정말 짜증나지만 이러한 방법의 원리를 알 수 있습니다)
In 또한 현재 가장 일반적으로 사용되는 화면 너비만 모니터링할 수 있으므로 해상도 모니터링은 특히 정확하지 않습니다. 마지막으로, 사용자의 실제 화면 너비를 모니터링하는 것은 생각만큼 간단하지 않다는 점을 말씀드리고 싶습니다. CSS로 모니터링하는 높이는 브라우저 창의 높이이고 일반적으로 시스템 패널/작업 표시줄로 인해 브라우저 창은 화면 너비보다 작기 때문입니다. 모니터
위 방법으로 추적을 방지할 수 있는 방법이 있나요
지금까지 제가 아는 유일한 방법은 CSS를 완전히 비활성화하는 것뿐입니다(이를 달성하려면 uMatrix와 같은 플러그인을 사용할 수 있습니다). 하지만 비용도 매우 엄청납니다. , CSS가 없으면 웹 페이지는 더 이상 예전만큼 보기에 좋지 않거나 심지어 사용할 수 없게 되므로 개인 정보 보호에 대해 정말로 걱정하지 않는 한(예를 들어, Tor 브라우저를 사용하는 경우 CSS를 비활성화해야 할 수도 있습니다. )
더 나은 해결책은 웹 페이지가 로드될 때 브라우저가 필요한 외부 리소스를 로드하지 않는다는 것입니다. 이러한 방식으로 사용자의 개인 행동을 모니터링하는 것은 불가능합니다. 의 콘텐츠 로딩은 브라우저를 통해 수행할 수 있으며 플러그인을 통해서도 구현할 수 있습니다(NoScript 또는 uMatrix와 유사)
위 방법에도 명백한 문제가 있습니다. 즉, 성능에 특정 영향을 미친다는 것입니다. , 페이지를 초기화할 때 브라우저가 많은 양의 콘텐츠를 로드하기 때문입니다(일부 콘텐츠는 페이지에 전혀 필요하지 않습니다)
위 내용은 CSS를 사용하여 사용자를 추적하는 방법을 가르쳐주세요.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!