vue.timeout - v-timeout 대체

vue.timeout - v-timeout 대체

저는 JSX의 리액션 배경에서 왔습니다.그래서 이런 걸 쓰면

var test = <div>i am a div</div>

html을 설정하는 것은 매우 일반적입니다.v-html을 사용하여 동일한 작업을 수행할 수 있다는 것은 알고 있지만, 다음 코드를 통해 이것이 가장 안전한 방법인지 궁금했습니다.

vue 성분

<template src="./templates/General.html"></template>

<script>
  export default {
      name: 'guide-general',
      data: function() {
          return {
              guides: [
                  {
                      title: "first",
                      description: "First description"
                  },
                  {
                      title: "second",
                      description: "second description"
                  },
                  {
                      title: "third",
                      description: `<ul>
                        <li>
                            test
                        </li>
                      </ul>`
                  }
              ]
          }
      },
      methods: {

      }
  }
</script>

<style scoped>
</style>

html 템플릿

<article>
    <div v-for="guide in guides">
        <h4>{{ guide.title }}</h4>
        <div v-html="guide.description">
        </div>
    </div>
</article>

vue 속성에서 HTML을 렌더링하는 기능을 포함하려면v-html사용자가 HTML의 소스 속성을 변경할 수 있도록 허용하면 XSS 취약성에 대한 보안 문제가 발생합니다.이 경우 데이터를 서버로 반송할 때 입력을 삭제해야 합니다(이 경우 평판이 좋은 외부 라이브러리를 사용하는 것이 좋습니다).사용자가 데이터를 수정하지 않을 경우 보안상의 문제는 없습니다.v-html조금도.

사용자가 모든 종류의 데이터를 수정할 수 있도록 허용할 때마다 잠재적인 보안 문제가 발생할 수 있습니다.이러한 문제가 무엇인지 예측하고 대처하기만 하면 됩니다.

---

2021년 6월 갱신

요점을 명확히 하기 위해 동적 HTML 렌더링이 필요하지 않고 미리 정해진 HTML 템플릿을 렌더링하기 위한 조건부 케이스만 처리해야 하는 경우 Vue 템플릿에 조건부 렌더링을 포함할 수 있습니다.예를 들어 다음과 같습니다.

<script>
    export default {
      name: 'guide-general',
      data: function() {
          return {
              guides: [
                  {
                      title: "first",
                      description: "First description",
                      as_list: false
                  },
                  {
                      title: "second",
                      description: "second description",
                      as_list: false
                  },
                  {
                      title: "third",
                      description: "test",
                      as_list: true
                  }
              ]
          }
      },
      methods: {

      }
  }
</script>

<article>
    <div v-for="guide in guides">
        <h4>{{ guide.title }}</h4>
        <div v-if="guide.as_list">
            <ul>
                <li>{{guide.description}}</li>
            </ul>
        </div>
        <div v-else>{{guide.description}}</div>
    </div>
</article>

즉, 동적 HTML 렌더링이 필요 없고 조건부 HTML 렌더링만 필요한 경우v-if조건부 렌더링이 올바르게 기능할 수 있도록 데이터를 구성합니다.그렇지 않은 경우 사용v-html또는 JSON 데이터를 구조화하여 사전 정의된 컴포넌트를 재귀적으로 생성할 수도 있습니다.<component :is="component.name">(이것은 매우 복잡하기 때문에, 이 답변에서는 자세하게 설명하지 않습니다).

언급URL : https://stackoverflow.com/questions/46782359/vue-js-v-html-alternative