mozilla-central/testing/web-platform/tests/css/css-values/attr-security.html

Source code

Revision control

Copy as Markdown

Other Tools

Test Info: Warnings

<!DOCTYPE html>
<title>CSS Values and Units Test: attr() security limitations</title>
<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))',
test_attr('background-image',
'image-set(attr(data-foo))',
'none');
test_attr('background-image',
'image-set(url("https://does-not-exist.test/404.png") 1dppx)');
test_attr('--x',
'src(attr(data-foo))',
test_attr('background-image',
'src(attr(data-foo))',
'none');
test_attr('background-image',
// 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',
'/404.png',
test_attr('--x',
'attr(data-foo type(<url>))',
test_attr('background-image',
'attr(data-foo type(<url>))',
'none');
test_attr('background-image',
test_attr('--x',
'image(attr(data-foo))',
test_attr('background-image',
'image(attr(data-foo))',
'none');
test_attr('background-image',
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)))',
test_attr('background-image',
'image-set(var(--y, attr(data-foo)))',
'none');
// Test via a registered custom property.
test_attr('--x',
'image-set(var(--some-string))',
test_attr('background-image',
'image-set(var(--some-string))',
'none');
// Test via a registered custom property (list).
test_attr('--x',
'image-set(var(--some-string-list))',
test_attr('background-image',
'image-set(var(--some-string-list))',
'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))',
test_attr('background-image',
'image-set(var(--some-other-url))',
'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))',
'none');
</script>