fix: sanitize highlight text

[takanome-dev]

Description

This PR fixes the issue with sanitizing the highlighted text. The code has been modified to ensure that the text is properly sanitized, preventing any potential security vulnerabilities. This improvement enhances the overall security of the application.

Generated using OpenSauced.

What type of PR is this? (check all applicable)

• 🍕 Feature
• 🐛 Bug Fix
• 📝 Documentation Update
• 🎨 Style
• 🧑‍💻 Code Refactor
• 🔥 Performance Improvements
• ✅ Test
• 🤖 Build
• 🔁 CI
• 📦 Chore (Release)
• ⏩ Revert

Related Tickets & Documents

Fixes #66

Mobile & Desktop Screenshots/Recordings

Highlight	Before sanitization	After

Added tests?

• 👍 yes
• 🙅 no, because they aren't needed
• 🙋 no, because I need help

Added to documentation?

• 📜 README.md
• 📓 docs.opensauced.pizza
• 🍕 dev.to/opensauced
• 📕 storybook
• 🙅 no documentation needed

[optional] Are there any post-deployment tasks we need to perform?

[optional] What gif best describes this PR or how it makes you feel?

[takanome-dev]

I think we should be on the side of escaping everything and have it rendered as and not em. I think people will recognize escaped HTML characters in the highlight text.
originally posted by @brandonroberts in #66 (comment)

Need to figure out how to do this

[brandonroberts]

Usually if the library sanitizes the HTML, it replaces all HTML entities with their equivalent, such as < becoming <

If this one doesn't do that, we should find one that does.

[takanome-dev]

it does do it but if the sanitized text is passed to satori, it will treat it as html and it can break the layout (just guessing but I think that makes sense)

opengraph/src/social-card/templates/highlight-card.template.ts

Lines 20 to 22 in 0fbbc75

	<p tw="font-normal text-48px text-light-slate-11 tracking-tight">
	${body.length > 108 ? `${body.slice(0, 108)}...` : body}
	</p>

We can also just escape the html...

[brandonroberts]

@takanome-dev Ok, try escaping the HTML and see if that works. If so, we can go with that

[takanome-dev]

@takanome-dev Ok, try escaping the HTML and see if that works. If so, we can go with that

Done 🚀

[brandonroberts]

@takanome-dev instead of discarding them, is there no option to sanitize them as-is? So <em>, for example, is still displayed as <em> but not applied as HTML?

[takanome-dev]

That's what I have been trying to do. The sanitize-html that I have use can do it, but didn't find how to display html as text with satori. Will dig more into that.

[brandonroberts]

That's what I have been trying to do. The sanitize-html that I have use can do it, but didn't find how to display html as text with satori. Will dig more into that.

Ok. I see more how sanitize-html works, as it will allow certain tags and discard everything else. It may be the best path for now as its a proven solution, but let us know what you find.

[brandonroberts]

@takanome-dev did you find anymore alternatives here?

[takanome-dev]

@takanome-dev did you find anymore alternatives here?

@brandonroberts sorry for the late response. Unfortunately, I didn't find any alternative or a way to display the html as a text in the generated og image.

[brandonroberts]

Ok cool. No problem

[nickytonline]

Closing this for now as there has been no movement since late August. Feel free to reopen @brandonroberts @takanome-dev if work resumes.