Hiển thị góc html từ máy chủ

Blog này nói về cách chúng tôi có thể hiển thị Html và CSS nhận được từ phía máy chủ. Điều này hữu ích khi chúng tôi hiển thị Html và CSS động cho trang thành phần. Html này không bao gồm bất kỳ sự kiện nào

Hãy bắt đầu. Đầu tiên tôi đang tạo máy chủ nút để tạo API sẽ trả về dữ liệu Html và CSS

tôi đã tạo ứng dụng. js với /getPage API đọc tệp html và css từ máy chủ và trả dữ liệu về giao diện người dùng

Bây giờ chúng ta sẽ tạo Ứng dụng góc bằng lệnh ng new application-name. Chúng tôi sẽ liên kết html bằng thuộc tính InternalHtml

Tạo dịch vụ gọi API để lấy dữ liệu

Html có thể liên kết với thành phần bằng cách sử dụng Internalhtml nhưng css không thể liên kết trực tiếp. Chúng ta cần nối thêm phần tử kiểu mới bằng gói Renderer2 của góc

Sau khi khởi động máy chủ nút này và chạy ứng dụng góc bằng lệnh ng phục vụ. Nó sẽ hiển thị thiết kế và nội dung nhận được từ máy chủ

Vì vậy, bằng cách sử dụng thuộc tính InternalHtml và gói Renderer2 của góc, chúng ta có thể làm cho thành phần động. Bất kỳ nội dung Html và CSS nào nhận được từ máy chủ đều được hiển thị trong thành phần đó

Vì vậy, làm thế nào nó hoạt động?

innerHtml là thuộc tính phần tử HTML đã tồn tại mà Angular có thể liên kết bằng cách sử dụng dấu ngoặc vuông [  [ & ] ]. For example, in your template you may have something like this:

Đây có phải là điều tôi nên làm không?

Co le không. Đối với HTML do người dùng tạo hoặc HTML đến từ phản hồi API, có thể không có tùy chọn nào khác. Đối với HTML được kết xuất động, có thể có một tùy chọn thân thiện với Góc khác

Việc cho phép người dùng hoặc API bên ngoài ra lệnh cho HTML được hiển thị trong ứng dụng của bạn có thể gây ra một số do dự. Tuy nhiên, Angular cung cấp một số bảo mật bổ sung xung quanh nội dung HTML ràng buộc bằng cách vệ sinh HTML trước khi hiển thị nó. Nếu giá trị HTML chứa thẻ , thì Angular theo mặc định sẽ không hiển thị dưới dạng HTML.

Đây có phải là điều tôi nên làm không?

Co le không. Đối với HTML do người dùng tạo hoặc HTML đến từ phản hồi API, có thể không có tùy chọn nào khác. Đối với HTML được kết xuất động, có thể có một tùy chọn thân thiện với Góc khác

Việc cho phép người dùng hoặc API bên ngoài ra lệnh cho HTML được hiển thị trong ứng dụng của bạn có thể gây ra một số do dự. Tuy nhiên, Angular cung cấp một số bảo mật bổ sung xung quanh nội dung HTML ràng buộc bằng cách vệ sinh HTML trước khi hiển thị nó. Nếu giá trị HTML chứa thẻ , thì Angular theo mặc định sẽ không hiển thị dưới dạng HTML.

Hãy xem ví dụ hoạt động này được lấy từ Tài liệu góc

Nếu bạn cố gắng hiển thị thẻ thông qua phép nội suy [{{ & }} . Nếu bạn cố gắng kết xuất nó bằng cách sử dụng liên kết thuộc tính, Angular sẽ bỏ qua giá trị trong mẫu và ghi lại cảnh báo này trong bảng điều khiển. ], Angular will render the value as text. If you attempt to render it using property binding, Angular ignores the value in the template and logs this warning in the console:

"CẢNH BÁO. khử trùng HTML đã loại bỏ một số nội dung [xem http. //g. co/ng/an ninh#xss]. ”

Angular đang sử dụng một lớp có tên là DomSanitizer để xử lý tất cả những điều này nhưng nó có một số nhược điểm. Đối với trường hợp sử dụng tiềm năng của chúng tôi về hiển thị HTML do người dùng tạo, nếu người dùng đã thêm thẻ hoặc kiểu nội tuyến trên các phần tử của họ, thì nó sẽ không có . StackBlitz example.

Cứu giúp

Một cách để vượt qua thử thách này là tự tạo ống vệ sinh. . . . . . . . . . . . . . . . . . . . . . . . .

Bằng cách sử dụng phương thức DomSanitizer của bypassSecurityTrustHtml, . bỏ qua bảo mật/vệ sinh mặc định của Angular và tin tưởng vào giá trị HTML đã nhập. Trong mẫu, thêm đường ống của bạn.

Và phong cách của bạn sẽ có hiệu lực. Xem toàn bộ ví dụ tại đây.

một sự thay thế

Nếu bạn đang hiển thị động 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 theo cách an toàn hơn không? . example.

Trong ứng dụng này, tôi đang sử dụng thư viện dịch ngx-dịch . Tôi có tiêu đề, bộ chọn ngôn ngữ và liên kết được hiển thị động.

Để tái cấu trúc điều này theo cách tiếp cận mà không cần innerHtml ,

1. Cập nhật từng tệp dịch để có “SXM_LINK. VĂN BẢN”, “SXM_LINK. LANG” và “SXM_LINK. URL” thay vì “SXM_LINK”

Với innerHtml.

Không có

2. Cập nhật mẫu thành phần để sử dụng thẻ với các khóa dịch đó thay cho