Hình ảnh v-html

Vue. js để thêm các chỉ thị bảo mật HTML

////////// JS for Vue 2.x \\\\\\\\\\

import Vue from 'vue';
import VueSecureHTML from 'vue-html-secure';

Vue.use[VueSecureHTML];

// Optional
// Vue.prototype.$safeHTML = VueSecureHTML.safeHTML;
// Vue.prototype.$escapeHTML = VueSecureHTML.escapeHTML;
// Vue.prototype.$removeHTML = VueSecureHTML.removeHTML;

const App = new Vue[{
    el: '#app',
    data[] {
        return {
            message : "Hello  VUE",
        }
    },
}];
3,
////////// JS for Vue 2.x \\\\\\\\\\

import Vue from 'vue';
import VueSecureHTML from 'vue-html-secure';

Vue.use[VueSecureHTML];

// Optional
// Vue.prototype.$safeHTML = VueSecureHTML.safeHTML;
// Vue.prototype.$escapeHTML = VueSecureHTML.escapeHTML;
// Vue.prototype.$removeHTML = VueSecureHTML.removeHTML;

const App = new Vue[{
    el: '#app',
    data[] {
        return {
            message : "Hello  VUE",
        }
    },
}];
4,
////////// JS for Vue 2.x \\\\\\\\\\

import Vue from 'vue';
import VueSecureHTML from 'vue-html-secure';

Vue.use[VueSecureHTML];

// Optional
// Vue.prototype.$safeHTML = VueSecureHTML.safeHTML;
// Vue.prototype.$escapeHTML = VueSecureHTML.escapeHTML;
// Vue.prototype.$removeHTML = VueSecureHTML.removeHTML;

const App = new Vue[{
    el: '#app',
    data[] {
        return {
            message : "Hello  VUE",
        }
    },
}];
5 là các lựa chọn thay thế an toàn cho
////////// JS for Vue 2.x \\\\\\\\\\

import Vue from 'vue';
import VueSecureHTML from 'vue-html-secure';

Vue.use[VueSecureHTML];

// Optional
// Vue.prototype.$safeHTML = VueSecureHTML.safeHTML;
// Vue.prototype.$escapeHTML = VueSecureHTML.escapeHTML;
// Vue.prototype.$removeHTML = VueSecureHTML.removeHTML;

const App = new Vue[{
    el: '#app',
    data[] {
        return {
            message : "Hello  VUE",
        }
    },
}];
0 chính thức. Việc sử dụng
////////// JS for Vue 2.x \\\\\\\\\\

import Vue from 'vue';
import VueSecureHTML from 'vue-html-secure';

Vue.use[VueSecureHTML];

// Optional
// Vue.prototype.$safeHTML = VueSecureHTML.safeHTML;
// Vue.prototype.$escapeHTML = VueSecureHTML.escapeHTML;
// Vue.prototype.$removeHTML = VueSecureHTML.removeHTML;

const App = new Vue[{
    el: '#app',
    data[] {
        return {
            message : "Hello  VUE",
        }
    },
}];
0 chính thức có thể dễ dàng dẫn đến các cuộc tấn công XSS và chỉ được sử dụng trên nội dung đáng tin cậy chứ không bao giờ sử dụng trên nội dung do người dùng cung cấp. Hầu hết các thư viện JavaScript phổ biến để làm sạch các chuỗi HTML đều quá lớn [từ vài trăm KB đến vài MB] với nhiều phụ thuộc. Plugin này rất nhẹ [chỉ có kích thước đóng gói 2kB] mà không cần phụ thuộc. Tính năng chính là bảo mật chuỗi HTML để tránh các cuộc tấn công XSS như
////////// JS for Vue 2.x \\\\\\\\\\

import Vue from 'vue';
import VueSecureHTML from 'vue-html-secure';

Vue.use[VueSecureHTML];

// Optional
// Vue.prototype.$safeHTML = VueSecureHTML.safeHTML;
// Vue.prototype.$escapeHTML = VueSecureHTML.escapeHTML;
// Vue.prototype.$removeHTML = VueSecureHTML.removeHTML;

const App = new Vue[{
    el: '#app',
    data[] {
        return {
            message : "Hello  VUE",
        }
    },
}];
2 hoặc
////////// JS for Vue 2.x \\\\\\\\\\

import Vue from 'vue';
import VueSecureHTML from 'vue-html-secure';

Vue.use[VueSecureHTML];

// Optional
// Vue.prototype.$safeHTML = VueSecureHTML.safeHTML;
// Vue.prototype.$escapeHTML = VueSecureHTML.escapeHTML;
// Vue.prototype.$removeHTML = VueSecureHTML.removeHTML;

const App = new Vue[{
    el: '#app',
    data[] {
        return {
            message : "Hello  VUE",
        }
    },
}];
3

Cài đặt

Để cài đặt với npm hoặc sợi, hãy sử dụng

___

npm install --save vue-html-secure

// or

yarn add vue-html-secure

Chỉ thị và chức năng

v-html-an toàn=". " hoặc $safeHTML[. ]

This leaves all HTML tags except for and removes insecure elements's attributes starting "on*" and also values starting "javascript:*".

v-html-thoát=". " hoặc $escapeHTML[. ]

Điều này thay thế các ký tự

////////// JS for Vue 2.x \\\\\\\\\\

import Vue from 'vue';
import VueSecureHTML from 'vue-html-secure';

Vue.use[VueSecureHTML];

// Optional
// Vue.prototype.$safeHTML = VueSecureHTML.safeHTML;
// Vue.prototype.$escapeHTML = VueSecureHTML.escapeHTML;
// Vue.prototype.$removeHTML = VueSecureHTML.removeHTML;

const App = new Vue[{
    el: '#app',
    data[] {
        return {
            message : "Hello  VUE",
        }
    },
}];
4,
////////// JS for Vue 2.x \\\\\\\\\\

import Vue from 'vue';
import VueSecureHTML from 'vue-html-secure';

Vue.use[VueSecureHTML];

// Optional
// Vue.prototype.$safeHTML = VueSecureHTML.safeHTML;
// Vue.prototype.$escapeHTML = VueSecureHTML.escapeHTML;
// Vue.prototype.$removeHTML = VueSecureHTML.removeHTML;

const App = new Vue[{
    el: '#app',
    data[] {
        return {
            message : "Hello  VUE",
        }
    },
}];
5,
////////// JS for Vue 2.x \\\\\\\\\\

import Vue from 'vue';
import VueSecureHTML from 'vue-html-secure';

Vue.use[VueSecureHTML];

// Optional
// Vue.prototype.$safeHTML = VueSecureHTML.safeHTML;
// Vue.prototype.$escapeHTML = VueSecureHTML.escapeHTML;
// Vue.prototype.$removeHTML = VueSecureHTML.removeHTML;

const App = new Vue[{
    el: '#app',
    data[] {
        return {
            message : "Hello  VUE",
        }
    },
}];
6 thành các thực thể HTML thích hợp
////////// JS for Vue 2.x \\\\\\\\\\

import Vue from 'vue';
import VueSecureHTML from 'vue-html-secure';

Vue.use[VueSecureHTML];

// Optional
// Vue.prototype.$safeHTML = VueSecureHTML.safeHTML;
// Vue.prototype.$escapeHTML = VueSecureHTML.escapeHTML;
// Vue.prototype.$removeHTML = VueSecureHTML.removeHTML;

const App = new Vue[{
    el: '#app',
    data[] {
        return {
            message : "Hello  VUE",
        }
    },
}];
7,
////////// JS for Vue 2.x \\\\\\\\\\

import Vue from 'vue';
import VueSecureHTML from 'vue-html-secure';

Vue.use[VueSecureHTML];

// Optional
// Vue.prototype.$safeHTML = VueSecureHTML.safeHTML;
// Vue.prototype.$escapeHTML = VueSecureHTML.escapeHTML;
// Vue.prototype.$removeHTML = VueSecureHTML.removeHTML;

const App = new Vue[{
    el: '#app',
    data[] {
        return {
            message : "Hello  VUE",
        }
    },
}];
8,
////////// JS for Vue 2.x \\\\\\\\\\

import Vue from 'vue';
import VueSecureHTML from 'vue-html-secure';

Vue.use[VueSecureHTML];

// Optional
// Vue.prototype.$safeHTML = VueSecureHTML.safeHTML;
// Vue.prototype.$escapeHTML = VueSecureHTML.escapeHTML;
// Vue.prototype.$removeHTML = VueSecureHTML.removeHTML;

const App = new Vue[{
    el: '#app',
    data[] {
        return {
            message : "Hello  VUE",
        }
    },
}];
9. Điều này không thoát khỏi dấu ngoặc đơn hoặc dấu ngoặc kép cho việc sử dụng chuỗi trong thuộc tính HTML [không phải mục đích của plugin này để làm điều đó]. Lưu ý rằng trong trường hợp
////////// JS for Vue 2.x \\\\\\\\\\

import Vue from 'vue';
import VueSecureHTML from 'vue-html-secure';

Vue.use[VueSecureHTML];

// Optional
// Vue.prototype.$safeHTML = VueSecureHTML.safeHTML;
// Vue.prototype.$escapeHTML = VueSecureHTML.escapeHTML;
// Vue.prototype.$removeHTML = VueSecureHTML.removeHTML;

const App = new Vue[{
    el: '#app',
    data[] {
        return {
            message : "Hello  VUE",
        }
    },
}];
4, bạn có thể trực tiếp sử dụng chính thức
////////// JS for Vue 2.x \\\\\\\\\\

import Vue from 'vue';
import VueSecureHTML from 'vue-html-secure';

Vue.use[VueSecureHTML];

// Optional
// Vue.prototype.$safeHTML = VueSecureHTML.safeHTML;
// Vue.prototype.$escapeHTML = VueSecureHTML.escapeHTML;
// Vue.prototype.$removeHTML = VueSecureHTML.removeHTML;

const App = new Vue[{
    el: '#app',
    data[] {
        return {
            message : "Hello  VUE",
        }
    },
}];
11, nhưng sử dụng chức năng có thể có ý nghĩa e. g. ____________ 112

V là gì

Chỉ thị v-html là a Vue. chỉ thị js được sử dụng để cập nhật HTML bên trong của phần tử với dữ liệu của chúng tôi . Đây là những gì phân biệt nó với văn bản v, điều đó có nghĩa là trong khi văn bản v chấp nhận chuỗi và coi nó là một chuỗi, nó sẽ chấp nhận chuỗi và hiển thị nó thành HTML.

Làm cách nào để thêm HTML vào Vue?

Cách đơn giản nhất để bắt đầu với Vue là lấy tập lệnh phiên bản phát triển cho Vue và thêm tập lệnh đó vào thẻ đầu của tệp HTML . Sau đó, bạn có thể bắt đầu mã Vue bên trong tệp HTML bên trong thẻ script. Và để mã Vue kết nối với một phần tử hiện có trên trang HTML của bạn.

Tôi có nên sử dụng V

Hiển thị động HTML tùy ý trên trang web của bạn có thể rất nguy hiểm vì nó có thể dễ dàng dẫn đến các cuộc tấn công XSS. Chỉ sử dụng v-html trên nội dung đáng tin cậy và không bao giờ sử dụng trên nội dung do người dùng cung cấp .

V là gì

v-text đặt textContent của nút . v-html đặt HTML bên trong của phần tử. & là một thực thể HTML. Nếu bạn muốn diễn giải và thay thế các thực thể HTML, bạn cần diễn giải chúng dưới dạng HTML chứ không phải văn bản.

Chủ Đề