Nuxt v-html

Chúng ta phải luôn vệ sinh các giá trị đầu vào của người dùng trên máy chủ. Chỉ vệ sinh với Vue trong những trường hợp cần thiết (e. g xem trước đánh dấu)

Cài đặt

npm install --save v-sanitize

hoặc là

yarn add v-sanitize

Cách sử dụng

Đăng ký plugin

import Vue from 'vue';
import VSanitize from "v-sanitize";

Vue.use(VSanitize);

Sử dụng với NuxtJS

yarn add v-sanitize

1

export default {
  modules: [
    ['v-sanitize/nuxt', { /* options */ }]
  ],
  sanitize: { /* options */ }
}

Bạn cũng có thể vượt qua các tùy chọn mặc định

defaultOptions = {
    allowedTags: ['a', 'b'],
    allowedAttributes: {
      'a': [ 'href' ]
    }
};
Vue.use(VSanitize, defaultOptions);

Sử dụng nó trong các thành phần của bạn

<template>
  <div contenteditable="true" @paste="sanitize">div>
template>

<script>
export default {
  methods: {
    sanitize(event) {
      event.preventDefault();
      const html = this.$sanitize(event.clipboardData.getData('text/html'));
      //or
      //const html = this.$sanitize(
      //  event.clipboardData.getData('text/html'),
      //  {
      //    allowedTags: ['b', 'br']
      //  }
      //);
      document.execCommand('insertHTML', false, (html));
    }
  },
}
script>

API

yarn add v-sanitize 2

tùy chọn

• Loại.

  yarn add v-sanitize
  

  3

Plugin này phụ thuộc vào sanitize-html. Chi tiết xem tại đây

yarn add v-sanitize 4

dơ bẩn

• Loại.

  yarn add v-sanitize
  

  5
• Yêu cầu.

  yarn add v-sanitize
  

  6

tùy chọn

• Loại.

  yarn add v-sanitize
  

  3

Nếu bạn không vượt qua một tùy chọn, các tùy chọn mặc định sẽ được sử dụng

yarn add v-sanitize

8

Trở lại

yarn add v-sanitize

9

chỉ thị

Mặc định của Vue

import Vue from 'vue';
import VSanitize from "v-sanitize";

Vue.use(VSanitize);

0 không nhạy cảm với HTML, trong khi

import Vue from 'vue';
import VSanitize from "v-sanitize";

Vue.use(VSanitize);

1 không thực hiện vệ sinh theo mặc định

import Vue from 'vue';
import VSanitize from "v-sanitize";

Vue.use(VSanitize);

2 là một lệnh Vue để làm sạch HTML, được hỗ trợ bởi sanitize-html linh hoạt. Lệnh có thể nhận được một chuỗi, chuỗi này sẽ trải qua quá trình làm sạch một phần nếu không có bộ sửa đổi nào hoặc một mảng gồm hai phần tử, phần đầu tiên là danh sách trắng

import Vue from 'vue';
import VSanitize from "v-sanitize";

Vue.use(VSanitize);

3 (biết thêm tại đây) và phần thứ hai là chuỗi cần được làm sạch

<div v-sanitize="unsafe_html">div>

Tách tất cả các thẻ (_______2_______4 công cụ sửa đổi)

Xóa tất cả các thẻ HTML, chỉ giữ lại nội dung văn bản

<span v-sanitize.strip="unsafe_html">span>

Xóa các thẻ không an toàn (mặc định/ công cụ sửa đổi import Vue from 'vue'; import VSanitize from "v-sanitize"; Vue.use(VSanitize);5)

Cho phép một số thẻ HTML, nhưng xóa nội dung không an toàn, chẳng hạn như thẻ

import Vue from 'vue';
import VSanitize from "v-sanitize";

Vue.use(VSanitize);

6 và

import Vue from 'vue';
import VSanitize from "v-sanitize";

Vue.use(VSanitize);

7

<span v-sanitize.basic="unsafe_html">span> = <span v-sanitize="unsafe_html">span>

Giữ kiểu nội tuyến (_______2_______8 công cụ sửa đổi)

Loại bỏ hầu hết các thẻ, chỉ giữ lại định dạng nội tuyến và

import Vue from 'vue';
import VSanitize from "v-sanitize";

Vue.use(VSanitize);

9 thẻ

<span v-sanitize.inline="unsafe_html">span>

Cho phép tất cả các thẻ (công cụ sửa đổi _______4_______0)

Cho phép tất cả các thẻ HTML, không thực hiện vệ sinh. Đối với tất cả các hiệu ứng, nó là sự thay thế cho

import Vue from 'vue';
import VSanitize from "v-sanitize";

Vue.use(VSanitize);

1

yarn add v-sanitize

0

Thay đổi nhật ký

Vui lòng xem CHANGELOG để biết thêm thông tin về những thay đổi gần đây

Bảo vệ

Nếu bạn phát hiện ra bất kỳ vấn đề nào liên quan đến bảo mật, vui lòng gửi email cho chantouchsek. cs83@gmail. com thay vì sử dụng trình theo dõi vấn đề

Nuxt có tốt hơn Nextjs không?

Làm cách nào để sử dụng HTML trong Vue?

Nuxt có dễ hơn Vue không?

Thẻ V HTML là gì?