RE: Loading HTML-content from a file Vaadin 8

If the file is something that can be changed by user, imported etc. it is essential to use proper sanitation tool like Jsoup. This eliminates possibility of malicisious code ending to Label, and to be executed by the browser.

Hello,

i would like to add HTML-Content to a component on a page. This content differs from useregion to useregion.
I already read many Threads regarding this issue ( for example this)
https://vaadin.com/forum#!/thread/3707637

Currently I use a FileResource for loadng, and a BrowserFrame for displaying.
The Problem is, that styles are not applied to the contents of the iframe.

A different approach would be to load the contents into a label and mark its contenttype HTML.
But it feels wrong to me to load a preformattet html-document into a label.

Is there any better way with vaadin 8?

Hi,

Vaadin 8 supports Html imports via the @HtmlImport annotatin, as it is explained on the
what’s new in vaadin 8 page
.
You can check out that example, although I am not sure if it fits your particular use case. It might be that you have to resort to using a Label with content type HTML, as it is explained in the thread you referenced.

BR,
Goran

Have you tried embedding the styles to the document in the IFrame?

Thank you very much for the fast replies.
Sorry if there are errors in the following text. I’m new to webdeveloping with Vaadin.

Fortunaly the files are created by and only accessible for the Admin of the server (no user generated content).

I already tried embedding the styles by BrowserFrame.addStyleName. Unfortunaly the style is applied before the content of the iframe, leaving the content unformatted.
Writing the styles directly into each of the HTML-documents appears a bit complicated for admins/maintainers in terms of reusability and simplyness.
Is there any other way to apply styles into the iframe?

Also the HTML-import seems interesting. I was a bit scared using it because I read something about incompability with some browsers (https://vaadin.com/api/8.0.5/com/vaadin/annotations/HtmlImport.html).

I don’t think BrowserFrame.addStyleName will work, as that probably adds the stylename to the IFrame itself (or more likely an element wrapping the IFram).

If you don’t want editors of the documents dealing with the styles, you could also do some preprocessing to the contents before you embed it and put them style block in the file in code.

HTML imports are indeed not usable in all browsers without extra polyfills: https://caniuse.com/#feat=imports

-Olli

Hmm, I hoped for a better way.
But finaly solved it as intended with the Labels.
Thanks again for your replies.