angular sanitizer and orphan angle bracket in html email content

288 Views Asked by At

In my angular app I have applied angular sanitization so invalid html is stripped off(using getTrustedHtml mathod) and valid html goes(HttpPost) to web api. Also HtmlSanitizer in web api is not recommended due to other reasons; so only client side I have to do.

While sending html email in my angular app, I came across orphan angle bracket in scenario in HTML during QA testing: And the orphan angle brackets are causing error as "Error: [$sanitize:badparse] http://errors.angularjs.org/1.4.8/$sanitize/badparse?p0=%3C%2Fh"

<!DOCTYPE html>
<html>
<body>
<h1>My First Heading</h1>

I am going very >> fast.. <hello> if you are not able to come by 7'<<< O clock> Please be at home >;
<div style="background-color:blue;">Testing</div>
<img src="../parent/my_profile_photo.jpeg" title="Profile Pic">
<img src="profile_of_parents/my_parents_photo.jpeg"  />
I am in >>>> <Bangalore> which is far > 50 squre Km. Price for everything here is much much >> 100 Rs.
<p>My last paragraph.</p>

</body>
</html>

To remove orphan angle brackets ("<" or "<<.." or ">" or "...>>>>>...." or />) I started searching for regular expression but could not find working example.

Please help if some one knows any idea / work arround.

1

There are 1 best solutions below

0
On

This is very difficult since you let the user type in their own code.

You should implements rules, such as no custom tag for users, or parsing only raw text and not HTML text.

With this kind of rules, you can then parse the content and send it parsed.

For instance, if the user can't use chevrons without spaces, you can do something like this :

const text = `<div>Some text > with chevrons < in all directions</div>`;
const parsed = text.replace(/ > /g, ' &gt; ').replace(/ < /g, ' &lt; ');

console.log(parsed);