css/css-values/attr-security.html

<!DOCTYPE html>
<title>CSS Values and Units Test: attr() security limitations</title>
<link rel="help" href="https://drafts.csswg.org/css-values-5/#attr-security">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>

<style>
  @property --some-string {
    syntax: "<string>";
    inherits: false;
    initial-value: "empty";
  }
  @property --some-string-list {
    syntax: "<string>+";
    inherits: false;
    initial-value: "empty";
  }
  div {
    --some-string: attr(data-foo);
    --some-string-list: "https://does-not-exist2.test/404.png" attr(data-foo);
    --some-other-url: attr(data-foo);
    --image-set-valid:  url("https://does-not-exist.test/404.png") type(attr(data-foo));
    --image-set-invalid: attr(data-foo type(<url>)) 1x;
  }
</style>

<html>
  <body>
    <div id="attr"></div>
  </body>
</html>

<script>
    function test_attr(property, attrString, attrValue, expectedValue) {
        var elem = document.getElementById("attr");
        elem.setAttribute("data-foo", attrValue);
        elem.style.setProperty(property, attrString);

        test(() => {
            assert_equals(window.getComputedStyle(elem).getPropertyValue(property),
                          expectedValue,
                          "'" + property + ": " + attrString + "' with data-foo='" + attrValue + "'");
        });

        elem.style.setProperty(property, null);
    }

    function test_registered_custom_property(customPropertyName, customPropertySyntax, customPropertyInitialValue,
                                             attrValue, expectedValue) {
      window.CSS.registerProperty({
        name: customPropertyName,
        syntax: customPropertySyntax,
        inherits: false,
        initialValue: customPropertyInitialValue,
      });
      var elem = document.getElementById("attr");
      elem.setAttribute("data-foo", attrValue);
      var attrString = "attr(data-foo type(" + customPropertySyntax + "))";
      elem.style.setProperty(customPropertyName, attrString);
      test(() => {
          assert_equals(window.getComputedStyle(elem).getPropertyValue(customPropertyName),
                        expectedValue,
                          "'" + customPropertyName + ": " + attrString + "' with data-foo='" + attrValue + "'");
      });
      elem.style.setProperty(customPropertyName, null);
    }

    // Direct use.
    test_attr('--x',
              'image-set(attr(data-foo))',
              'https://does-not-exist.test/404.png',
              'image-set("https://does-not-exist.test/404.png")');
    test_attr('background-image',
              'image-set(attr(data-foo))',
              'https://does-not-exist.test/404.png',
              'none');
    test_attr('background-image',
              'image-set("https://does-not-exist.test/404.png")',
              'https://does-not-exist.test/404.png',
              'image-set(url("https://does-not-exist.test/404.png") 1dppx)');

    test_attr('--x',
              'src(attr(data-foo))',
              'https://does-not-exist.test/404.png',
              'src("https://does-not-exist.test/404.png")');
    test_attr('background-image',
              'src(attr(data-foo))',
              'https://does-not-exist.test/404.png',
              'none');
    test_attr('background-image',
              'src("https://does-not-exist.test/404.png")',
              'https://does-not-exist.test/404.png',
              'src(url("https://does-not-exist.test/404.png"))');

    // The following string() function is under discussion in the working group and does not exist yet.
    test_attr('--x',
              'src(string("https://does-not-exist.test" attr(data-foo)))',
              '/404.png',
              'src(string("https://does-not-exist.test" "/404.png"))');
    test_attr('background-image',
              'src(string("https://does-not-exist.test" attr(data-foo)))',
              '/404.png',
              'none');
    test_attr('background-image',
              'src(string("https://does-not-exist.test/""404.png"))',
              '/404.png',
              'src(url("https://does-not-exist.test/404.png"))');

    test_attr('--x',
              'attr(data-foo type(<url>))',
              'url(https://does-not-exist.test/404.png)',
              'url("https://does-not-exist.test/404.png")');
    test_attr('background-image',
              'attr(data-foo type(<url>))',
              'url(https://does-not-exist.test/404.png)',
              'none');
    test_attr('background-image',
              'url("https://does-not-exist.test/404.png")',
              'url(https://does-not-exist.test/404.png)',
              'url("https://does-not-exist.test/404.png")');

    test_attr('--x',
              'image(attr(data-foo))',
              'https://does-not-exist.test/404.png',
              'image("https://does-not-exist.test/404.png")');
    test_attr('background-image',
              'image(attr(data-foo))',
              'https://does-not-exist.test/404.png',
              'none');
    test_attr('background-image',
              'image("https://does-not-exist.test/404.png")',
              'https://does-not-exist.test/404.png',
              'image(url("https://does-not-exist.test/404.png"))');

    test_attr('background-image',
              'url(https://does-not-exist.test/404.png), attr(data-foo type(<image>))',
              'linear-gradient(#000000, #ffffff)',
              'url("https://does-not-exist.test/404.png"), linear-gradient(rgb(0, 0, 0), rgb(255, 255, 255))');

    // The remaining tests use image-set(), but should be equivalent for image() etc.

    // Test in a fallback.
    test_attr('--x',
              'image-set(var(--y, attr(data-foo)))',
              'https://does-not-exist.test/404.png',
              'image-set("https://does-not-exist.test/404.png")');
    test_attr('background-image',
              'image-set(var(--y, attr(data-foo)))',
              'https://does-not-exist.test/404.png',
              'none');

    // Test via a registered custom property.
    test_attr('--x',
              'image-set(var(--some-string))',
              'https://does-not-exist.test/404.png',
              'image-set("https://does-not-exist.test/404.png")');
    test_attr('background-image',
              'image-set(var(--some-string))',
              'https://does-not-exist.test/404.png',
              'none');

    // Test via a registered custom property (list).
    test_attr('--x',
              'image-set(var(--some-string-list))',
              'https://does-not-exist.test/404.png',
              'image-set("https://does-not-exist2.test/404.png" "https://does-not-exist.test/404.png")');
    test_attr('background-image',
              'image-set(var(--some-string-list))',
              'https://does-not-exist.test/404.png',
              'none');
    test_registered_custom_property('--registered-url', '<url>', 'url("https://does-not-exist.test/empty-url")', 'https://does-not-exist.test/404.png', 'url("https://does-not-exist.test/empty-url")');
    test_registered_custom_property('--registered-color', '<color>', 'red', 'blue', 'rgb(0, 0, 255)');

    // Test via a non-registered custom property.
    test_attr('--x',
              'image-set(var(--some-other-url))',
              'https://does-not-exist.test/404.png',
              'image-set("https://does-not-exist.test/404.png")');
    test_attr('background-image',
              'image-set(var(--some-other-url))',
              'https://does-not-exist.test/404.png',
              'none');

    // Test multiple token substitution
    test_attr('background-image',
              'attr(data-foo type(*))',
              'url(https://does-not-exist.test/404.png), linear-gradient(black, white)',
              'none');

    // Test total attr()-tainting for substitution values
    test_attr('background-image',
              'image-set(var(--image-set-valid))',
              'image/jpeg',
              'none');
    test_attr('background-image',
              'image-set(var(--image-set-invalid))',
              'https://does-not-exist.test/404.png',
              'none');
</script>