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
That is not supposed to happen.
I might have to switch to Jimp
Did you forget to add a link?
Yeah, I forgot to add https://
lol
I can see (from the screenshot) that values entered are being added to the main URL as query parameters. While there’s nothing wrong with it, there’s a character limit for URLs, and crossing that limit can (maybe) cause bad stuff to happen.
I think there is a 4k character limit. @aboutdavid should use POST requests.
1 Like
tasha
September 10, 2020, 9:55pm
30
Thanks for sharing!
One concern:
Glitch export should be working. Is it working for you now? If not, can you please send me a message at [email protected] .
1 Like
Sorry to bump this, but like I remade this
ooo it supports links
[image]
I think you need to get rid of the white section
^ oh and it fixes that part
and uses markdown-it
and is now foss