Currently the strip_tags function on line #133 of quicktabs/src/Plugin/views/style/Quicktabs.php prevents the tab title from displaying html.

$title = strip_tags($index);

While this is generally desirable, there may be use cases for adding some html to the tab title. In my case, I have a large header label with small text below that I'd like to render on the tab title. Exposing the 'rendered_strip' form element on the views plugin and rendering the raw title will permit this ability.

Change to:

 $strip_tags = $this->options['grouping'][0]['rendered_strip'];
      if($strip_tags === TRUE) {
        $title = strip_tags($index);
      }
      else {
        $title =  $index;
      }
CommentFileSizeAuthor
#16 allow_html_tab_title_views_2942637_16.patch1.04 KBbrooke_heaton
#15 allow_html_tab_title_views_2942637_15.patch1.03 KBbrooke_heaton
#14 allow_html_tab_title_views_2942637_14.patch800 bytesbrooke_heaton
#10 2020 Veterans Conference National Association of State Workforce Agencies.png156.53 KBbrooke_heaton
#9 allow_html_tab_title_views_2942637_9.patch1022 bytesshelane
#5 allow_html_tab_title_views_2942637_5.patch1.12 KBbrooke_heaton
#4 tab_title_with_html.png32.89 KBbrooke_heaton
#2 allow_html_tab_title_views_2942637_2.patch1.2 KBbrooke_heaton
Support from Acquia helps fund testing for Drupal Acquia logo

Comments

brooke_heaton created an issue. See original summary.

brooke_heaton’s picture

brooke_heaton CreditAttribution: brooke_heaton as a volunteer commented
FileSize
allow_html_tab_title_views_2942637_2.patch1.2 KB

Patch opens up view $options['grouping'][0]['rendered_strip'] setting for use and checks rendered_strip on tab title render.

Only local images are allowed.

brooke_heaton’s picture

brooke_heaton CreditAttribution: brooke_heaton as a volunteer commented
Status: Active » Needs review
brooke_heaton’s picture

brooke_heaton CreditAttribution: brooke_heaton as a volunteer commented
FileSize
tab_title_with_html.png32.89 KB

I've attached an example of a Quicktab set with html in the title as an example of what this patch will enable.

Quicktab with title example

brooke_heaton’s picture

brooke_heaton CreditAttribution: brooke_heaton as a volunteer commented
FileSize
allow_html_tab_title_views_2942637_5.patch1.12 KB

Rerolled patch against 8.x-3.x-dev.

brooke_heaton’s picture

brooke_heaton CreditAttribution: brooke_heaton as a volunteer commented
shelane’s picture

shelane
Primary language English
CreditAttribution: shelane commented
Status: Needs review » Needs work

So, I believe that if it were opened up to all html, it could be considered a security vulnerability (not properly sanitized).

Ultimately, the tabs get built as translatable titles and then built into the html output by the renderer type. These are not currently templated, but that will change. See #3144540: Create templates for the output of of the renderer types.

I think instead we should think of an allowed set of html tags and see how we can put these.
To start with:

img
h2
h3
h4
span
i

Or this function may be all that is needed: Xss::filter

brooke_heaton’s picture

brooke_heaton CreditAttribution: brooke_heaton as a volunteer commented

Good point @shelane. I will revisit this.

shelane’s picture

shelane
Primary language English
CreditAttribution: shelane commented
FileSize
allow_html_tab_title_views_2942637_9.patch1022 bytes

@brooke_heaton please test the latest patch here. I'm not certain how to recreate the issue in a view style for my own testing. This is off of the latest dev.

brooke_heaton’s picture

brooke_heaton CreditAttribution: brooke_heaton as a volunteer commented
FileSize
2020 Veterans Conference National Association of State Workforce Agencies.png156.53 KB

@shelane. Hm, so I think the end result of the Link::fromTextAndUrl is that characters are now being escaped. I'll have to figure out how to translate that. the toString() method does not seem to work.

shelane’s picture

shelane
Primary language English
CreditAttribution: shelane commented

I’ve been working on something similar in the Views Bootstrap module. I believe putting the output in the twig template with the raw filter will make that output correctly. I’ll have some time to come around to this in a month or so. I might completely rework this based on what I’ve learned there.

brooke_heaton’s picture

brooke_heaton CreditAttribution: brooke_heaton as a volunteer commented

@shelane - which template would that be in? Trying to find a quick workaround for a release on Monday :/

brooke_heaton’s picture

brooke_heaton CreditAttribution: brooke_heaton as a volunteer commented

Hm, so this is working for me and does NOT escape the HTML. Interesting. 

    $tab_titles[] = [
        '0' => Link::fromTextAndUrl(
          $this->t(Xss::filter($index, ['img', 'em', 'strong', 'h2', 'h3', 'h4', 'small', 'span', 'i', 'br'])),
          Url::fromRoute(
            '<current>',
            [],
            [
              'attributes' => [
                'class' => $link_classes,
              ],
            ]
          )
        )->toRenderable(),
        '#wrapper_attributes' => $wrapper_attributes,
      ];
brooke_heaton’s picture

brooke_heaton CreditAttribution: brooke_heaton as a volunteer commented
FileSize
allow_html_tab_title_views_2942637_14.patch800 bytes

Updated the patch to wrap the xss filtered input in the TranslatableMarkup method. This prevents escaping HTML characters in the final output.

brooke_heaton’s picture

brooke_heaton CreditAttribution: brooke_heaton as a volunteer commented
FileSize
allow_html_tab_title_views_2942637_15.patch1.03 KB

Added 'use' statement for Xss. Patch updated.

brooke_heaton’s picture

brooke_heaton CreditAttribution: brooke_heaton as a volunteer commented
FileSize
allow_html_tab_title_views_2942637_16.patch1.04 KB

In my use case, I'm using an h5, so I've updated the allowed tags to include h5 and h6. There may be other use cases.

brooke_heaton’s picture

brooke_heaton CreditAttribution: brooke_heaton as a volunteer commented
Status: Needs work » Needs review
shelane’s picture

shelane
Primary language English
CreditAttribution: shelane commented

Great to hear. Thanks for looking more into it.

shelane’s picture

shelane
Primary language English
CreditAttribution: shelane commented
Status: Needs review » Fixed

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.