{"componentChunkName":"component---src-templates-blog-post-js","path":"/angular-subresource-integrity/","result":{"data":{"site":{"siteMetadata":{"title":"Fabrizio Fortunato","author":"Fabrizio Fortunato","siteUrl":"https://izifortune.com"}},"markdownRemark":{"id":"8b43ed3a-e6c7-5eed-b57a-58f1dddaa89b","excerpt":"Subresource integrity is a browser feature that verifies that a resource, script or link element, has not been tampered with. Subresource integrity helps…","html":"

Subresource integrity is a browser feature that verifies that a resource, script or link element, has not been tampered with. Subresource integrity helps protecting your website from any resource manipulation that can happen especially if you are hosting your resources in a CDN where you are not in control of hosting the resources that you are using.

\n

Through malicious javascript an attacker can get control of various informations of your users that are browsing your site such as: cookies, storage, form data etc. Thanks to subresource integrity you can control that no resource has being tampered directly in the browser.

\n

You can use subresource integrity by adding the attribute integrity to any script and link tag. The integrity attribute accepts a string containing the suffix of the hash algorithm and followed by the base64 hash.

\n
<script\n      type=\"text/javascript\"\n      src=\"runtime.js\"\n      integrity=\"sha384-l2idrIRRBrjHbp+jErEfqKMlALJ8XhHO2xWq/3wCMAE2uO8I7Wv+yulQip2yKsG+\"\n      crossorigin=\"anonymous\">\n</script>
\n

In order to generate a hash in OSX you can use shasum command line utility over the desired file and then pass the output to a series of transformations:

\n
shasum -a 384 /path/file | awk '{ print $1 }' | xxd -r -p | base64
\n

This will output a hash which we can then use in our subresource integrity. Let’s start with a simple example, creating a javascript file tegridy.js:

\n
function tegridy() {\n return 'No vaping';\n}
\n

Now using shasum command as described above we will get the hash without the prefix:

\n
shasum -a 384 tegridy.js | awk '{ print $1 }' | xxd -r -p | base64\n\n>> e8LWRk7Tfo31vuZ4RTkVYgYunN58TLsbjxBkG7Qi/kikqRWXkwRInR2NB5ga0GUt
\n

Once we have the hash we can add the integrity attribute in the script tag adding the prefix of the hash algorithm used:

\n
<html>\n<title>Tegridy Farm</title>\n<body>\n<script\n  integrity=\"sha384-e8LWRk7Tfo31vuZ4RTkVYgYunN58TLsbjxBkG7Qi/kikqRWXkwRInR2NB5ga0GUt\"\n  src=\"./tegridy.js\">\n</script>\n<script>\nconsole.log(tegridy());\n</script>\n</body>
\n

The browser, before executing the script, will check the integrity of the script based on the hash passed as argument. If we then try to change the file tegridy.js slightly:

\n
function tegridy() {\n return 'Yes vaping';\n}
\n

The integrity of the file won’t match with the attribute passed the browser then will throw a network error refusing to execute the script and indicating that fetching it failed.

\n

\n \n \n \n \n

\n

Angular integrity

\n

For simple applications where resources hardly change you can calculate the hash for each resource manually and attach to the element. While working on Angular application instead most of the javascript resources will be bundled by webpack at build time. A manual workflow is not exactly scalable since every time we will make a change to our application, angular-cli will create a new bundled resource which will need a new hash to be generated.

\n

Thanks to the angular-cli team there is already an option to add the subresource integrity to your files by simply appending —subresource-integrity to your build script:

\n
\"scripts\": {\n  \"ng\": \"ng\",\n  \"start\": \"ng serve\",\n  \"build\": \"ng build --subresource-integrity\",\n  \"test\": \"ng test\",\n  \"lint\": \"ng lint\",\n  \"e2e\": \"ng e2e\"\n},
\n

Once the flag is added, the cli will automatically generate a hash for the application resources and add to the index.html when running npm run build:

\n
...\n<script\n  type=\"text/javascript\"\n  src=\"runtime.js\"\n  integrity=\"sha384-l2idrIRRBrjHbp+jErEfqKMlALJ8XhHO2xWq/3wCMAE2uO8I7Wv+yulQip2yKsG+\"\n  crossorigin=\"anonymous\">\n</script>\n<script\n  type=\"text/javascript\"\n  src=\"es2015-polyfills.js\"\n  nomodule\n  integrity=\"sha384-3g/ASsyNZi2bts3atqex3i7NlTDWAWh0/E+F1Y6dq80XjKjmW5f5LG7LThpiv4et\"\n  crossorigin=\"anonymous\">\n</script>\n...
\n

This is especially useful when you are hosting all your application assets in another service like a CDN which sits outside of your organisation. Remember that you can start using subresource integrity even for third-party CDN hosted files. Popular CDN like unpkg and cdnjs already support it.

","frontmatter":{"title":"Angular subresource integrity","date":"February 12, 2019","description":"Improve the security of your application by using subresource integrity in an Angular application","socialImage":{"childImageSharp":{"fixed":{"src":"/dist/static/f19988208a967ad08e574bf5d54b6ff7/048fd/tegridy.png"}}},"image":{"childImageSharp":{"fluid":{"base64":"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAICAIAAAB2/0i6AAAACXBIWXMAAAsSAAALEgHS3X78AAABF0lEQVQY02PQLT+OjPTKjmlVnlJouGRcfCglaHps0AzDksNK9Ze0K0/qlR9DU8yAofOkdd7uCeYlR4Xd7zHqn2DUXSvsWm9ZZpG/R7sCXT+KZv2yo2o1Z30TVj9jVH/BoHGPQe8Eg+4ZBtVTzKouKes0qs8ATcdtc/kxzapT9tk7ttdN3dc64WDH1A01nRvqO7dUTbQsPaxVfkIPj7OBSKfihGHx4d2BFRfcko85J+5wStjjHLcmsNyw4rgOqkosmvXLjqlWn9so6fuJQfwOo+ZRRvXLDKLTZIM0K04RCDBImAEDxil353STwlusJkdYjVvMCu3zdupUnNQtI6QZ6vPKUyq150NilvjFLlOtPQ+MAj0MnUAEAJCh3Fzx3bC9AAAAAElFTkSuQmCC","aspectRatio":2.609375,"src":"/dist/static/7b22c8c4e964c8f74ada428ba9896e5e/fc147/tegridy2.png","srcSet":"/dist/static/7b22c8c4e964c8f74ada428ba9896e5e/17cc0/tegridy2.png 167w,\n/dist/static/7b22c8c4e964c8f74ada428ba9896e5e/f7869/tegridy2.png 333w,\n/dist/static/7b22c8c4e964c8f74ada428ba9896e5e/fc147/tegridy2.png 649w","sizes":"(max-width: 649px) 100vw, 649px"}}}}}},"pageContext":{"slug":"/angular-subresource-integrity/","previous":{"fields":{"slug":"/theming-angular-at-ryanair/"},"frontmatter":{"title":"Theming Angular at Ryanair"}},"next":{"fields":{"slug":"/lighthouse-architecture-demystified/"},"frontmatter":{"title":"Lighthouse architecture demystified"}}}}}