1

I have a very simple web page with some tables, with a very simple CSS file. When trying to add SRI, the CSS completely stops loading, despite the hash being provided. Here is the CSS :

table,
td,
th {
    border: 1px solid black;
}

td,
th {
    padding: 5px;
}

and the relevant code of the html page :

<!DOCTYPE html>
<html lang="en">

<head>
    <title>Tables</title>
    <link rel="stylesheet" href="tables.css"
        integrity="sha384-Ra8hXflH9FmBW7JYCsWx2T0y5ArSUFunMLGGpENlPZPmWvZ8mEKN86iDTUdNwtQW">
</head>

<body>
    <!-- A table to check that the css is loading -->

    <table>
        <tbody>
            <tr>
                <td>1</td>
                <td>2</td>
                <td>3</td>
            </tr>
        </tbody>
    </table>
</body>

</html>

The key was generated using the command openssl dgst -sha384 -binary tp/tables.css | openssl base64 -A on macOS Ventura 13.1

When opening the console the following error is shown :

Cannot load stylesheet file:///Users/ambrosine/Developer/Web/tables.css. Failed integrity metadata check. Content length: 70, Expected content length: 70, Expected metadata: sha384-Ra8hXflH9FmBW7JYCsWx2T0y5ArSUFunMLGGpENlPZPmWvZ8mEKN86iDTUdNwtQW
ice-wind
  • 690
  • 4
  • 20
  • 1
    Are you using live server or opening as file? Does it work without the integrity attribute? Have you checked the console for CORS? – Zach Jensz Feb 09 '23 at 08:41
  • 1
    which browser are you using? Please check console for errors – Sahil Dhir Feb 09 '23 at 08:42
  • @ZachJensz Opening in Safari 16.2 as a file, everything works without the integrity attribute. I have no idea what a CORS is. – ice-wind Feb 09 '23 at 09:02
  • CORS is `Cross Origin Resource Sharing` - a protocol that helps negotiate sharing of files from domains other than that from which the request is made – Professor Abronsius Feb 09 '23 at 09:03
  • @ProfessorAbronsius Thank you. It doesn't seem to apply here as all resources are loaded from the local file system – ice-wind Feb 09 '23 at 09:18
  • @SahilDhir Opening in Safari 16.2, added error message to the post – ice-wind Feb 09 '23 at 09:18
  • Silly question perhaps: Have you modified the CSS since generating the hash? – Professor Abronsius Feb 09 '23 at 09:32
  • @ProfessorAbronsius Silly indeed, but understandable on such a basic question ! I have not, and I have tried generating multiple times with the exact same resulting key. – ice-wind Feb 09 '23 at 09:39
  • Loading a stylesheet with the file protocol, such as `file:///Users/ambrosine/Develo` is the reason. That is NOT a web accessible path - if you are running a webserver it should be a path relative to the server rather than the OS. – Professor Abronsius Feb 09 '23 at 09:44
  • @ProfessorAbronsius I am not running a web server though, I don't know how that would even be done. For now I'm just trying to make a valid local web page – ice-wind Feb 09 '23 at 09:48
  • That's really beyond the scope of a simple Q&A on Stack but there are plenty of resources on how to setup a webserver (apache being the favourite most likely) - there are packages that will take care of installing all necessary files etc. But as this is a local webpage you do not need worry about SRI unless you are using CSS/JS from a CDN. – Professor Abronsius Feb 09 '23 at 09:53
  • @ProfessorAbronsius The validator wants me to use SRI though. Is it just not available for loading local resources ? – ice-wind Feb 09 '23 at 09:54
  • If you are working locally you don't need to add that integrity attribute.. – Sahil Dhir Feb 09 '23 at 09:54
  • `The validator` - is that the W3C validator or a-n-other? – Professor Abronsius Feb 09 '23 at 09:55
  • @ProfessorAbronsius `html-validate` to be precise, on which I have enabled every rule. I am a bit annoyed that it doesn't seem to cover everything the W3C does, but the W3C VSCodium extension doesn't seem to want to work. – ice-wind Feb 09 '23 at 10:01
  • Actually it just started working again, so I switched to the W3C one. I'm not sure it's actually up to date though, it doesn't say anything about self-closing tags when the online version does. – ice-wind Feb 09 '23 at 10:04
  • as stated: for local web dev you should be able to negate the SRI completely. Remove the `integrity` parameter from the script uri. Perhaps get a webserver running and see what happens – Professor Abronsius Feb 09 '23 at 10:05

0 Answers0