Credit: @khalby786’s REHeader.
I recreated REHeader, with Hello-webpage (static) and without Vue. It creates the image using HTML, then turns it into a image using HTML2Canvas. I also added the following:
- Markdown
- Description section
I am trying to add the following
Project URL: https://reheaderv2.glitch.me
GitHub URL: https://github.com/aboutDavid/REHeaderv2
(HTML now equals HTMI according to my spelling mistake)
Things to do:
- Add sanitizers to prevent malicious code (suggested by @khalby786)
- Change renderer from HTML2Canvas to dom-to-image
3 Likes
Sick! Is this open-sourced?
ooo it supports links
I think you need to get rid of the white section
1 Like
Yes! The project is not private, and I will add it to GitHub in a few minutes.
Well, Glitch’s export to GitHub is broken 
The markdown part is really fancy 
I’m liking it!
2 Likes
Thanks! I used marked to render it.
1 Like
Make sure to use DOMPurify to sanitize the markdown, or dangerous stuff can happen!
Like what? XSS on a server?
I thought XSS only happened on servers. Everything is rendered client-side, so it will work on hello-webpage.
Also can somebody tell me how to set options on HTML2Canvas or recommend a different HTML to Canvas renderer that has decent documentation?
I think the main reason I would keep HTML/Javascript is so different fonts and (to eventually) add animations.
1 Like
iframes and SVGs happen client-side, yet they are dangerous sources of XSS. I suggest you do not take the risk.
I’ll add sanitizers tommorow.
2 Likes
DOMPurify isn’t really hard to implement, it’s basically just 2 lines of code to add/modify.
- Include the DOMPurify script using a script tag.
- Call the DOMPurify function, which returns the sanitized HTML.
2 Likes
Ok, I’m just about to go to sleep.
1 Like
