testing/web-platform/tests/css/css-values/attr-security.html
author dadaa <daisuke.akatsuka@birchill.co.jp>
Wed, 09 Jul 2025 04:53:58 +0000 (7 hours ago)
changeset 795836 a5500d271fe3a1fefb4d81d96fc4abd00d9eade7
parent 794483 9a28226cd610f4185e098c008648f6ff1c3700a9
permissions -rw-r--r--
Bug 1957280: Limit user's mouse amount for tree component r=places-reviewers,reusable-components-reviewers,masayuki,mstriemer Differential Revision: https://phabricator.services.mozilla.com/D251224
<!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 {
    --condition-val: 3;
    --str: text;
    --true: true;
    --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');

    // Test attr-tainting carries through if() function.
    test_attr('--x',
              'image-set(if(style(--true): 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(if(style(--true): attr(data-foo);))',
              'https://does-not-exist.test/404.png',
              'none');
    test_attr('background-image',
              `image-set(
                if(style(--true): url(https://does-not-exist-2.test/404.png);
                   else: attr(data-foo);))`,
              'https://does-not-exist-2.test/404.png',
              'image-set(url("https://does-not-exist-2.test/404.png") 1dppx)');
    test_attr('background-image',
              `image-set(
                if(style(--some-string): url(https://does-not-exist.test/404.png);))`,
              'https://does-not-exist.test/404.png',
              'none');
    test_attr('background-image',
              `image-set(
                if(style(--condition-val: attr(data-foo type(*))): url(https://does-not-exist.test/404.png);))`,
              '3',
              'none');
    test_attr('background-image',
              `image-set(
                if(style(--condition-val: attr(data-foo type(*))): url(https://does-not-exist.test/404.png);
                   style(--true): url(https://does-not-exist.test/404.png);
                   else: url(https://does-not-exist.test/404.png);))`,
              '1',
              'none');
    test_attr('background-image',
              `image-set(if(style(--true): url(https://does-not-exist.test/404.png);
                            style(--condition-val): url(https://does-not-exist.test/404.png);
                            else: url(https://does-not-exist.test/404.png);))`,
              'attr(data-foo type(*))',
              'image-set(url("https://does-not-exist.test/404.png") 1dppx)');
    test_attr('background-image',
              `image-set(
                if(style(--condition-val: if(style(--true): attr(data-foo type(*));)): url(https://does-not-exist.test/404.png);))`,
              '3',
              'none');
    test_attr('--x',
              `image-set(if(style(--condition-val: if(style(--true): attr(data-foo type(*));)): url(https://does-not-exist.test/404.png);))`,
              '3',
              'image-set(url(https://does-not-exist.test/404.png))');
    test_attr('--x',
              `image-set(if(style(--condition-val >= attr(data-foo type(*))): url(https://does-not-exist.test/404.png);))`,
              '3',
              'image-set(url(https://does-not-exist.test/404.png))');
    test_attr('background-image',
              `image-set(
                if(style(--condition-val >= attr(data-foo type(*))): url(https://does-not-exist.test/404.png);))`,
              '3',
              'none');
    test_attr('background-image',
              `image-set(
                if(style(--condition-val < attr(data-foo type(*))): url(https://does-not-exist.test/404.png);))`,
              '3',
              'none');
    test_attr('background-image',
              `image-set(
                if(style(--str < attr(data-foo type(*))): url(https://does-not-exist.test/404.png);))`,
              '3',
              'none');
    test_attr('background-image',
              `image-set(
                if(style(--condition-val < attr(data-foo type(*))): url(https://does-not-exist.test/404.png);))`,
              'text',
              'none');
</script>