[SonarQube][Security Hotspot] Make sure bypassing Vue built-in sanitization is safe here.

어떤게 위험한가요?

Vue.js 프레임워크는 innerHtml 대신 innerText와 같은 기본 API 브라우저를 사용하여 HTML 콘텐츠를 자동으로 이스케이프 처리하여 XSS 취약점을 방지합니다.

HTML을 렌더링하기 위해 innerHtml 및 유사한 API를 명시적으로 사용하는 것은 여전히 ​​가능합니다. 실수로 악성 HTML 데이터를 렌더링하면 애플리케이션에 XSS 취약점이 발생하고 민감한 정보에 액세스/수정하거나 다른 사용자를 사칭하는 등 광범위한 심각한 공격이 가능해집니다.

 

위험 평가

민감한 코드 예

Vue.js 템플릿을 사용할 때 v-html 지시문을 사용하면 검사 없이 HTML 렌더링이 가능합니다:

<div v-html="htmlContent"></div> <!-- Noncompliant -->

 

렌더링 기능을 사용할 때 innerHTML 속성을 사용하면 정리 없이 HTML 렌더링이 가능합니다:

Vue.component('element', {
  render: function (createElement) {
    return createElement(
      'div',
      {
        domProps: {
          innerHTML: this.htmlContent, // Noncompliant
        }
      }
    );
  },
});

 

 

어떻게 해결할 수 있나요?

권장되는 보안 코딩 방식

• 콘텐츠가 100% 안전하다고 간주되지 않는 한 v-html 지시문을 사용하여 HTML 콘텐츠를 삽입하지 마세요. 대신 내장된 자동 이스케이프 Vue.js 기능을 최대한 활용하세요.
• v-bind:href 지시어를 사용하여 악성 Javascript(javascript:onClick(...))를 포함할 수 있는 URL을 설정할 때는 주의하세요.
• :onmouseover와 같은 이벤트 지시문도 Javascript 삽입이 발생하기 쉬우므로 안전하지 않은 값과 함께 사용하면 안 됩니다.

 

준수하는 솔루션

Vue.js 템플릿을 사용할 때 요소의 하위 노드로 콘텐츠를 배치하는 것은 안전합니다:

<div>{{ htmlContent }}</div>

 

 

렌더링 기능을 사용하는 경우 innerText 속성을 사용하여 요소의 하위 노드로서 콘텐츠의 하위 노드를 안전하게 배치하십시오.

Vue.component('element', {
  render: function (createElement) {
    return createElement(
      'div',
      {
        domProps: {
          innerText: this.htmlContent,
        }
      },
      this.htmlContent // Child node
    );
  },
});

 

 

💡

vue-i18n을 이용하고 있는 경우, <i18n> 태그를 이용하여 v-html 속성을 대체할 수 있다

https://kazupon.github.io/vue-i18n/guide/interpolation.html