SanitizationFilter allows html5 details and summary (Issue #21605)

Also adds details/summary tags to Copy-as-GFM

9 files changed, 47 insertions, 2 deletions

diff --git a/app/assets/javascripts/copy_as_gfm.js b/app/assets/javascripts/copy_as_gfm.js
index 2bc3d85fba4..16bdb4db5af 100644
--- a/app/assets/javascripts/copy_as_gfm.js
+++ b/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}>`;
       },
diff --git a/app/assets/stylesheets/framework/tw_bootstrap.scss b/app/assets/stylesheets/framework/tw_bootstrap.scss
index ea2d26dd5a0..12a86a64645 100644
--- a/app/assets/stylesheets/framework/tw_bootstrap.scss
+++ b/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
diff --git a/changelogs/unreleased/21605-allow-html5-details.yml b/changelogs/unreleased/21605-allow-html5-details.yml
new file mode 100644
index 00000000000..b0c654783d9
--- /dev/null
+++ b/changelogs/unreleased/21605-allow-html5-details.yml
@@ -0,0 +1,4 @@
+---
+title: SanitizationFilter allows html5 details and summary tags
+merge_request: 6568
+author:
diff --git a/doc/user/markdown.md b/doc/user/markdown.md
index c14db17b0e6..db06224bac2 100644
--- a/doc/user/markdown.md
+++ b/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>
diff --git a/lib/banzai/filter/sanitization_filter.rb b/lib/banzai/filter/sanitization_filter.rb
index af1e575fc89..d5f9e252f62 100644
--- a/lib/banzai/filter/sanitization_filter.rb
+++ b/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)
diff --git a/spec/features/copy_as_gfm_spec.rb b/spec/features/copy_as_gfm_spec.rb
index fec86128d03..fbab4fa9c4f 100644
--- a/spec/features/copy_as_gfm_spec.rb
+++ b/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
     )
 
diff --git a/spec/features/markdown_spec.rb b/spec/features/markdown_spec.rb
index 32159559c37..894df13a2dc 100644
--- a/spec/features/markdown_spec.rb
+++ b/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'
diff --git a/spec/fixtures/markdown.md.erb b/spec/fixtures/markdown.md.erb
index f3e7c2d1a9f..0cdbc32431d 100644
--- a/spec/fixtures/markdown.md.erb
+++ b/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>
diff --git a/spec/lib/banzai/filter/sanitization_filter_spec.rb b/spec/lib/banzai/filter/sanitization_filter_spec.rb
index b38e3b17e64..b4cd5f63a15 100644
--- a/spec/lib/banzai/filter/sanitization_filter_spec.rb
+++ b/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>}