Feature: #109187 - Add integrity property to CSS includes
See forge#109187
Description
The TypoScript properties
include and
include
now support the
integrity property for Subresource Integrity (SRI)
checking, bringing CSS includes to parity with the existing SRI support in
include,
include,
include,
and
include.
The
crossorigin property is also supported. When
integrity
is set without an explicit
crossorigin value for URI resources (e.g.
external URLs),
crossorigin="anonymous" is automatically added, which
is required for SRI validation to work cross-origin.
The
integrity attribute is not added to inline styles
(
inline = 1), since SRI only applies to external resources.
The
Page and
Page methods
have gained two new parameters
$integrity and
$crossorigin.
Impact
It is now possible to add SRI integrity hashes to CSS files included via TypoScript:
page.includeCSS {
main = https://cdn.example.com/styles/main.css
main.integrity = sha384-abc123==
# crossorigin is auto-set to "anonymous" when integrity is given
}
page.includeCSSLibs {
vendor = https://cdn.example.com/vendor.css
vendor.integrity = sha384-xyz789==
vendor.crossorigin = anonymous
}
This results in the following HTML output:
<link rel="stylesheet" href="https://cdn.example.com/styles/main.css" media="all" integrity="sha384-abc123==" crossorigin="anonymous">
Note
The integrity hash value can be generated using the browser's developer tools or command-line tools. See Subresource Integrity on MDN for details on how to generate and use integrity hashes.