Tôi đang có một Util.ts xác định chức năng định dạng như dưới đây. Vấn đề là trên thẻ nhỏ có thuộc tính kiểu.
export const formatMessage = [message ] =>{
return '' + message.name+" " +message.ts + ' ' + message.c;
}
Tuy nhiên, khi kết xuất thuộc tính kiểu của thẻ nhỏ đang bị xóa.
Tôi không chắc tại sao hành vi này, mẫu chuỗi HTML được trả về bởi hàm định dạng được gắn vào HTML bằng cách sử dụng bên trong div như được hiển thị ở đây.
-
Tại sao thuộc tính kiểu này bị xóa [trong khi thuộc tính lớp ở lại] và làm thế nào để tôi giải quyết vấn đề?
Một thay thế
Nếu bạn tự động hiển thị một số nội dung HTML trong ứng dụng của mình, bạn có thể đã sử dụng InternalHTML, nhưng điều này có thể được thực hiện một cách an toàn hơn không? Hãy cùng xem ví dụ này.example.
Trong ứng dụng này, tôi đã sử dụng thư viện dịch Ngx-dịch. Tôi có một tiêu đề, bộ chọn ngôn ngữ và một liên kết được hiển thị động.ngx-translate. I have a header, language selector, and a dynamically rendered link.
Để tái cấu trúc điều này theo cách tiếp cận mà không có bên trong,innerHtml,
1. Cập nhật từng tệp dịch để có SXM_LINK.TEXT ,,
Với bên tronginnerHtml:
Ảnh của Clark Tibbs trên unplashBây giờ bạn có thể sử dụng máy chủ nút để chạy tập lệnh ..
Kiểu dáng nội tuyến và liên kết linh hoạt
Angular tích hợp hỗ trợ các lỗ hổng và tấn công trong một ứng dụng web như kịch bản trang web chéo, tuy nhiên đôi khi trong ứng dụng của chúng tôi, chúng tôi muốn hiển thị chuỗi HTML thông qua việc bỏ qua bảo mật của Angular.
Để bỏ qua bảo mật, chính Angular cung cấp một số phương thức và chỉ thị mà chúng ta có thể hiển thị hoặc hiển thị chuỗi HTML trong góc.
Có hai cách để hiển thị chuỗi HTML
- Chỉ thị InnerHTML - chỉ hiển thị các thẻ HTML đơn giản và thẻ kiểu
- Domsanitizer - Kết xuất HTML với thẻ kiểu và thẻ kiểu nhưng cũng xóa các tập lệnh
Cú pháp đơn giản cho
-
0
Cú pháp đơn giản cho
-
1 this.safehtmlStr=dom.bypassSecurityTrustHtml[this.html];
Ví dụ 1: InsideHtml để hiển thị chuỗi
import { Component } from '@angular/core';
@Component[{
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
}]
export class AppComponent {
title = 'newapp';
html:string="String with color:red
google.comalert['aa']"
constructor[]{
}
}
và HTML
Simple HTML only without style[Removed]
Ví dụ 2: InsideHtml để hiển thị chuỗi
import { Component } from '@angular/core';
import { DomSanitizer, SafeHtml } from '@angular/platform-browser';
@Component[{
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
}]
export class AppComponent {
title = 'newapp';
html:string="a{ color:green}String with color:red
google.comalert['aa']"
safehtmlStr:SafeHtml;
constructor[ public dom:DomSanitizer]{
this.safehtmlStr=dom.bypassSecurityTrustHtml[this.html];
}
}
và HTML
HTML With style
Ví dụ 2: InsideHtml để hiển thị chuỗi
Hiển thị chuỗi HTML trong góc
Như bạn có thể thấy, chúng tôi đã sử dụng ở đây
-
1 và phương pháp của nó
-
3 để vệ sinh chuỗi HTML nhưng nó loại bỏ thẻ tập lệnh và chỉ giữ kiểu HTML và nội tuyến.
-
-
Tạo một đường ống cho HTML an toàn để sử dụng toàn cầu
import { Pipe, PipeTransform } from '@angular/core';
import { DomSanitizer, SafeHtml } from '@angular/platform-browser';
@Pipe[{
name: 'safehtml'
}]
export class SafePipe implements PipeTransform {
constructor[protected sanitizer: DomSanitizer] {}
public transform[value: any]: SafeHtml {
return this.sanitizer.bypassSecurityTrustHtml[value];
}
}
Chúng tôi cũng có thể tạo một đường ống cho HTML an toàn để chúng tôi có thể sử dụng nó trên toàn cầu trong ứng dụng của chúng tôi như dưới đây
HTML with pipe
và trong HTML
Ví dụ trực tiếp: