Hello and welcome to secure JavaScript programming with Vladimir [inaudible]. In this video, we will talk about Subresource or resource integrity. Let's take a web page. It has a stylesheet and it imports a script. Well, now that's pretty much the world Internet that works like that. A few stylesheets and a few scripts. We can see that this page has a hello paragraph, that is in brown, and that the script actually logs "Hello World". In the modern web, not a lot of people still write stylesheets directly and have JavaScript code that is immediately executable. Now, you use CSS preprocessors. For instance, Sass, SCSS, Stylus Less, or maybe you even do CSS in JS if you are in a cutting-edge technology schema. A lot of developers in the JavaScript front-end world actually don't write plain JavaScript anymore. They either use JSX view templates. So you find that build is not directly JavaScript. They might use higher-level languages such as TypeScript or CoffeeScript, at least if you are doing Ruby on Rails 10 years ago. Well, in order to obtain real JavaScript code, you need to transform it and there are CI steps, and there were a lot of people that can actually modify your code. When you have done that, you can even entrust the CDN that you put your website online, and will actually be able to modify and inject scripts. For instance, you can inject spyware in the webpage. If you are on the CDN, you can inject as many scripts as you want on a web page, and you can modify the script and inject code directly into scripts without using script tags. Well, at the end of the day, the Internet needed a way to make sure that the script used by the web page and that the style sheets used as a webpage were actually the ones the developer intended to use because there are so many steps. If you actually outsource the integrity hash creation when else, like a CI step or a CDN, you're probably in deep trouble. Let's understand what Subresource integrity is. Let me open my terminal and we will copy-paste a command and compute the Subresource integrity for index.js. Here I start with index.js it will do something. Let's try the word command properly. Here that's a shell command using pipes. The first of the three commands we use is cat index.js, which actually takes the content of index.js. That's the content of our file. Then we will use a second command in which we will ask OpenSSL to compute a digest for this file as an output, as a binary with the secure hash function, sha512. I chose sha512 because it was the strongest available and mostly supported by all browsers, 384 is also a right choice, and maybe you can even have both supported. You need to check the browser compatibility table, but just make sure you don't choose sha_1 generation hash and if possible, use sha_3 generation hash functions. The last part of the command, OpenSSL enc base64, actually tells OpenSSL to give us a base64 view on this sheet item. All of that is a base64. You need to forget the percent that is injected by ZSH. Is the integrity check for index.js with sha512. Now we need to update the script imports in the webpage and we use the key integrity. Now we need a way to tell the browser which hash function we used, sha512. If I wanted to compute the sha384, I would actually tell the browser, this is sha384, dash the hash. Now, let's open the page. As you can see, nothing changed. We only have the "hello world" printed here. Now, let's change the value of "hello world" with "hello world! ". If we refresh the page, it still works because the caching mechanism makes my demo terrible. If we reload the [inaudible], so there is no caching and we reload the page. We have failed to find a valid digest into integrity attribute for resource index.js, the resource has been blocked and we don't have hello world. This means that now, since the developer has put the hash here, it can't be tempered without changing the hash. Of course, there are ways in the browser to create a lifecycle of the hash. We can do exactly the same thing for the stylesheet and we do integrity, sha512 up. Now let's save this. Let's reload all of that. Yeah, it worked. If now a change my style, and I will show how terrible my tastes are in terms of color, and I'm sorry for colorblind people I am partially one of you. The hash has been refused and the stylesheet has been refused. Sadly, right now, as of internet specification, integrity check is only a recommendation. Meaning that browsers don't have the obligation to support it. Also, it only applies to script and link. There is no recommendation right now about supporting other media such as images, and that's probably a shame. I hope you understood what Subresource integrity was, how it was useful, and how you could generate a hash. Of course, if you have Node JS, generating your hash is actually encoded in base64 is actually pretty easy, and that's an exercise I will let you try at home. Thanks so much for watching this video. I hope you enjoyed it and see you soon for other JavaScript security courses.
