0

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?

Scott Robinson
  • 583
  • 1
  • 7
  • 23
  • When you say "render", do you mean you're rendering the HTML with a browser engine and outputting an image? Or are you talking about injecting arbitrary HTML from an e-mail into a page without side effects on that page? – Brad Jul 29 '18 at 21:39
  • "I could use iFrames, but they seem outdated, and just not the right approach." What makes you say that? – Brad Jul 29 '18 at 21:40
  • Sorry - Bad use of the word render. Injecting arbitrary HTML from an e-mail into a page without side effects on that page. Happy to be shot down with my approach, not done it before! But curious how something like 'Google' can render it without affecting the whole page. – Scott Robinson Jul 29 '18 at 21:41
  • Google may change many tags ids etc, it's not like you can use any html code you like, and not all the CSSs are useable there. – TheMMSH Jul 29 '18 at 21:44

3 Answers3

0

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

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.

TheMMSH
  • 501
  • 6
  • 26
0

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.

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.

Brad
  • 159,648
  • 54
  • 349
  • 530
0

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.

Ranga
  • 3
  • 3