sanitize 6.1.2 → 7.0.0

data/test/test_sanitize_css.rb

@@ -1,27 +1,28 @@
-# encoding: utf-8
-require_relative 'common'
+# frozen_string_literal: true
 
-describe 'Sanitize::CSS' do
+require_relative "common"
+
+describe "Sanitize::CSS" do
   make_my_diffs_pretty!
   parallelize_me!
 
-  describe 'instance methods' do
+  describe "instance methods" do
     before do
       @default = Sanitize::CSS.new
       @relaxed = Sanitize::CSS.new(Sanitize::Config::RELAXED[:css])
-      @custom  = Sanitize::CSS.new(:properties => %w[background color width])
+      @custom = Sanitize::CSS.new(properties: %w[background color width])
     end
 
-    describe '#properties' do
-      it 'should sanitize CSS properties' do
+    describe "#properties" do
+      it "should sanitize CSS properties" do
         css = 'background: #fff; width: expression(alert("hi"));'
 
-        _(@default.properties(css)).must_equal ' '
-        _(@relaxed.properties(css)).must_equal 'background: #fff; '
-        _(@custom.properties(css)).must_equal 'background: #fff; '
+        _(@default.properties(css)).must_equal " "
+        _(@relaxed.properties(css)).must_equal "background: #fff; "
+        _(@custom.properties(css)).must_equal "background: #fff; "
       end
 
-      it 'should allow allowlisted URL protocols' do
+      it "should allow allowlisted URL protocols" do
         [
           "background: url(relative.jpg)",
           "background: url('relative.jpg')",
@@ -32,17 +33,20 @@ describe 'Sanitize::CSS' do
           "background: image-set('relative.jpg' 1x, 'relative-2x.jpg' 2x)",
           "background: image-set('https://example.com/https.jpg' 1x, 'https://example.com/https-2x.jpg' 2x)",
           "background: image-set('https://example.com/https.jpg' type('image/jpeg'), 'https://example.com/https.avif' type('image/avif'))",
+          "background: -webkit-image-set('relative.jpg' 1x, 'relative-2x.jpg' 2x)",
+          "background: -webkit-image-set('https://example.com/https.jpg' 1x, 'https://example.com/https-2x.jpg' 2x)",
+          "background: -webkit-image-set('https://example.com/https.jpg' type('image/jpeg'), 'https://example.com/https.avif' type('image/avif'))",
           "background: image('relative.jpg');",
           "background: image('https://example.com/https.jpg');",
           "background: image(rtl 'https://example.com/https.jpg');"
         ].each do |css|
-          _(@default.properties(css)).must_equal ''
+          _(@default.properties(css)).must_equal ""
           _(@relaxed.properties(css)).must_equal css
-          _(@custom.properties(css)).must_equal ''
+          _(@custom.properties(css)).must_equal ""
         end
       end
 
-      it 'should not allow non-allowlisted URL protocols' do
+      it "should not allow non-allowlisted URL protocols" do
         [
           "background: url(javascript:alert(0))",
           "background: url(ja\\56 ascript:alert(0))",
@@ -52,21 +56,21 @@ describe 'Sanitize::CSS' do
           "background: url('javas\\\ncript:alert(0)')",
           "background: url('java\\0script:foo')"
         ].each do |css|
-          _(@default.properties(css)).must_equal ''
-          _(@relaxed.properties(css)).must_equal ''
-          _(@custom.properties(css)).must_equal ''
+          _(@default.properties(css)).must_equal ""
+          _(@relaxed.properties(css)).must_equal ""
+          _(@custom.properties(css)).must_equal ""
         end
       end
 
-      it 'should not allow -moz-binding' do
+      it "should not allow -moz-binding" do
         css = "-moz-binding:url('http://ha.ckers.org/xssmoz.xml#xss')"
 
-        _(@default.properties(css)).must_equal ''
-        _(@relaxed.properties(css)).must_equal ''
-        _(@custom.properties(css)).must_equal ''
+        _(@default.properties(css)).must_equal ""
+        _(@relaxed.properties(css)).must_equal ""
+        _(@custom.properties(css)).must_equal ""
       end
 
-      it 'should not allow expressions' do
+      it "should not allow expressions" do
         [
           "width:expression(alert(1))",
           "width:  /**/expression(alert(1)",
@@ -75,57 +79,57 @@ describe 'Sanitize::CSS' do
           "xss:expression(alert(1))",
           "height: foo(expression(alert(1)));"
         ].each do |css|
-          _(@default.properties(css)).must_equal ''
-          _(@relaxed.properties(css)).must_equal ''
-          _(@custom.properties(css)).must_equal ''
+          _(@default.properties(css)).must_equal ""
+          _(@relaxed.properties(css)).must_equal ""
+          _(@custom.properties(css)).must_equal ""
         end
       end
 
-      it 'should not allow behaviors' do
+      it "should not allow behaviors" do
         css = "behavior: url(xss.htc);"
 
-        _(@default.properties(css)).must_equal ''
-        _(@relaxed.properties(css)).must_equal ''
-        _(@custom.properties(css)).must_equal ''
+        _(@default.properties(css)).must_equal ""
+        _(@relaxed.properties(css)).must_equal ""
+        _(@custom.properties(css)).must_equal ""
       end
 
-      describe 'when :allow_comments is true' do
-        it 'should preserve comments' do
-          _(@relaxed.properties('color: #fff; /* comment */ width: 100px;'))
-            .must_equal 'color: #fff; /* comment */ width: 100px;'
+      describe "when :allow_comments is true" do
+        it "should preserve comments" do
+          _(@relaxed.properties("color: #fff; /* comment */ width: 100px;"))
+            .must_equal "color: #fff; /* comment */ width: 100px;"
 
           _(@relaxed.properties("color: #fff; /* \n\ncomment */ width: 100px;"))
             .must_equal "color: #fff; /* \n\ncomment */ width: 100px;"
         end
       end
 
-      describe 'when :allow_comments is false' do
-        it 'should strip comments' do
-          _(@custom.properties('color: #fff; /* comment */ width: 100px;'))
-            .must_equal 'color: #fff;  width: 100px;'
+      describe "when :allow_comments is false" do
+        it "should strip comments" do
+          _(@custom.properties("color: #fff; /* comment */ width: 100px;"))
+            .must_equal "color: #fff;  width: 100px;"
 
           _(@custom.properties("color: #fff; /* \n\ncomment */ width: 100px;"))
-            .must_equal 'color: #fff;  width: 100px;'
+            .must_equal "color: #fff;  width: 100px;"
         end
       end
 
-      describe 'when :allow_hacks is true' do
-        it 'should allow common CSS hacks' do
-          _(@relaxed.properties('_border: 1px solid #fff; *width: 10px'))
-            .must_equal '_border: 1px solid #fff; *width: 10px'
+      describe "when :allow_hacks is true" do
+        it "should allow common CSS hacks" do
+          _(@relaxed.properties("_border: 1px solid #fff; *width: 10px"))
+            .must_equal "_border: 1px solid #fff; *width: 10px"
         end
       end
 
-      describe 'when :allow_hacks is false' do
-        it 'should not allow common CSS hacks' do
-          _(@custom.properties('_border: 1px solid #fff; *width: 10px'))
-            .must_equal ' '
+      describe "when :allow_hacks is false" do
+        it "should not allow common CSS hacks" do
+          _(@custom.properties("_border: 1px solid #fff; *width: 10px"))
+            .must_equal " "
         end
       end
     end
 
-    describe '#stylesheet' do
-      it 'should sanitize a CSS stylesheet' do
+    describe "#stylesheet" do
+      it "should sanitize a CSS stylesheet" do
         css = %[
           /* Yay CSS! */
           .foo { color: #fff; }
@@ -137,82 +141,82 @@ describe 'Sanitize::CSS' do
           }
         ].strip
 
-        _(@default.stylesheet(css).strip).must_equal %[
+        _(@default.stylesheet(css).strip).must_equal %(
           .foo {  }
           #bar {  }
-        ].strip
+        ).strip
 
         _(@relaxed.stylesheet(css)).must_equal css
 
-        _(@custom.stylesheet(css).strip).must_equal %[
+        _(@custom.stylesheet(css).strip).must_equal %(
           .foo { color: #fff; }
           #bar {  }
-        ].strip
+        ).strip
       end
 
-      describe 'when :allow_comments is true' do
-        it 'should preserve comments' do
-          _(@relaxed.stylesheet('.foo { color: #fff; /* comment */ width: 100px; }'))
-            .must_equal '.foo { color: #fff; /* comment */ width: 100px; }'
+      describe "when :allow_comments is true" do
+        it "should preserve comments" do
+          _(@relaxed.stylesheet(".foo { color: #fff; /* comment */ width: 100px; }"))
+            .must_equal ".foo { color: #fff; /* comment */ width: 100px; }"
 
           _(@relaxed.stylesheet(".foo { color: #fff; /* \n\ncomment */ width: 100px; }"))
             .must_equal ".foo { color: #fff; /* \n\ncomment */ width: 100px; }"
         end
       end
 
-      describe 'when :allow_comments is false' do
-        it 'should strip comments' do
-          _(@custom.stylesheet('.foo { color: #fff; /* comment */ width: 100px; }'))
-            .must_equal '.foo { color: #fff;  width: 100px; }'
+      describe "when :allow_comments is false" do
+        it "should strip comments" do
+          _(@custom.stylesheet(".foo { color: #fff; /* comment */ width: 100px; }"))
+            .must_equal ".foo { color: #fff;  width: 100px; }"
 
           _(@custom.stylesheet(".foo { color: #fff; /* \n\ncomment */ width: 100px; }"))
-            .must_equal '.foo { color: #fff;  width: 100px; }'
+            .must_equal ".foo { color: #fff;  width: 100px; }"
         end
       end
 
-      describe 'when :allow_hacks is true' do
-        it 'should allow common CSS hacks' do
-          _(@relaxed.stylesheet('.foo { _border: 1px solid #fff; *width: 10px }'))
-            .must_equal '.foo { _border: 1px solid #fff; *width: 10px }'
+      describe "when :allow_hacks is true" do
+        it "should allow common CSS hacks" do
+          _(@relaxed.stylesheet(".foo { _border: 1px solid #fff; *width: 10px }"))
+            .must_equal ".foo { _border: 1px solid #fff; *width: 10px }"
         end
       end
 
-      describe 'when :allow_hacks is false' do
-        it 'should not allow common CSS hacks' do
-          _(@custom.stylesheet('.foo { _border: 1px solid #fff; *width: 10px }'))
-            .must_equal '.foo {  }'
+      describe "when :allow_hacks is false" do
+        it "should not allow common CSS hacks" do
+          _(@custom.stylesheet(".foo { _border: 1px solid #fff; *width: 10px }"))
+            .must_equal ".foo {  }"
         end
       end
     end
 
-    describe '#tree!' do
-      it 'should sanitize a Crass CSS parse tree' do
-        tree = Crass.parse(String.new("@import url(foo.css);\n") <<
-          ".foo { background: #fff; font: 16pt 'Comic Sans MS'; }\n" <<
+    describe "#tree!" do
+      it "should sanitize a Crass CSS parse tree" do
+        tree = Crass.parse("@import url(foo.css);\n" \
+          ".foo { background: #fff; font: 16pt 'Comic Sans MS'; }\n" \
           "#bar { top: 125px; background: green; }")
 
         _(@custom.tree!(tree)).must_be_same_as tree
 
-        _(Crass::Parser.stringify(tree)).must_equal String.new("\n") <<
-            ".foo { background: #fff;  }\n" <<
-            "#bar {  background: green; }"
+        _(Crass::Parser.stringify(tree)).must_equal "\n" \
+          ".foo { background: #fff;  }\n" \
+          "#bar {  background: green; }"
       end
     end
   end
 
-  describe 'class methods' do
-    describe '.properties' do
-      it 'should sanitize CSS properties with the given config' do
+  describe "class methods" do
+    describe ".properties" do
+      it "should sanitize CSS properties with the given config" do
         css = 'background: #fff; width: expression(alert("hi"));'
 
-        _(Sanitize::CSS.properties(css)).must_equal ' '
-        _(Sanitize::CSS.properties(css, Sanitize::Config::RELAXED[:css])).must_equal 'background: #fff; '
-        _(Sanitize::CSS.properties(css, :properties => %w[background color width])).must_equal 'background: #fff; '
+        _(Sanitize::CSS.properties(css)).must_equal " "
+        _(Sanitize::CSS.properties(css, Sanitize::Config::RELAXED[:css])).must_equal "background: #fff; "
+        _(Sanitize::CSS.properties(css, properties: %w[background color width])).must_equal "background: #fff; "
       end
     end
 
-    describe '.stylesheet' do
-      it 'should sanitize a CSS stylesheet with the given config' do
+    describe ".stylesheet" do
+      it "should sanitize a CSS stylesheet with the given config" do
         css = %[
           /* Yay CSS! */
           .foo { color: #fff; }
@@ -224,43 +228,43 @@ describe 'Sanitize::CSS' do
           }
         ].strip
 
-        _(Sanitize::CSS.stylesheet(css).strip).must_equal %[
+        _(Sanitize::CSS.stylesheet(css).strip).must_equal %(
           .foo {  }
           #bar {  }
-        ].strip
+        ).strip
 
         _(Sanitize::CSS.stylesheet(css, Sanitize::Config::RELAXED[:css])).must_equal css
 
-        _(Sanitize::CSS.stylesheet(css, :properties => %w[background color width]).strip).must_equal %[
+        _(Sanitize::CSS.stylesheet(css, properties: %w[background color width]).strip).must_equal %(
           .foo { color: #fff; }
           #bar {  }
-        ].strip
+        ).strip
       end
     end
 
-    describe '.tree!' do
-      it 'should sanitize a Crass CSS parse tree with the given config' do
-        tree = Crass.parse(String.new("@import url(foo.css);\n") <<
-          ".foo { background: #fff; font: 16pt 'Comic Sans MS'; }\n" <<
+    describe ".tree!" do
+      it "should sanitize a Crass CSS parse tree with the given config" do
+        tree = Crass.parse("@import url(foo.css);\n" \
+          ".foo { background: #fff; font: 16pt 'Comic Sans MS'; }\n" \
           "#bar { top: 125px; background: green; }")
 
-        _(Sanitize::CSS.tree!(tree, :properties => %w[background color width])).must_be_same_as tree
+        _(Sanitize::CSS.tree!(tree, properties: %w[background color width])).must_be_same_as tree
 
-        _(Crass::Parser.stringify(tree)).must_equal String.new("\n") <<
-            ".foo { background: #fff;  }\n" <<
-            "#bar {  background: green; }"
+        _(Crass::Parser.stringify(tree)).must_equal "\n" \
+          ".foo { background: #fff;  }\n" \
+          "#bar {  background: green; }"
       end
     end
   end
 
-  describe 'functionality' do
+  describe "functionality" do
     before do
       @default = Sanitize::CSS.new
       @relaxed = Sanitize::CSS.new(Sanitize::Config::RELAXED[:css])
     end
 
     # https://github.com/rgrove/sanitize/issues/121
-    it 'should parse the contents of @media rules properly' do
+    it "should parse the contents of @media rules properly" do
       css = '@media { p[class="center"] { text-align: center; }}'
       _(@relaxed.stylesheet(css)).must_equal css
 
@@ -287,7 +291,7 @@ describe 'Sanitize::CSS' do
       ].strip
     end
 
-    it 'should parse @page rules properly' do
+    it "should parse @page rules properly" do
       css = %[
         @page { margin: 2cm } /* All margins set to 2cm */
 
@@ -320,15 +324,50 @@ describe 'Sanitize::CSS' do
           .foo { color: green; }
         ].strip
 
-        _(@relaxed.stylesheet(css).strip).must_equal %[
+        _(@relaxed.stylesheet(css).strip).must_equal %(
           .foo { color: green; }
-        ].strip
+        ).strip
+      end
+
+      it "preserves allowlisted @container at-rules" do
+        # Sample code courtesy of MDN:
+        # https://developer.mozilla.org/en-US/docs/Web/CSS/@container
+        css = %(
+          @container (width > 400px) {
+            h2 {
+              font-size: 1.5em;
+            }
+          }
+
+          /* with an optional <container-name> */
+          @container tall (height > 30rem) {
+            h2 {
+              line-height: 1.6;
+            }
+          }
+
+          /* multiple queries in a single condition */
+          @container (width > 400px) and style(--responsive: true) {
+            h2 {
+              font-size: 1.5em;
+            }
+          }
+
+          /* condition list */
+          @container card (width > 400px), style(--responsive: true) {
+            h2 {
+              font-size: 1.5em;
+            }
+          }
+        ).strip
+
+        _(@relaxed.stylesheet(css).strip).must_equal css
       end
 
       describe "when blockless at-rules are allowlisted" do
         before do
           @scss = Sanitize::CSS.new(Sanitize::Config.merge(Sanitize::Config::RELAXED[:css], {
-            :at_rules => ['charset', 'import']
+            at_rules: ["charset", "import"]
           }))
         end
 
@@ -347,24 +386,23 @@ describe 'Sanitize::CSS' do
         end
 
         it "should remove them if they have invalid blocks" do
-          css = %[
+          css = %(
             @charset { color: green }
             @import { color: green }
             .foo { color: green; }
-          ].strip
+          ).strip
 
-          _(@scss.stylesheet(css).strip).must_equal %[
+          _(@scss.stylesheet(css).strip).must_equal %(
             .foo { color: green; }
-          ].strip
+          ).strip
         end
       end
 
       describe "when validating @import rules" do
-
         describe "with no validation proc specified" do
           before do
             @scss = Sanitize::CSS.new(Sanitize::Config.merge(Sanitize::Config::RELAXED[:css], {
-              :at_rules => ['import']
+              at_rules: ["import"]
             }))
           end
 
@@ -381,10 +419,10 @@ describe 'Sanitize::CSS' do
 
         describe "with a validation proc specified" do
           before do
-            google_font_validator = Proc.new { |url| url.start_with?("https://fonts.googleapis.com") }
+            google_font_validator = proc { |url| url.start_with?("https://fonts.googleapis.com") }
 
             @scss = Sanitize::CSS.new(Sanitize::Config.merge(Sanitize::Config::RELAXED[:css], {
-              :at_rules => ['import'], :import_url_validator => google_font_validator
+              at_rules: ["import"], import_url_validator: google_font_validator
             }))
           end
 
@@ -407,9 +445,9 @@ describe 'Sanitize::CSS' do
               @import url('https://nastysite.com/nasty_hax0r.css');
             ].strip
 
-            _(@scss.stylesheet(css).strip).must_equal %[
+            _(@scss.stylesheet(css).strip).must_equal %(
               @import 'https://fonts.googleapis.com/css?family=Indie+Flower';
-            ].strip
+            ).strip
           end
 
           it "should not allow a blank url" do
@@ -419,9 +457,9 @@ describe 'Sanitize::CSS' do
               @import url('');
             ].strip
 
-            _(@scss.stylesheet(css).strip).must_equal %[
+            _(@scss.stylesheet(css).strip).must_equal %(
               @import 'https://fonts.googleapis.com/css?family=Indie+Flower';
-            ].strip
+            ).strip
           end
         end
       end