Vue - 확인 메시지에서 스타일 사용자 입력(특정 html 태그 허용)

Vue - 확인 메시지에서 스타일 사용자 입력(특정 html 태그 허용)

Vue를 사용하여 "Are you sure you want to delete ' { item Name} }?"와 같은 확인 모드를 표시합니다.

Javascript 문자열이 템플릿에 포함된 변수에 바인딩되어 있으면 충분히 쉽습니다.

하지만, 만약 제가 이 모든 것들을itemName그것을 강조하기 위해 이탤릭체로 쓴다면, 내가 찾을 수 있는 유일한 방법은v-html물론 XSS에도 개방됩니다.

현의 일부를 스타일링할 수 있는 방법이 있나요?

sanitize-html과 같은 패키지를 사용해 볼 수 있습니다.방법은 다음과 같습니다.

인스톨:

npm install sanitize-html

main.filename:

import sanitizeHTML from 'sanitize-html';
Vue.prototype.$sanitize = sanitizeHTML;

당신의 컴포넌트vue:

<div v-html="$sanitize(itemName)" />

허용된 태그 및 속성의 기본 옵션에 대한 자세한 내용은 README을 참조하십시오.

EDIT response.다른 방법:

sanitize-html에는 327KB의 무게가 있다는 단점이 있습니다.다만, 보다 작은 패키지가 준비되어 있습니다.

• DOMPurify(15KB)
• js-xss(28KB)

---

편집 2:

현재 프로젝트에서 사용하고 있는 패키지 vue-dompuritfy-html이 있습니다.인스톨 후, 간단하게 다음의 조작을 실시할 수 있습니다.

<div v-dompurify-html="itemName" />

보너스: 이 패키지를 사용하면 권장 eslint 규칙 vue/no-v-html을 적용할 수 있습니다.

다음과 같이 모달 정의:

템플릿

<div class="modal">
  <slot></slot>
  <button @click="$emit(true)">Yes</button>
  <button @click="$emit(false)">No</button>
</div>

스타일링

.modal > em {
  /* apply anything you want here */
}

그런 다음 동료에게 모달(modal)을 사용하세요.

템플릿

<template>
  ...
    <modal>Are you sure you want to delete <em>{{itemName}}</em>?</modal>
  ...
</template>

다른 답변도 봤어요. Rashad Saleh의 답변을 추천합니다. 슬롯이 있는 모델입니다.v-if콘텐츠를 전환합니다.v-*각 케이스에 대해 각 템플릿을 작성할 필요가 없습니다.

제가 다른 답변을 올리면 완전히 다른 방식으로 진행됩니다.sweet-alertvue와 충돌하지 않고 완전히 javascript 방식으로 사용합니다.

var something = document.getElementById('xss').value

var toshow = encodeURIComponent(something)

Swal.fire({
  title: 'Are you sure?',
  html: "You won't be able to revert <b><em>" + toshow + "</em></b>!",
  type: 'warning',
  showCancelButton: true,
  confirmButtonColor: '#3085d6',
  cancelButtonColor: '#d33',
  confirmButtonText: 'Yes, delete it!'
}).then((result) => {
  if (result.value) {
    Swal.fire(
      'Deleted!',
      'Your file has been deleted.',
      'success'
    )
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/limonte-sweetalert2/7.33.1/sweetalert2.all.min.js"></script>

<input id="xss" value="<script>alert('xss')</script>">

충분히 예쁘지만 스위트 경보 스타일을 커스터마이즈해야 할 수도 있습니다.자세한 내용은 https://sweetalert2.github.io/를 참조해 주세요.

언급URL : https://stackoverflow.com/questions/55225676/vue-style-user-input-in-confirm-message-allow-specific-html-tags