Javascript uses the integrity attribute for security verification

1. Import files using script tags

In html , script tag can import a js file through the src attribute. The imported js file can be local or remote.

1. Import local files

The development environment generally introduces local js files.

<script src="./js/index.js"></script>

2. Import remote files

After deployment online, it is generally distributed to cdn , and remote files need to be introduced.

Such as:

<script src="https://cdn.xxx.xx/js/index.js"></script>

However, there is a problem with introducing remote files. If the corresponding files are tampered with, it may affect the users. Although cdn are generally reliable, they cannot be ruled out from being attacked by hackers.

In this case, security verification can be performed through the integrity attribute of script tag.

2. Integrity Security Verification

integrity attribute sets hash value of the imported js file. When the browser downloads the js file, it will perform hash calculation on the js file. If they are consistent, it will be loaded normally, otherwise it will refuse to load and run.

Such as:

<script
    integrity="sha384-oqVuAfXRKap7fdgcCY5uykM6+R9GqQ8K/uxy9rx7HNQlGYl1kPzQho1wx4JwY8wC"
    src="https://cdn.xxx.xx/js/index.js"></script>

1. Import Vue's CDN resources

For example, we want to introduce the CDN resources of Vue:

https://unpkg.com/[email protected]/dist/vue.global.js

You can generate the hash value through https://www.srihash.org/.

Integrity generates hash value:

Finally, add the value of integrity to the script tag.

<script src="https://unpkg.com/[email protected]/dist/vue.global.js"
    integrity="sha384-0k9//QJdpmfSdp5IK3oJjOYPfz42f2FE0goMLtK9Vq7aKllvc4Lnz7lHPHiFhvDP"
    crossorigin="anonymous">
</script>

2. Verify whether it is normal

Because the imported resource is a cdn resource, it cannot be modified directly, but integrity integrity be modified.

Eventually the browser will report the following error:

Failed to find a valid digest in the 'integrity' attribute for resource 'https://unpkg.com/[email protected]/dist/vue.global.js' with computed SHA-256 integrity 'Wr5PnkpmZ3oQFRZLfDrI6fsePSMak5h8rW2rqq+mdWg='. The resource has been blocked.

This means that hash value of the cdn file does not match integrity .

This is the end of this article about using the integrity attribute for security verification in JavaScript. For more relevant script integrity content, please search for previous articles on 123WORDPRESS.COM or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future!