1

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/

2
  • 1
    What is the URL of the iframe?
    – Sharky
    Jul 26, 2022 at 8:01
  • src="<?php echo JRoute::_('index.php?option=com_tabapapo&view=tabapapo&layout=messages&tmpl=messages'); ?>"
    – JonatasCF
    Jul 26, 2022 at 14:10

1 Answer 1

2

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.

7
  • Thank you, it worked. As for XSS attacks, I don't know if there is any risk, my component removes all HTML tags before sending the messages to the database.
    – JonatasCF
    Jul 27, 2022 at 12:16
  • You're wrong. The component does not filter user input before storing, nor does it escape it on display. If it did, inserting an icon with <i class="icon-clock"></i> would not work. Now anyone can insert tags with JavaScript event attributes.
    – Sharky
    Jul 27, 2022 at 13:11
  • I'm confused. Anyone can write tags in the text box, but before the message is sent the HTML tags are stripped by the stripHtml function in the component's javascript. The <i class="icon-clock"></i> tag is in the component code and is working. To the database goes only encrypted text.
    – JonatasCF
    Jul 27, 2022 at 14:23
  • That part of JS code is currently broken. Also, you mustn't rely on client side code to perform filtering and validation because it can be bypassed with ease. This needs to be done on the server side.
    – Sharky
    Jul 28, 2022 at 5:38
  • I published a new version of the component with changes to the form, I hadn't done the XML, now I'm using the renderfield function to create the inputs. Please if you can check if that was it I would be grateful.
    – JonatasCF
    Aug 9, 2022 at 14:31

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.