Vue thoát html

Là một phần trong mục tiêu của tôi để tìm hiểu thêm về Vue [và thành thật mà nói, tìm những thứ để viết blog], tôi đã xem qua bài đăng StackOverflow thú vị này. Cách vệ sinh HTML nhận được từ lệnh gọi API trong Vue. js. Tôi đã tìm kiếm nhanh trên Google và bắt gặp một thư viện nhỏ xinh giúp việc này trở nên dễ dàng - vue-sanitize. Tôi nghĩ sẽ rất tuyệt nếu dùng thử [đặc biệt là khi tôi đang đề xuất nó như một giải pháp] nên tôi đã tạo một bản demo nhanh

Tuy nhiên, trước khi tôi bắt đầu, bạn nên nhớ cách Vue xử lý HTML trong dữ liệu nói chung. Hãy xem xét các dữ liệu sau

message:`
My milkshake brings all the boys to the yard

And they're like, it's better than yours
`

Đây là một chuỗi có ba thẻ HTML trong đó. Không có gì đáng sợ, nhưng hãy xem điều gì sẽ xảy ra nếu bạn thử xuất nó

  

    {{ message }}
  

Điều này sẽ trở lại

Sữa lắc của tôi mời tất cả các cậu bé đến sân
Và chúng nói rằng, nó ngon hơn của bạn

Như bạn có thể thấy, HTML đã thoát. Không lý tưởng, phải không?

Điều này sẽ trả lại những gì bạn mong đợi. Mát mẻ. Nhưng mà. nó rất đen và trắng. Bạn thoát khỏi tất cả HTML hoặc cho phép tất cả HTML. Nếu bạn muốn một cái gì đó ở giữa thì sao? . Nó không chỉ cho phép bạn sử dụng danh sách trắng các thẻ HTML "an toàn", mà còn xóa các thẻ không được phép thay vì thoát khỏi chúng

Sử dụng nó khá đơn giản và có trong tài liệu. Thêm gói NPM và sau khi hoàn tất, bạn có thể thêm gói đó vào Vue của mình. mã js. Từ những gì tôi có thể thấy, không có hỗ trợ nào cho "vue thẻ tập lệnh", vì vậy bạn sẽ cần phải có một ứng dụng Vue phù hợp

Ngoài ra, chỉ có một API chính,

  

    {{ message }}
  

4. Điều này sẽ trả về một chuỗi đã xóa các thẻ HTML không an toàn. Tất nhiên, bạn vẫn cần sử dụng

  

    {{ message }}
  

3 để hiển thị HTML an toàn

Các tài liệu không đề cập đến các giá trị mặc định, nhưng khi thư viện bao bọc một thư viện khác, sanitize-html, bạn có thể kiểm tra tài liệu của họ để biết các giá trị mặc định

Để tôi minh họa một ví dụ trước khi trình bày cách bạn có thể tùy chỉnh các giá trị mặc định. Đầu tiên, chính của tôi. js, vừa tải trong thư viện

import Vue from "vue";
import App from "./App.vue";

import VueSanitize from "vue-sanitize";

Vue.use[VueSanitize];

Vue.config.productionTip = false;

new Vue[{
  render: h => h[App]
}].$mount["#app"];

Và bây giờ bài kiểm tra của tôi

  

    Escaped: {{ message }}
    

    
    
    
  




export default {
  name: "App",
  data[] {
    return {
      message:`
        My milkshake brings all the boys to the yard

        And they're like, it's better than yours
      `
    }    
  },
  computed:{
    cleanMessage[] {
      return this.$sanitize[this.message];
    }
  }
};

Vì vậy, tôi bắt đầu với hai thử nghiệm đơn giản liên quan đến những gì tôi đã nói trước đây - hành vi mặc định trong Vue và việc sử dụng

  

    {{ message }}
  

3. Tôi không sử dụng mã vệ sinh cho đến ngày

  

    {{ message }}
  

0. Tôi đã bị ràng buộc với một giá trị được tính toán trả về phiên bản đã được làm sạch. đầu ra là

Trong trường hợp này, không có sự khác biệt giữa phiên bản tích hợp sẵn và phiên bản vệ sinh. Tôi chỉ sử dụng ba thẻ HTML đơn giản. Hãy xem điều gì sẽ xảy ra khi chúng ta thay đổi các giá trị mặc định

Để thay đổi các giá trị mặc định, bạn tạo đối tượng của riêng mình có chứa các giá trị mặc định mà bạn muốn. Trang web sanitize-html chính có một số ví dụ hay về cách sửa đổi một chút giá trị mặc định được tích hợp sẵn. Đối với thử nghiệm của tôi, tôi muốn cho phép mọi thứ mặc định được phép, ngoại trừ thẻ

  

    {{ message }}
  

1. Đây là cách tôi đã làm nó

import Vue from "vue";
import App from "./App.vue";

import VueSanitize from "vue-sanitize";

let defaults = VueSanitize.defaults;

defaults.allowedTags = defaults.allowedTags.filter[t => {
  return t !== 'strong';
}];

Vue.use[VueSanitize,defaults];

Vue.config.productionTip = false;

new Vue[{
  render: h => h[App]
}].$mount["#app"];

Về cơ bản - lặp qua mảng của

  

    {{ message }}
  

2 và xóa khi tên thẻ là

  

    {{ message }}
  

3. Sẽ dễ dàng hơn nếu bạn chỉ muốn xác định một danh sách ngắn các thẻ bạn muốn - chỉ cần chuyển một chuỗi các chuỗi

Kết quả là như bạn mong đợi

Lưu ý rằng thẻ

  

    {{ message }}
  

1 không được thoát, nó đã bị xóa. Điều đó tốt hơn nhiều so với việc thoát khỏi nó [thông thường]. Tôi có thể thấy điều này thực sự hữu ích khi cho phép tất cả các thẻ định dạng nhưng loại bỏ

  

    {{ message }}
  

5 chẳng hạn. [Và

  

    {{ message }}
  

6 và có lẽ là của những người khác tôi đã quên mất. ]

Dù sao, tôi hy vọng điều này là hữu ích. Tôi có một CodeSandbox với cái này đang chạy và bạn có thể chơi với nó bên dưới