> 웹 프론트엔드 > CSS 튜토리얼 > CSS 기반 지문

CSS 기반 지문

Lisa Kudrow
풀어 주다: 2025-03-16 09:31:11
원래의
968명이 탐색했습니다.

CSS 기반 지문

웹 사이트 지문 인식 기술은 걱정입니다. 사용자를 식별하기에 충분한 사용자 메타 데이터를 수집하는 것을 말합니다. JavaScript는 서버가 액세스 한 IP 주소와 결합하여 다양한 지문 인식 가능성을 제공하므로 지문 인식이 매우 일반적입니다.

그러나 사람들은 일반적으로 CSS를 지문을위한 매체로 생각하지 않으므로 어느 정도 "안전한"것으로 간주됩니다. 그러나 Oliver Brotchie는 어느 정도의 지문 인식을 위해 CSS를 사용하는 솔루션을 제안했습니다.

우리가 가진 모든 @media 쿼리를 고려하십시오. any-pointer 사용하여 포인터 유형을 테스트 할 수 있습니다. 각 값에 대해 서버에서 완전히 고유 한 배경 이미지를 요청한다고 상상해보십시오. 이미지가 요청되면 이러한 @media 쿼리가 사실임을 알고 있습니다. 다음과 같은 방법을 사용하여 지문을 시작할 수 있습니다.

 .pointer {
  백그라운드 이미지 : URL ( '/고유 -ID/포인터 = 없음')
}

@Media (모든 포인터 : 거친) {
  .pointer {
    배경 이미지 : URL ( '/고유 -ID/포인터 = 거친')
  }
}

@Media (모든 포인터 : Fine) {
  .pointer {
    백그라운드 이미지 : URL ( '/고유 -ID/포인터 = fine')
  }
}
로그인 후 복사

우리가 prefers-color-scheme 사용하여 어두운 모드 환경 설정을 테스트 할 수 있다는 사실과 결합하여 지문 인식이 더 명확합니다. 실제로 Oliver가 가장 염려하는 것은 현재 CSS 사용자 기본 설정 미디어 쿼리의 초안입니다.

다가오는 초안은이 접근 방식을 확장 가능하게 만들뿐만 아니라 정확도를 높입니다. 현재 다른 방법이 없으면 각 요청을 특정 방문자와 결국 연결하는 것은 어렵습니다. 원산지를 결정하는 유일한 실행 가능한 방법은 연결의 IP 주소로 요청을 그룹화하는 것이기 때문입니다. 그러나 새 드래프트를 사용하여 임의의 문자열을 생성하고 각 방문자의 URL 태그에 삽입하여 해당 방문자의 모든 요청을 정확하게 식별 할 수 있습니다.

더 많은 방법이 있습니다. 미디어 쿼리 1 픽셀을 생성하고 각 쿼리에 대한 배경 이미지를 요청하여 방문자의 창 크기를 완벽하게 추측 할 수 있습니다. 덜 알려진 홀수 미디어 쿼리는 12 개만있을 수 있지만 CSS를 사용하는 지문에 매우 유용합니다. 다양한 @supports 쿼리와 함께 사용하면 정확한 브라우저를 효과적으로 추측 할 수 있습니다. 특정 로컬 글꼴 설치 테스트의 고전적인 기술 과 결합하여 꽤 좋은 지문 인식기를 얻을 수 있습니다.

 @font-face {
  글꼴 패밀리 : '일부 폰트';
  SRC : 로컬 (일부 글꼴), URL ( '/고유 -ID/일부 폰트');
}

.Some-Font {
  글꼴 패밀리 : '일부 폰트';
}
로그인 후 복사

생성 된 CSS 코드는 매우 크지 만 (이것은 생성하는 SASS 코드입니다) URL에서 사용자 정의 속성을 사용할 수 있으면 크게 줄어 듭니다.

이 문제에 대해 너무 걱정하지 않습니다. 주로 지문 인식 기능이 더 광범위한 JavaScript를 비활성화하지 않기 때문입니다. 또한 액세스 된 링크 (브라우저에서 해결), 키 로그 및 사용자가 생성 한 인라인 스타일 및 다른 게시물에서 지적한 것과 같은 다른 유형의 CSS 보안 취약점이 있습니다.

그러나 지문 인식에 대한 Oliver의 연구는 우수하며 나보다 사이버 보안을 더 잘 아는 사람이라면 누구나 주목할 가치가 있습니다.

위 내용은 CSS 기반 지문의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
저자별 최신 기사
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿