angular-editor
angular-editor copied to clipboard
kolkov
Feature request: Paste event for custom sanitation
angular-editor along with Angular built-in sanitation mechanism had already sanitized and filtered out some unsafe content. However, I would further sanitize with my own algorithm or using some 3rd party lib. This is to prevent users from pasting some excessive and naughty styling from other pages.
TinyMCE by default remove most naughty styling.
To replicate problem, go to https://tracehubslim.fonlow.com/, and copy&paste the whole content to an angular-editor, you will see some naughty things.
Some other HTML editors use various ways to sanitize. TinyMCE would rip off most styling.
Blogger.com rip off a basic amount as Angular does, and contain the content in iFrame.
I guess if angular-editor uses iFrame, the feature request may become irrelevant, since the naughty styling will be contained inside iFrame.
To replicate problem, go to https://tracehubslim.fonlow.com/, and copy&paste the whole content to an angular-editor, you will see some naughty things. I don't see any andular editor on this page... Or do you mean, that I have to copy content from that page?
Yes, This one is shown in an Angular Material Design dialog.
Apparently the naughty styling does not exceed the boundary of the dialog. As you could inspect the elements of the dialog, NG MD dialog does NOT use iframe to contain the naughty styling, while iframe does provide easy containment as I had used. For example,
Here's the codesnip in the my readonly dialog implementation based on NG MD dialog:
<strong mat-dialog-title>
<button *ngIf="useBackButton" type="button" mat-button mat-icon-button matDialogClose aria-label="Close" class="left-align">
<mat-icon>arrow_back</mat-icon>
</button>
<span fxFlexAlign="start">{{title}}</span>
</strong>
<mat-dialog-content>
<html>
<head>
<base target="_blank" />
<!-- Ensure all href are opened in new tab, as described in https://stackoverflow.com/questions/17281486/use-target-blank-in-css -->
</head>
<body>
<iframe #htmlContent style="position: absolute; height: 85%; width: 95%;"></iframe>
</body>
</html>
</mat-dialog-content>
<mat-dialog-actions>
<div *ngIf="!useBackButton" mat-dialog-actions fxLayoutAlign="center center">
<button type="button" mat-button mat-raised-button matDialogClose>Close</button>
</div>
</mat-dialog-actions>
While my original request is for custom sanitation, however, the user story is just to prevent naughty styling of pasted content from making the editor look funny.
Custom sanitation, iframe or special trick in NG MD are just technical solution.
At the moment, I just ask customers not to copy/paste the whole page content but a selected fragment, to reduce the risk.
Jul 3, 2019 added ToDo. Apr 7, 2021, siva-pydaula asked for any update. 213 issues, 11 pull requests, absolute silence since June 2021. The majority of Angular open source libraries are about the same. THIS is killing angular.
