Merge branch '21605-allow-html5-details' into 'master'

SanitizationFilter allows html5 details and summary (Issue #21605)

Closes #21605

See merge request !6568

Gemfile

@@ -105,7 +105,7 @@ gem 'seed-fu', '~> 2.3.5'
 gem 'html-pipeline',        '~> 1.11.0'
 gem 'deckar01-task_list',   '1.0.6', require: 'task_list/railtie'
 gem 'gitlab-markup',        '~> 1.5.1'
-gem 'redcarpet',            '~> 3.3.3'
+gem 'redcarpet',            '~> 3.4'
 gem 'RedCloth',             '~> 4.3.2'
 gem 'rdoc',                 '~> 4.2'
 gem 'org-ruby',             '~> 0.9.12'

Gemfile.lock

@@ -583,7 +583,7 @@ GEM
     recaptcha (3.0.0)
       json
     recursive-open-struct (1.0.0)
-    redcarpet (3.3.3)
+    redcarpet (3.4.0)
     redis (3.2.2)
     redis-actionpack (5.0.1)
       actionpack (>= 4.0, < 6)
@@ -955,7 +955,7 @@ DEPENDENCIES
   rblineprof (~> 0.3.6)
   rdoc (~> 4.2)
   recaptcha (~> 3.0)
-  redcarpet (~> 3.3.3)
+  redcarpet (~> 3.4)
   redis (~> 3.2)
   redis-namespace (~> 1.5.2)
   redis-rails (~> 5.0.1)

app/assets/javascripts/copy_as_gfm.js

@@ -110,7 +110,7 @@ require('./lib/utils/common_utils');
 
         return `<dl>\n${lines.join('\n')}\n</dl>`;
       },
-      'sub, dt, dd, kbd, q, samp, var, ruby, rt, rp, abbr'(el, text) {
+      'sub, dt, dd, kbd, q, samp, var, ruby, rt, rp, abbr, summary, details'(el, text) {
         const tag = el.nodeName.toLowerCase();
         return `<${tag}>${text}</${tag}>`;
       },

app/assets/stylesheets/framework/tw_bootstrap.scss

@@ -86,6 +86,16 @@
   position: fixed;
 }
 
+/*
+ * Fix <summary> elements on firefox
+ * See https://github.com/necolas/normalize.css/issues/640
+ * and https://github.com/twbs/bootstrap/issues/21060
+ *
+ */
+summary {
+  display: list-item;
+}
+
 @import "bootstrap/responsive-utilities";
 
 // Labels

changelogs/unreleased/21605-allow-html5-details.yml

+---
+title: SanitizationFilter allows html5 details and summary tags
+merge_request: 6568
+author:

doc/user/markdown.md

@@ -576,7 +576,7 @@ Quote break.
 
 You can also use raw HTML in your Markdown, and it'll mostly work pretty well.
 
-See the documentation for HTML::Pipeline's [SanitizationFilter](http://www.rubydoc.info/gems/html-pipeline/1.11.0/HTML/Pipeline/SanitizationFilter#WHITELIST-constant) class for the list of allowed HTML tags and attributes.  In addition to the default `SanitizationFilter` whitelist, GitLab allows `span` elements.
+See the documentation for HTML::Pipeline's [SanitizationFilter](http://www.rubydoc.info/gems/html-pipeline/1.11.0/HTML/Pipeline/SanitizationFilter#WHITELIST-constant) class for the list of allowed HTML tags and attributes.  In addition to the default `SanitizationFilter` whitelist, GitLab allows `span`, `abbr`, `details` and `summary` elements.
 
 ```no-highlight
 <dl>

lib/banzai/filter/sanitization_filter.rb

@@ -35,6 +35,10 @@ module Banzai
         # Allow span elements
         whitelist[:elements].push('span')
 
+        # Allow html5 details/summary elements
+        whitelist[:elements].push('details')
+        whitelist[:elements].push('summary')
+
         # Allow abbr elements with title attribute
         whitelist[:elements].push('abbr')
         whitelist[:attributes]['abbr'] = %w(title)

spec/features/copy_as_gfm_spec.rb

@@ -275,6 +275,10 @@ describe 'Copy as GFM', feature: true, js: true do
       <rp>rp</rp>
 
       <abbr>abbr</abbr>
+
+      <summary>summary</summary>
+
+      <details>details</details>
       GFM
     )
 

spec/features/markdown_spec.rb

@@ -115,6 +115,14 @@ describe 'GitLab Markdown', feature: true do
         expect(doc).to have_selector('span:contains("span tag")')
       end
 
+      it 'permits details elements' do
+        expect(doc).to have_selector('details:contains("Hiding the details")')
+      end
+
+      it 'permits summary elements' do
+        expect(doc).to have_selector('details summary:contains("collapsible")')
+      end
+
       it 'permits style attribute in th elements' do
         aggregate_failures do
           expect(doc.at_css('th:contains("Header")')['style']).to eq 'text-align: center'

spec/fixtures/markdown.md.erb

@@ -79,6 +79,11 @@ As permissive as it is, we've allowed even more stuff:
 
 <span>span tag</span>
 
+<details>
+<summary>Summary lines are collapsible:</summary>
+Hiding the details until expanded.
+</details>
+
 <a href="#" rel="bookmark">This is a link with a defined rel attribute, which should be removed</a>
 
 <a href="javascript:alert('Hi')">This is a link trying to be sneaky. It gets its link removed entirely.</a>

spec/lib/banzai/filter/sanitization_filter_spec.rb

@@ -86,6 +86,16 @@ describe Banzai::Filter::SanitizationFilter, lib: true do
       expect(filter(act).to_html).to eq exp
     end
 
+    it 'allows `summary` elements' do
+      exp = act = '<summary>summary line</summary>'
+      expect(filter(act).to_html).to eq exp
+    end
+
+    it 'allows `details` elements' do
+      exp = act = '<details>long text goes here</details>'
+      expect(filter(act).to_html).to eq exp
+    end
+
     it 'removes `rel` attribute from `a` elements' do
       act = %q{<a href="#" rel="nofollow">Link</a>}
       exp = %q{<a href="#">Link</a>}