Clash Royale CLAN TAG

Render HTML blocks in page (PHP)

I have a database of emails I've collected from our gmail account which I'm trying to render out to an internal page.

This is working, however the occasional email comes in that causes problems because of missing/not closed tags. There might be some CSS thrown in there that I don't want rendered on the whole page.

I could use iFrames, but they seem outdated, and just not the right approach.

What would the suggested method be to render blocks of HTML from the database, but without them effecting the rest of the page?

3 Answers
3

Firstly, you need to load and interpret that HTML into something not broken. To do this, you use a DOM parser. http://php.net/manual/en/domdocument.loadhtml.php

I could use iFrames, but they seem outdated, and just not the right approach.

No, this is wrong. Until we have good shadow DOM support (and likely even after), iframes are the right way to isolate something in its own context. Make sure you use the sandboxproperty.

sandbox

Note that you could do this without iframes, but it's going to be a lot more work.

But curious how something like 'Google' can render it without affecting the whole page.

Google doesn't just accept anything that comes through that e-mail, and neither should you, even if you use the iframe method. You need to make a whitelist of what elements you will support, and filter out everything outside of that. Next, you need to figure out what CSS properties you will support. Finally, you need to transform that whole DOM document into something useful and output it as HTML. Check out HTML Purifier for your whitelisting.

None of this is an easy task. You're stepping into an awful lot of hassle. There is no real standard for HTML e-mail. Each provider and mail client has a different set of what they support, and with varying results.

iFrames I wouldn't say are dated and I would consider them a valid output in your case.

But curious how something like 'Google' can render it without affecting the whole page.

If you inspect, they use iFrames.

100% agree with @brad with running it through a parser, then output it to an iFrame.

For the CSS part, you may add for example an id for the div u have email content on then add the id as father to all the css selectors! like this

id

id

And you may check the tags to be closed correctly which both of these ideas may take some processing power but not much, And you can prevent recalculation by preproccessing and storing the result.

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.