외부 링크에 대해 사용자에게 경고하는 방법

특히 기술적인 목적이나 사이버 보안 관련 주제를 위해 블로그 게시물에서 외부 링크를 공유하는 것은 드문 일이 아닙니다.

글을 쓸 때 영감을 주는 유용한 리소스를 인정하는 것은 전적으로 공정하고 권장됩니다. 그러나 특정 조건에서도 문제가 될 수 있습니다.

부인 성명

여기서는 모범 사례를 강조하지 않습니다. 이것은 하이퍼링크의 추가 보안에 대한 몇 가지 생각일 뿐입니다. 장점과 단점을 읽어주세요.

외부 링크는 100% 안전할 수 없습니다.

정의에 따라 외부 웹사이트를 소유하지 않는 한 게시물에서 언급한 특정 페이지에 발생하는 일을 제어할 수 없습니다.

예를 들어 일정 시간이 지나면 나쁜 상황이 발생할 수 있습니다.

페이지가 사라져 독자에게 404 오류가 발생할 수 있음

페이지가 리디렉션될 수 있음

웹 사이트가 해커에 의해 손상될 수 있음

일부 시나리오는 독자를 위험에 빠뜨리지 않지만(예: 404 오류) 다른 시나리오는 매우 위험해 보입니다.

신뢰할 수 있는 출처만 사용합니다.

축하해요! 그것은 좋은 습관이지만 보안 상태나 선의에 관계없이 모든 웹 사이트가 공격을 받을 수 있습니다.

실제로 피해자가 덜 경계할 가능성이 있으므로 해커가 신뢰할 수 있는 작성자를 공격하는 것이 흥미로울 수 있습니다.

우리는 무엇을 할 수 있습니까?

외부 웹사이트를 어떻게 보호할 수 있습니까? 자신의 웹사이트/블로그에 대해 100% 보호를 보장할 수도 없습니다.

한 가지 방법은 라이브러리 및 서비스를 사용하여 앱을 모니터링하고 경고를 설정하는 것입니다. 예를 들어 빌드 중에 또는 동적 웹 사이트에 대한 일부 CRON 작업을 사용하여 끊어진 링크 및 리디렉션을 추적합니다.

더 간단한 접근 방식(활성 모니터링과 호환되지 않음)은 사용자가 다음과 같은 프롬프트와 함께 외부 링크를 클릭할 때 경고하는 것으로 구성될 수 있습니다.

You are now leaving our blog. We provide such links for your convenience but we don't take any responsibility for the content or the safety of these resources. Are you sure you want to go? y/n

빠르고 더러운 예

외부 링크에 HTML 클래스.external가 있다고 가정합니다.

const externals = document.querySelectorAll(".external")
externals && externals.forEach(function(link){
  link.addEventListener("click", function(e) {
    let answer = confirm("YOUR MESSAGE");
    if (answer !== true) {
      e.preventDefault();
    }
  })
})

장점과 단점

나에게 이 기술은 전혀 완벽하지 않습니다.

일부 사용자가 당황할 수 있음

다른 탭에서 링크를 여는 것을 막지 않습니다

.

동일한 게시물에 외부 링크가 많으면 사용자 경험에 해를 끼칠 수 있습니다

.

마지막으로 옵트아웃 방법으로 로컬 스토리지와 같이 사용자의 선택을 저장하는 것을 구현할 수 있습니다.

그래도 몇 가지 장점이 있습니다.

사용자에게 정보를 제공하고 경계를 유지하도록 권장합니다

추가 법적 측면에 사용할 수 있습니다

.

사용자가 바로 클릭하여 웹 사이트를 떠나는 것을 방지할 수 있습니다(예: 게시물 맨 위에 있는 링크)

일부 패턴, 특정 클래스 또는 속성을 외부 링크에 적용하고 JavaScript를 사용하여 클릭 이벤트를 수신할 수 있으므로 구현하기 쉽습니다

.

마무리

이 게시물에 영감을 준 웹사이트를 인용할 시간입니다: CISA . 공식적인!

정부와 행정부는 그러한 관행을 설명할 수 있는 추가 제약과 법적 의무가 있을 수 있지만 블로그에도 좋은 아이디어가 될 수 있는지 궁금합니다. 사용자가 맹목적으로 외부 링크를 클릭하지 못하도록 막는 것은 무엇이든 괜찮아 보입니다.