Links created in rich text editor (Quilljs) in angular is not clickable in Angular Production Environment

Question

I have been using the QuillJs editor in angular, the links added in editor works fine in local environment , it opens new tab and all, but in production env it doesnt open or open in new tab, i have to right click the link and open in new tab, am using Angular 16

this is the response received from api

 "items": [
        {
            "commentId": 212,
            "masterId": 576,
   

     "masterType": 35,
        "commentDescription": "<p><a href=\"https://www.google.com\" rel=\"noopener noreferrer\" target=\"_blank\">google link</a></p>",
        "parentCommentId": 0,
        "tagList": "",
        "isActive": 1,
        "isDeleted": 0,
        "createdBy": "Sumit Gore",
        "createdOn": "2024-10-15T11:07:24.46",
        "modifiedBy": "2",
        "modifiedOn": "2024-10-15T11:10:20.087",
        "actionUser": null,
        "pageNo": 1,
        "pageSize": 10,
        "rowNum": 0,
        "totalCount": 0,
        "whereClause": null,
        "orderByClause": null
    }

]

<ul class="p-0">
            <li class="commentList position-relative" *ngFor="let commentData of commentsList">
                <div class="userName">
                    <p>{{getInitials(commentData.createdBy)}}</p>
                </div>
                <div>
                    <span class="font-sb d-inline-block me-2">{{commentData.createdBy}}</span>
                    <span class="font-r editedBadge" *ngIf="commentData.modifiedBy"
                        ngbTooltip="{{ commentData.modifiedOn | date:'MM-dd-YYYY' }} at {{ commentData.modifiedOn | date:'hh:mm:ss a' }}"
                        placement="auto">
                        Edited
                    </span>
                    <p class="mt-1" style="font-size:12px; color: #9D9D9D;">
                        {{commentData.createdOn | date:'MM-dd-YYYY'}} | {{commentData.createdOn | date:'hh:mm:ss a'}}
                    </p>
                    <div class="mt-1 w-100" style="word-break: break-all;" [innerHTML]="sanitizeHtml(commentData.commentDescription)"></div>

                </div>
                <div class="commentActionBtn ml-auto mr-2" *ngIf="commentData.createdBy == User.userName">
                    <i class="bi bi-pencil-square me-2" (click)="editComment(commentData)"></i>
                    <i class="bi bi-trash" (click)="deleteComment(commentData)"></i>
                </div>
            </li>
        </ul>

I dont have any idea whats wrong

Answer 1

The critical part is this:

sanitizeHtml(commentData.commentDescription)

your commentDescription contains an <a>-tag, but that gets sanitized away. To solve this, you need to either change the server to not return html or trust the server to serve safe html (and no XSS-attacks). If neither of this is possible, you can also allow specific tags to go unsanitized. Read here for an example.

Though the cleanest thing to do would be to have the server return the link (as plaintext) and add the link-tags in your own html. No escaping necessary, clear separation of concerns.

---

Now why did this work in your 'local environment'? Not sure. Probably some kind of tool you have locally made everything clickable that looks like a link.