상품 화면 마크업

• v-html 바인딩 : 연결된 속성을 순수 HTML로 렌더링 한다, 편리 할 수 는 있지만 믿을 수 있는 값일 때만 사용 하거나 거의 사용하지 않는편이 좋다.
  • 크로스 사이트 스크립트 공격
    • 뷰에 직접적으로 HTML을 삽입하는 코드를 작성할때 애플리케이션은 크로스 사이트 스크립트(XSS) 공격에 노출된다.
    • 일반적으로 가장 좋은 방법은 HTML과 콘텐츠에 대한 기본 원칙을 최소한으로 따르는것 이다.
      • HTML 보간을 사용 할때는 신뢰 할 수 있는 콘텐츠만 출력한다.
      • HTML 보간을 사용 할 때는 절대 사용자가 제공한 콘텐츠를 출력 하지 않는다.
      • 필요시 텍스트 입력으로 HTML 요소를 받지 않고 고유의 템플릿 컴포넌트를 사용해서 기능을 구현한다.

• 

• 출력 필터 적용
  • 일반적인 출력 필터 형식 -> {{property | filter}}
  • 필터 함수 작성
    • 출력 필터는 값을 받아 형식화를 수행하고 형식화 된 값을 출력하는 함수이다.
    • 모든 출력 필터는 Vue 인스턴스에 전달하는 옵션들의 filters 객체에 존재한다.

    • 

    • 마크업 추가 후 바인딩 방법

    • 

  • filters 객체는 Vue.js 3.x 버전에서 삭제됨 computed 또는 method 사용 권장
  • 총 프로세스

    •