Joomla layout CSS classes in a view into iFrame

Question

In the chat component I developed there is a View inside an Iframe in the Main View. The component's CSS works normally, but I can't use the standard Joomla layout classes. The HTML is sent by the component's Javascript into the HTML of a DIV. Example:

<i class="icon-clock"></i>

Component: https://extensions.joomla.org/extension/tabapapo/

Answer 1

It doesn't work the way you expect because you're using tmpl URL parameter with value messages. What this parameter does is tells is to render the page using the specified template layout. When the given layout doesn't exist, the default (index) layout from system template is used. It has minimal styling and does not load the icon stylesheets. Changing the tmpl parameter value to component alone would work with the default Cassiopeia template. But if you expect certain CSS classes to work, you should also load the stylesheets in your view layout so it actually works with all templates. To enable fontawesome, you can use this:

$this->document->getWebAssetManager()->useStyle('fontawesome');

Another thing to consider is that using classes and allowing HTML in general is probably not the best idea for a live chat. Would be better to use some sort of shortcodes or alternative syntax like Markdown. Or, if you do use HTML, you should at least filter out dangerous tags and attributes. Because currently your component is wide open to XSS attacks.