자동 채우기 어두운 패턴

게시 됨: 2022-03-10
요약 요약 ↬ "다크 패턴"은 사용자가 실제로 하고 싶지 않은 일을 하도록 속이는 기만적인 UX 패턴입니다. 이 기사에서 Alvaro Montoro는 세 가지 다른 브라우저에서 사용자의 개인정보가 얼마나 침해되는지 알아보기 위해 약간의 실험을 합니다.

신문 가입 양식에는 이름, 이메일 및 비밀번호 필드가 있었습니다. 그래서 이름 필드에 입력하기 시작했고 자동 완성이 내 프로필을 제안했습니다. 그러나 펑키한 것이 있었습니다. 자동 완성 제안에 내 우편 주소가 포함되었습니다. 말할 필요도 없이, 그것은 당혹스러웠습니다. 주소는 양식의 필드가 아니었습니다. 왜 그것이 제안 되었습니까?

이 질문이 내 마음에 형성되기 시작했을 때 내 두뇌는 이미 내 손가락에 제안을 클릭하라는 신호를 보내고 완료되었습니다. 다음으로 주소, 전화번호, 생년월일 등과 같은 추가 정보를 요청하는 두 번째 양식 페이지로 이동했습니다. 그리고 모든 필드는 자동 채우기 기능으로 미리 채워져 있었습니다.

나는 안도의 한숨을 쉬었다. 그것은 웹사이트의 속임수가 아닌 "다단계" 형식이었습니다. 어쨌든 평판이 좋은 신문이었습니다. 두 번째 페이지에서 모든 선택 정보를 삭제하고 가입을 완료하고 다음으로 넘어갔습니다.

그 (문제가 있는) 상호 작용 은 자동 완성 기능 사용의 위험 중 하나를 강조했습니다.

자동 완성 및 자동 완성

비슷하게 들릴 수 있지만 autocomplete 과 자동 완성은 같은 것이 아닙니다 . 밀접하게 관련 되어 있지만:

  • 자동 완성은 사람들이 정보를 (브라우저 또는 OS에) 저장하고 웹 양식에서 사용할 수 있도록 하는 브라우저 기능입니다.
  • autocomplete 는 웹 양식의 필드를 자동 완성하는 방법(또는 자동 완성하지 않는 방법)에 대한 지침을 브라우저에 제공하는 HTML 속성입니다.

자동 완성은 "무엇"이고 자동 완성은 "방법"이라고 말할 수 있습니다. 즉, autofill 은 데이터를 저장하고 웹 형식(필드의 name , type 또는 id 기반)에서 일치시키려고 시도하고 autocomplete 은 브라우저를 안내합니다. 수행 방법(각 분야에서 어떤 정보가 예상되는지).

자동 완성은 다양한 유형의 값을 지정할 수 있는 다양한 옵션이 있는 강력한 기능입니다.

  • 개인 : 이름, 주소, 전화번호, 생년월일
  • 금융 : 신용 카드 번호, 이름, 만료 날짜;
  • 인구 통계 : 위치, 나이, 성별, 언어;
  • 전문가 : 회사 및 직위.

자동 완성은 선택에 의해 또는 우연히 널리 퍼진 기능입니다. 브라우저가 고의로든 실수로든 웹 양식 정보를 저장/사용하도록 허용하지 않은 사람은 누구입니까? 그리고 그것은 문제가 될 수 있습니다. 특히 autocomplete 을 잘못 사용하면(요즘에는 엄청나게 많은 피싱 이메일과 SMS 메시지가 추가됩니다.)

개인 정보 위험

이러한 기능은 모두 개인 데이터 및 개인 정보 보호와 관련하여 사용자에게 (최소한) 두 가지 주요 위험을 나타냅니다.

  1. 보이지 않는 필드가 채워집니다 (숨겨진 유형이 있는 필드와 동일하지 않음).
  2. 자동 완성된 정보는 사용자가 양식을 제출하기 전에도 JavaScript를 통해 읽을 수 있습니다 .

, 사용자가 정보 자동 채우기를 선택하면 개발자가 읽을 수 있는 모든 필드를 사용할 수 있습니다 . 다시 말하지만, 사용자가 실제로 채워진 필드를 알지 못하는 상태에서 사용자가 양식을 제출하는지 여부에 관계없이.

이 마지막 부분은 상대적입니다. 채워지는 필드를 아는 것은 브라우저에 따라 다릅니다. Safari와 Firefox는 이 작업을 잘 수행합니다(아래에서 곧 보게 될 것입니다). 반면에 현재 가장 인기 있는 브라우저인 Chrome은 가장 지식이 풍부한 사용자라도 개인 정보를 공유하도록 속일 수 있는 좋지 않은 경험을 제공합니다.

사용자가 실수로 필드를 채우도록 선택한 시간도 고려하면 이 문제가 더 관련성이 높아집니다. 예를 들어 좀 더 자세히 확인해보자.

점프 후 더! 아래에서 계속 읽기 ↓

약간의 실험

많은 필드가 있는 양식을 만들고 다른 값으로 autocomplete 속성을 첨부하는 작은 실험을 했습니다. 그런 다음 양식의 구조를 약간 사용했습니다.

  • 나는 ( hidden 또는 type="hidden" 을 사용하는 대신) 컨테이너를 오프스크린에 넣어 대부분의 필드를 숨겼습니다.
  • 탭 순서에서 시각적으로 숨겨진 필드를 제거했습니다(키보드 사용자가 숨겨진 필드를 간과할 수 있도록).
  • 필드를 다른 순서로 정렬하려고 시도했습니다(그리고 놀랍게도 이것은 자동 완성에 영향을 미쳤습니다!).

결국 양식의 코드는 다음과 같았습니다.

 <form method="post" action="javascript:alertData()"> <label for="name">Full name</label><input name="name" autocomplete="name" /><br/> <label for="email">Email</label><input name="email"/><br/> <label for="postal-code">ZIP</label><input name="postal-code" autocomplete="postal-code"/> <div class="hide-this"> <!-- Hidden --> <label for="firstname">First name</label><input tabindex="-1" type="hidden" name="firstname" autocomplete="given-name" /><br/> <label for="lastname">Last name</label><input tabindex="-1" name="lastname" autocomplete="family-name" /><br/> <label for="honorific-prefix">honorific-prefix</label><input tabindex="-1" name="honorific-prefix" autocomplete="honorific-prefix"/><br/> <label for="organization">Organization</label><input tabindex="-1" name="organization" /><br/> <label for="phone">Phone</label><input tabindex="-1" name="phone" autocomplete="tel" /><br/> <label for="address">address</label><input tabindex="-1" name="address" autocomplete="street-address" /><br/> <label for="city">City</label><input tabindex="-1" name="city" autocomplete="address-level2" /><br/> <label for="state">State</label><input tabindex="-1" name="state" autocomplete="address-level1" /><br/> <label for="level3">Level3</label><input tabindex="-1" name="state" autocomplete="address-level3" /><br/> <label for="level4">Level4</label><input tabindex="-1" name="state" autocomplete="address-level4" /><br/> <label for="country">Country</label><input tabindex="-1" name="country" autocomplete="country" /><br/> <label for="birthday">Birthday</label><input tabindex="-1" name="birthday" autocomplete="bday" /><br/> <label for="language">Language</label><input tabindex="-1" name="language" autocomplete="language" /><br/> <label for="sex">Sex</label><input tabindex="-1" name="sex" autocomplete="sex" /><br/> <label for="url">URL</label><input tabindex="-1" name="url" autocomplete="url" /><br/> <label for="photo">Photo</label><input tabindex="-1" name="photo" autocomplete="photo" /><br/> <label for="impp">IMPP</label><input tabindex="-1" name="impp" autocomplete="impp" /><br/> <label for="username">Username</label><input tabindex="-1" name="username" autocomplete="username" /><br/> <label for="password">Password</label><input tabindex="-1" name="password" autocomplete="password" /><br/> <label for="new-password">Password New</label><input tabindex="-1" name="new-password" autocomplete="new-password" /><br/> <label for="current-password">Password Current</label><input tabindex="-1" name="current-password" autocomplete="current-password" /><br/> <label for="cc">CC#</label><input tabindex="-1" name="cc" autocomplete="cc-number" /><br/> <label for="cc-name">CC Name</label><input tabindex="-1" name="cc-name" autocomplete="cc-name" /><br/> <label for="cc-expiration">CC expiration</label><input tabindex="-1" name="cc-expiration" autocomplete="cc-expiration" /><br/> <label for="cc-zipcode">CC Zipcode</label><input tabindex="-1" name="cc-zipcode" autocomplete="cc-postalcode" /><br/> </div> <button>Submit</button> </form>

참고: 이 데모는 얼마 전에 만들었으며 표준은 살아있는 문서입니다. 그 이후로 일부 자동 완성 이름이 변경되었습니다. 예를 들어, 이제 이전에는 사용할 수 없었던 주소 또는 신용 카드에 대해 new-passwordcurrent-password 암호를 지정할 수 있습니다.

그 양식에는 세 개의 표시 필드( name , emailzipcode )가 있습니다. 보험회사나 케이블, 기타 통신사에서 많이 쓰는 형태지만, 너무 광범위하지 않을 수 있어 이메일 필드 하나로 더욱 줄여서 작성했습니다. 우리는 어디에서나 웹사이트, 뉴스레터 또는 업데이트에 가입하는 것을 봅니다. 여기에서 실행 중인 데모를 볼 수 있습니다.

Alvaro Montoro의 Pen [Showing autofill/autocomplete dark pattern (II)](https://codepen.io/smashingmag/pen/xxLKVga)을 참조하십시오.

Alvaro Montoro의 자동 채우기/자동 완성 어두운 패턴(II)을 표시하는 펜을 참조하십시오.

자동 완성을 사용하여 양식을 작성했다면 이미 원하는 것보다 더 많은 정보 를 공유한 것 입니다. 그리고 Chrome에서는 완벽하게 정상적인 구독 양식처럼 보일 수도 있습니다.

자동 완성이 없거나 사용하지 않더라도 걱정하지 마십시오. 다음은 세 가지 다른 브라우저에서의 경험에 대한 요약입니다.

참고 : 이 모든 테스트는 자동 완성 사용을 가정하고 가짜 프로필을 기반으로 합니다!

원정 여행

양식 컨트롤을 클릭하면 Safari는 필드 오른쪽에 아이콘을 표시합니다. 그것을 클릭하면 브라우저가 양식과 공유할 정보가 포함된 팝업이 표시됩니다.

주소, 회사, 휴대폰, 이메일, 생일을 공유할 것임을 나타내는 Safari 자동 완성 제안의 스크린샷
주소, 회사, 휴대폰, 이메일, 생일 등을 공유할 것임을 나타내는 Safari 자동 완성 제안의 스크린샷(큰 미리보기)

좋은 점은 양식의 일부로 공유될 모든 데이터를 표시한다는 것입니다. 보이는 필드에 대한 데이터뿐만 아니라 모든 필드에 대한 데이터입니다. 이 시점에서 사용자는 뭔가 좋지 않다고 의심할 수 있습니다. 뭔가 비린내가 있습니다.

양식을 이메일 필드로만 축소했을 때 Safari는 흥미로운 작업을 수행했습니다. 자동 완성 팝업이 다릅니다.

이메일을 보여주는 Safari 자동 완성 제안의 스크린샷 및 프로필 아래
이메일을 보여주고 프로필 아래에 있는 Safari 자동 완성 제안의 스크린샷. (큰 미리보기)

이메일만 공유한다고 명시되어 있습니다(해당 정보만 공유합니다). 그러나 아래 연락처 정보가 더 까다로울 수 있습니다. 해당 버튼을 클릭하면 브라우저에 공유 데이터와 함께 프로필 요약이 표시됩니다. 그러나 그것은 어디에도 명확하게 언급되어 있지 않다. "공유/공유 금지" 옵션이 있는 일반 연락처 카드처럼 보입니다. "자동 채우기" 버튼을 클릭하면 양식이 모든 데이터로 채워집니다. 이메일 뿐만 아니라:

모든 데이터가 포함된 Safari의 경고 스크린샷
모든 데이터가 포함된 Safari의 경고 스크린샷. (큰 미리보기)

따라서 사용자가 실수로 양식과 정보를 공유할 수 있는 방법이 있습니다. 까다롭지만 두 가지 가능한 옵션 중 하나의 아이콘으로 "강조 표시"된 옵션이라는 점을 고려할 때 너무 무리하지는 않습니다.

웃긴건 브라우저가 신용카드 데이터와 개인정보를 분리하는데 사파리는 개인정보(이름과 우편번호)를 기반으로 신용카드 정보의 일부를 채웠다는 점이다.

파이어폭스

Firefox에서 자동 완성을 사용하는 것은 조금 더 복잡합니다. 크롬처럼 자동이 아니고 사파리처럼 아이콘이 없습니다. 사용자는 자동 완성 팝업을 보려면 입력을 시작하거나 두 번째 클릭해야 합니다. 자동 완성 팝업에는 보이는 필드뿐만 아니라 브라우저가 채울 모든 범주에 대한 메모가 있습니다.

채워질 모든 컨트롤을 보여주는 Firefox의 자동 완성 팝업 스크린샷
채워질 모든 컨트롤을 보여주는 Firefox의 자동 완성 팝업 스크린샷. (큰 미리보기)

이메일 전용 양식으로 테스트한 Firefox는 채울 필드 범주를 나타내는 동일한 자동 채우기 팝업을 표시했습니다. 차이가 없습니다.

그리고 다른 브라우저와 마찬가지로 자동 완성이 실행된 후 JavaScript로 모든 값을 읽을 수 있습니다.

모든 데이터가 포함된 Firefox의 경고 스크린샷
모든 데이터가 포함된 Firefox의 경고 스크린샷. (큰 미리보기)

Firefox는 세 가지 중 최고였습니다. 필드 또는 순서와 관계없이 양식과 공유할 정보가 무엇인지 명확하게 명시했습니다. 그리고 두 번째 사용자 상호 작용이 발생한 자동 완성 기능을 숨겼습니다 .

키보드 사용자는 팝업 버블 내부로 들어가 탭 키를 눌러 자신도 모르게 자동 채우기를 선택할 수 있습니다.

크롬

그런 다음 Chrome의 차례가 되었습니다. (여기서 "Chrome"을 사용하지만 테스트한 여러 Chromium 기반 브라우저에서 결과가 비슷했습니다.) 필드를 클릭하고 더 이상의 상호 작용 없이 자동 완성 팝업이 표시되었습니다. Firefox와 Safari는 공통점이 많았지만 Chrome은 완전히 다릅니다. 두 가지 값만 표시하고 둘 다 표시됩니다.

두 개의 필드(이름 및 우편번호 모두 표시됨)만 표시하는 Chrome의 자동 완성 팝업 스크린샷
두 개의 필드(이름 및 우편번호 모두 표시됨)만 표시하는 Chrome의 자동 완성 팝업 스크린샷. (큰 미리보기)

이 디스플레이는 의도된 것입니다. 보이는 컨트롤과 자동 완성 제안의 특정 조합을 얻기 위해 의도적으로 필드의 순서를 선택했습니다. 그러나 Chrome은 일부 자동 완성 속성에 두 번째 값에 대해 더 많은 "가중치"를 부여하는 것 같습니다. 그러면 양식의 필드 순서에 따라 팝업이 변경됩니다.

두 번째 버전의 양식으로 테스트하는 것은 그다지 좋지 않았습니다.

이메일과 이름의 두 필드만 표시하는 Chrome의 자동 완성 팝업 스크린샷(이메일만 표시됨)
이메일과 이름의 두 필드만 표시하는 Chrome의 자동 완성 팝업 스크린샷(이메일만 표시됨). (큰 미리보기)

팝업에는 보이지 않는 필드(이름)가 표시되지만 팝업에 이름의 목적이 무엇인지는 불분명합니다. 숙련된 사용자는 이름이 공유되기 때문에 이러한 일이 발생한다는 것을 알 수 있지만 일반 사용자(심지어 숙련된 사용자도 포함)는 이메일이 해당 이름의 프로필과 연결되어 있다고 생각할 수 있습니다. 브라우저가 양식과 공유할 데이터에 대한 표시가 없습니다.

그리고 사용자가 자동 ​​완성 버튼을 클릭하자마자 개발자가 JavaScript로 읽을 수 있는 데이터를 사용할 수 있습니다.

모든 정보가 포함된 Chrome의 알림 스크린샷
모든 정보가 포함된 Chrome의 경고 스크린샷 (큰 미리보기)

Chrome은 최악의 범죄자였습니다. 자동으로 정보를 공유하고 어떤 데이터가 관련되어 있는지 불분명했으며 자동 완성 제안은 컨트롤의 순서와 속성에 따라 변경되었습니다.

처음 두 가지 문제는 모든/많은 브라우저에 공통적이며 기능으로 간주될 수도 있습니다. 그러나 세 번째 문제는 Chromium 브라우저 전용이며 스케치 어두운 패턴을 용이하게 합니다.

이 동작은 Chrome이 온라인 브라우저(Chrome 및 Chromium 기반 포함)의 상당한 시장 점유율을 차지하기 때문에 문제가 아닌 일화에 가깝습니다.

어두운 패턴

아시다시피 다크 패턴 은 사용자가 실제로 하고 싶지 않은 일을 하도록 속이는 기만적인 UX 패턴입니다.

“웹사이트와 앱을 사용할 때 모든 페이지의 모든 단어를 읽는 것이 아니라 대충 읽고 추측합니다. 회사에서 사용자를 속여 무언가를 하도록 유도하려는 경우 실제로는 다른 것을 말하는 것처럼 페이지를 만들어 이를 이용할 수 있습니다.”

— 해리 Brignull, darkpatterns.org

이전 요점에서 설명한 동작은 분명히 기만적인 사용자 경험입니다. 경험이 없는 사용자는 자신이 개인 데이터를 공유하고 있다는 사실을 인식하지 못할 것입니다. Chrome에서 공유되는 정보를 명확하게 설명하는 대신 선택한 옵션이 프로필에 속하는 것처럼 보이게 하므로 기술에 정통한 사람들이 더 많이 속아 넘어갈 수 있습니다.

브라우저 구현으로 인해 이 동작이 발생하지만 이를 악용하려면 개발자가 이를 제자리에 설정해야 합니다. 불행히도 이미 이를 악용하려는 회사가 있어 리드를 얻기 위한 기능으로 판매하고 있습니다.

어두운 패턴이 지속되는 한 불법 패턴일 수도 있습니다. 이는 유럽 일반 데이터 보호 규정(GDPR) 5조에 명시된 개인 데이터 처리와 관련된 많은 원칙을 위반하기 때문입니다.

  • 합법성, 공정성, 투명성
    프로세스는 모두 투명합니다.
  • 목적 제한
    데이터가 초기 목적과 양립할 수 없는 방식으로 처리됩니다.
  • 데이터 최소화
    그 반대입니다. 데이터 최대화: 가능한 한 많은 정보를 얻습니다.

예를 들어 뉴스레터에 가입하거나 제품에 대한 정보를 요청하고 이메일을 제공하는 경우 웹사이트는 귀하의 이름, 주소, 생년월일, 전화번호 또는 기타 정보를 귀하의 정보 없이 얻을 수 있는 법적 권리가 없습니다. 동의 또는 지식. 사용자가 자동완성을 클릭할 때 권한을 부여했다고 생각하더라도, 획득한 데이터의 목적은 양식의 원래 의도와 일치하지 않습니다.

가능한 해결책

문제를 피하려면 모든 행위자가 문제 해결에 기여하고 도움을 주어야 합니다.

  1. 사용자
  2. 개발자 및 디자이너
  3. 브라우저

1. 사용자

사용자 측의 유일한 일은 자동 채우기 팝업에 표시된 데이터가 올바른지 확인하는 것입니다.

그러나 여기서 사용자가 피해자라는 것을 기억해야 합니다. 우리는 자동 완성을 클릭할 때 충분한 주의를 기울이지 않은 것에 대해 그들을 비난 할 수 있지만 그것은 불공평할 것입니다. 또한 사람이 실수로 버튼을 클릭하고 실수로 데이터를 공유하는 데에는 여러 가지 이유가 있습니다. 따라서 의도가 좋고 정통한 사용자라도 그것에 빠질 수 있습니다.

2. 개발자와 디자이너

솔직해집시다. 개발자가 문제의 근본 원인은 아니지만 어두운 패턴을 악용하는 데 중요한 역할을 합니다. 실수로 또는 악의적인 의도로.

그리고 책임 있고 정직 합시다(이번에는 문자 그대로). 왜냐하면 이것이 개발자와 디자이너가 신뢰를 구축하고 자동 완성 및 자동 완성 기능을 잘 활용하기 위해 할 수 있는 일이기 때문입니다.

  • 필요한 데이터만 자동 완성합니다.
  • 수집할 데이터를 명확하게 명시합니다.
  • 나중에 제출할 양식 필드를 숨기지 마십시오.
  • 더 많은 데이터를 보내도록 사용자를 오도하거나 속이지 마십시오.

극단적인 방법으로 특정 필드를 자동 완성하지 않도록 할 수 있습니다. 그러나 물론 이것은 양식을 덜 사용하고 액세스할 수 없게 만들기 때문에 다른 문제를 야기합니다. 따라서 균형을 찾는 것이 까다로울 수 있습니다.

이 모든 것은 다크 패턴을 악용할 수 있는 XSS 취약점의 가능성을 고려하지 않은 것입니다. 물론 그것은 완전히 다른 이야기이며 훨씬 더 중요한 문제입니다.

3. 브라우저

대부분의 작업은 브라우저 측(특히 Chromium 측)에서 수행해야 합니다. 그러나 웹 브라우저가 자동 완성/자동 완성을 처리하는 방식이 모두 나쁜 것은 아니라는 점부터 시작하겠습니다. 많은 것들이 좋습니다. 예를 들어:

  • 공유할 수 있는 데이터를 제한합니다.
    브라우저에는 HTML 표준에 설명된 모든 값을 포함하지 않을 수 있는 자동 완성 필드 목록이 있습니다.
  • 데이터를 캡슐화하고 그룹화합니다.
    브라우저는 신용 카드와 같은 중요한 가치를 보호하기 위해 개인 정보와 금융 정보를 분리합니다. Safari에는 이에 대한 몇 가지 문제가 있었지만 사소한 문제였습니다.
  • 공유될 데이터에 대해 경고합니다.
    때로는 이것이 불완전하거나(Chrome) 명확하지 않을 수 있지만(Safari) 사용자에게 경고합니다.

그러나 일부 또는 모든 웹 브라우저에서 개선할 수 있는 부분이 있습니다.

자동 완성될 모든 필드 표시

브라우저는 자동 완성 팝업 내에서 자동 완성될 모든 필드의 목록을 항상 표시해야 합니다(일부 목록 대신). 또한 정보는 일반 연락처 카드로 표시되는 대신 공유할 데이터로 명확하게 식별되어야 합니다. 오해의 소지가 있을 수 있습니다.

Firefox는 이 시점에서 훌륭한 일을 했고, Safari는 일반적으로 훌륭한 일을 했으며, Chrome은 다른 두 가지에 비해 하위 수준이었습니다.

자동 완성 시 onChange 이벤트를 트리거하지 마십시오.

이 동작은 HTML 표준의 자동 완성 정의의 일부이기 때문에 문제가 되는 요청입니다.

"자동 완성 메커니즘은 사용자가 컨트롤의 데이터를 수정한 것처럼 작동하는 사용자 에이전트에 의해 구현되어야 합니다[...]."

즉, 브라우저는 자동 완성 데이터를 사용자가 입력한 것처럼 처리하여 모든 이벤트를 트리거하고 값을 표시하는 등의 작업을 수행해야 합니다. 시각적으로 사용할 수 없는 필드에서도 마찬가지입니다.

보이지 않는 요소에서 이 동작을 방지하면 문제를 해결할 수 있습니다. 그러나 양식 컨트롤이 표시되는지 여부를 확인하는 것은 브라우저에 비용이 많이 들 수 있습니다. 또한 이 솔루션은 개발자가 이벤트를 트리거하는 입력 없이도 값을 읽을 수 있기 때문에 부분적일 뿐입니다.

개발자가 제출 전에 자동 완성된 필드를 읽도록 허용하지 않음

이것은 또한 많은 개발자가 제출하기 전에 값을 확인하기 위해 필드 값을 읽는 것에 의존하기 때문에 문제가 될 수 있습니다(예: 사용자가 입력에서 멀어지는 경우). 양식을 제출할 때까지 브라우저도 마찬가지입니다.

이에 대한 대안은 자동 완성 값을 읽을 때 가짜 데이터를 제공하는 것입니다. 웹 브라우저는 이미 방문한 링크에 대해 이와 같은 작업을 수행하고 있습니다. 자동 완성 양식 필드에서도 동일한 작업을 수행하지 않는 이유는 무엇입니까? 이름으로 횡설수설, 사용자 주소 대신 지역 당국과 일치하는 유효한 주소, 가짜 전화 번호를 제공합니까? 이를 통해 사용자의 개인 정보를 보호하면서 개발자 검증 요구 사항을 해결할 수 있습니다.

브라우저가 양식과 명확하게 공유할 필드/값의 전체 목록을 표시하는 것은 큰 진전이 될 것입니다. 다른 두 개는 이상적이지만 스트레치 목표에 가깝습니다. 그래도 프라이버시를 상당히 개선할 수 있는 이니셔티브입니다.

자동 채우기 어두운 패턴이 여전히 악용될 수 있습니까? 불행히도, 그렇습니다. 하지만 훨씬 더 복잡할 것입니다. 그리고 이 시점에서 이러한 상황을 피하는 것은 사용자의 책임이자 개발자의 의무가 될 것입니다.

결론

정보를 선택하기 위해 사용자 상호 작용 이 필요하기 때문에 자동 완성은 큰 보안 문제가 아니라고 주장할 수 있습니다(Chrome에서도 마찬가지임). 그러나 잠재적인 데이터 손실이 적절한 조치를 정당화한다고 주장할 수도 있습니다. 그리고 Chrome은 (상대적으로) 덜 중요한 보안/사용성 문제( alert() , prompt()confirm() 에 대해 주요 개인 정보를 보호하기 위해 수행할 수 있는 것보다 더 많은 변경을 수행했습니다.

그런 다음 어두운 패턴의 문제가 있습니다. 모두가 자신의 몫을 하면 피할 수 있습니다.

  • 사용자는 자동 완성하는 양식/데이터에 주의해야 합니다.
  • 개발자는 해당 데이터를 악용하지 않아야 합니다.
  • 브라우저는 사람들의 데이터를 더 잘 보호해야 합니다.

근본적으로 이 어두운 패턴은 브라우저 문제 (주로 Chrome 문제)이며 작은 문제가 아닙니다(개인 정보가 온라인에서 중요해야 함). 그러나 선택이 있습니다. 결국 다크 패턴을 악용하느냐 마느냐는 개발자의 몫이다. 그러니 현명하게 선택하고 옳은 일을 합시다.

스매싱 매거진에 대한 추가 정보

  • 더 나은 양식 디자인: 페이지당 한 가지(사례 연구), Adam Silver
  • 웹 양식의 일반적인 우려 사항 및 개인 정보 보호, Vitaly Friedman
  • accent-color 으로 양식 스타일 단순화 , Michelle Barker
  • HTML5 입력 유형: 현재 위치는?, Drew McLellan
  • Ionic React의 형식 및 유효성 검사, Jerry Navi
  • 모바일 양식 디자인을 위한 모범 사례, Nick Babich