feat: render sanitized HTML for articles to improve security and content display

Author: emp74ark

src/app/pages/article-page/article-page.component.html

@@ -27,8 +27,7 @@
       </mat-toolbar-row>
     </mat-toolbar>
     <h2>{{ article()?.title }}</h2>
-    <p>
-      {{ article()?.contentSnippet }}
+    <p [innerHtml]="safeHtml(article()?.content)">
     </p>
     <mat-divider/>
     @if (article()?.categories?.length) {

src/app/pages/article-page/article-page.component.ts

@@ -15,6 +15,7 @@ import { DatePipe } from '@angular/common'
 import { HttpErrorResponse } from '@angular/common/http'
 import { TagService } from '../../services/tag-service'
 import { TitleService } from '../../services/title-service'
+import { DomSanitizer, SafeHtml } from '@angular/platform-browser'
 
 @Component({
   selector: 'app-article',
@@ -38,6 +39,7 @@ export class ArticlePage implements OnInit {
   route = inject(ActivatedRoute)
   titleService = inject(TitleService)
   destroyRef = inject(DestroyRef)
+  domSanitizer = inject(DomSanitizer)
 
   article = signal<Article | null>(null)
 
@@ -47,6 +49,13 @@ export class ArticlePage implements OnInit {
     return !!this.article()?.read
   })
 
+  safeHtml(html?: string): SafeHtml | undefined {
+    if (!html) {
+      return
+    }
+    return this.domSanitizer.bypassSecurityTrustHtml(html)
+  }
+
   ngOnInit() {
     this.route.params
       .pipe(

src/app/pages/home/home-page.component.html

@@ -37,7 +37,7 @@
       </mat-card-header>
       @if (display() !== 'title') {
         <mat-card-content>
-          <p>{{ a.contentSnippet }}</p>
+          <p [innerHtml]="safeHtml(a.content)"></p>
         </mat-card-content>
       }
       <mat-card-actions>

src/app/pages/home/home-page.component.ts

@@ -18,6 +18,7 @@ import { TagService } from '../../services/tag-service'
 import { Tag } from '../../entities/tag/tag.types'
 import { MatChipOption, MatChipSet } from '@angular/material/chips'
 import { TitleService } from '../../services/title-service'
+import { DomSanitizer, SafeHtml } from '@angular/platform-browser'
 
 @Component({
   selector: 'app-home',
@@ -45,6 +46,7 @@ export class HomePage implements OnInit {
   destroyRef = inject(DestroyRef)
   tagService = inject(TagService)
   titleService = inject(TitleService)
+  htmlSanitizer = inject(DomSanitizer)
 
   articles = signal<Article[]>([])
   articleIds = computed(() => this.articles().map(({ _id }) => _id))
@@ -130,6 +132,10 @@ export class HomePage implements OnInit {
     this.display.set(display)
   }
 
+  safeHtml(html: string): SafeHtml {
+    return this.htmlSanitizer.bypassSecurityTrustHtml(html)
+  }
+
   async onArticleClick(article: Article) {
     await this.router.navigate(['subscription', article.subscriptionId, 'article', article._id])
   }