Проблема углового размера изображения в контенте ckeditor

Question

Я использую CKEditor для создания Rich Text Fields, которые хранятся в базе данных моего сервера.Моя проблема: когда я добавляю изображения в эти поля с помощью CKEditor, атрибуты ширины и высоты задаются с помощью CSS в теге стиля, например так:

<img
  alt=""
  src="https://something.cloudfront.net/something.jpg" 
  style="height:402px; width:716px"
/>

И когда я пытаюсь отобразить поле Rich Text Field, содержащееприведенный выше код в angular, например, такой:

<p class="card-text" [innerHTML]="blogEntry.content"></p>

Angular создает следующий код без включения встроенного CSS, который содержит свойства высоты и ширины:

<img alt="" src="https://something.cloudfront.net/something.jpg">

Это приводит к отображению изображенияв оригинальном размере независимо от свойств высоты и ширины, установленных с помощью CKEditor.

Я не хочу, чтобы свойства высоты и ширины отбрасывались.Каково было бы идеальное решение этой проблемы?Я буду рад, если вы можете помочь.Спасибо.

Answer 1

Вы должны установить правильный контекст безопасности для содержимого, которое вы вводите.

По умолчанию angular очищает все, что вы вводите в ваш HTML.Но учтите, что это потенциальная угроза безопасности

См. https://angular.io/guide/security для получения всей информации о настройках безопасности angular.

См. https://angular.io/guide/security#bypass-security-apis о том, как обойти защитуcontext.

А вот пример функции, которую вы можете использовать в своем компоненте:

constructor(private sanitizer: DomSanitizer) {}

public createTrustedHtml(blogContent: string) {
   return this.sanitizer.bypassSecurityTrustHtml(blogContent);
}

и в своем шаблоне

<p class="card-text" [innerHTML]="createTrustedHtml(blogEntry.content)"></p>

Всегда помните ориск, связанный с обходом контекста безопасности angular по умолчанию!Используйте его, только если вы доверяете контенту на 100%.это может создать потенциальные угрозы безопасности и открыть двери для атак XSSI и CSRF / XSRF.