Enable SRI on CDN docs

[h4ckninja]

Hi,

This is part feature request, part security. Subresource Integrity is encouraged on CDN files. On Getting Started, three CDNs are linked, but none of them use SRI to mitigate against the issue of CDN's delivering malware through modified JavaScript. This has happened before with a number of projects, such as jQuery.

[TheJltres]

Cool idea.

I see one little problem, browser compatibility.
For example IOS Safari.

Should FUI update browser compatibility (only for CDN of course) or offer both CDN and CDN with SRI?

[lubber-de]

@TheJltres For my understanding the integrity style/link attribute is simply ignored on Browsers like IE or Safari iOS

[TheJltres]

Didn't know, thanks!

[h4ckninja]

I'm brand new to FUI, looking to switch away from BS4, so I'm diving in head-first to the project. :)

Maybe add a note to the docs explaining that not all browsers understand SRI and won't see the benefit? Since my day job is Information Security, I'm all about educating developers to make better decisions. I'm happy to submit a PR to the docs if it'd help explain why SRI, or if you feel like it'd cause more confusion, totally fine.

[lubber-de]

@h4ckninja You are welcome to prepare a PR 🙂

The only Problem i see is that we would have to update that hash every time we do a release (otherwise the old hash will prevent loading the new version which is even worse if people copy the docs code)

So you may prepare a PR which is not only adding the integrity parameter to the docs examples, but also add some automatic steps in the build script for the docs, so the SRI hash is fetched automatically from jsdelivr (or even calculated)

You can get the SRI hash values from jsdelivr as follows

[TheJltres]

I take a look on how to do it, and I think get it from jsdelivr would not be the best way, they don't have an API for that, and make sense, you can generate that token with a simple command like this: Tools for generating SRI hashes

echo 'sha384-'(curl https://cdn.jsdelivr.net/npm/fomantic-ui@2.8.7/dist/semantic.min.js | openssl dgst -sha384 -binary | openssl base64 -A)

So I think the best possible implementation is a variable on docpad.coffee and update on each new release.

Or something like this https://stackoverflow.com/questions/12460373/execute-command-line-order-from-coffee-script, but the code will be generated each time a request is done...

[ko2in]

jsdelivr do have API. Here's how you can list files for FUI package: https://data.jsdelivr.com/v1/package/npm/fomantic-ui@2.8.1

But, it's not easy to parse SRI hash from the JSON object. There's no other API endpoint to get only for SRI hash for each file. You'll have to list the files from FUI package and then filter the semantic.min.css and semantic.min.js under files property to get SRI hash for these files.

Here's API documentation (https://github.com/jsdelivr/data.jsdelivr.com).

It's easier to get SRI hash from cdnjs and unpkg than jsdelivr.

cdnjs:
https://api.cdnjs.com/libraries/fomantic-ui

SRI hash is in root level of response JSON. Each file also have particular SRI hash.

unpkg:
https://unpkg.com/fomantic-ui@2.8.7/dist/semantic.min.css?meta
https://unpkg.com/fomantic-ui@2.8.7/dist/semantic.min.js?meta

Note the query string ?meta is required. Otherwise, you'll get the file content.

[h4ckninja]

Apologies, it's been a busy week at work.

I can try to dive in this weekend. Ideally, I think, would be to generate the hash prior to pushing to the CDN - at build time.

The reason is the SRI hash is to mitigate compromised packages on CDNs, but if we don't know the state of the of the file on the CDN prior to obtaining the hash, we could be hashing a compromised file. I don't know what the build pipeline looks like for Fomantic, but would it be possible to generate the hash, push them to the docs that get built, and publish?

[TheJltres]

@ko2in I inspect their page, and only use that API for the badge, but nice to see there is more information

Maybe they do that on server side