Vue 에서 v-bind:href 사용시 잠재적인 보완 문제 발생

보완 이슈 발생

소나큐브와 같은 지속적인 코드 품질 검사용 오픈 소스 플랫폼을 사용하다보면, 아래와 같이 a 태그에서 href 속성을 동적으로 넣는 코드에서 보안 이슈 발생함. 

 <a
  :href="link"
  target="_blank"
>
  {{ title }}
</a>

원인 (https://v2.vuejs.org/v2/guide/security#Injecting-URLs)

프론트엔드에서 URL 검사를 수행하는 경우 이미 보안 문제가 있습니다.
사용자가 제공한 URL은 데이터베이스에 저장하기 전에 항상 백엔드에서 검사해야 합니다.
네이티브 모바일 앱을 포함하여 API에 연결하는 모든 클라이언트에서 문제를 방지할 수 있습니다.
또한, 검사된 URL이 있더라도 Vue는 안전한 목적지로 연결된다는 것을 보장하는 데 도움을 줄 수 없습니다.

정리하면 href 로 이동하는 경로가 우리가 예상한 URL 과 달라질 수 있다라는 것!

해결방법

하나는 소나큐브에 Review 를 남겨서 통과시키는 방법이 있고, 또 하나는 이벤트 리스너를 사용하는 것 입니다.

개인적으로 @click 이벤트를 사용해서 처리하는 것을 좀 더 선호합니다. (유지보수, 가독성 상승)