On occasion when my brother asked me how to generate SRI code for the browser to understand, I also tried searching a bit and found it quite interesting and was the knowledge that I had never thought of. Today I am going to learn about Subresource Integrity (SRI). It was a little, but I found this and then came out to Web Security so I also wrote a bit of definition and introduced it.

A brief introduction to Web Security

Web security is also known as “Cyber ​​security” (this is something I’ve heard because in my team there is a team called Cyber ​​security =))) that involves protecting a website or web application by detecting. , prevent and respond to attacks on products or web applications.

Cybercriminals still look for web security vulnerabilities every day to attack as well as profit from security holes. Types of websites are often subject to high warning about the possibility of network attacks such as social networks, e-commerce, government websites … To avoid the occurrence of cases that can cause serious consequences. For websites, there’s a security system for websites. Web security brings together a variety of security measures and protocols aimed at protecting your website or web application from harmful agents.

Some solutions to implement website security such as:

• Black box testing tools
• Fuzzing tools
• White box testing tools
• Web application firewalls (WAF)
• Security or vulnerability scanners
• Password cracking tools

What is Subresource Integrity (SRI)?

Subresource Integrity (SRI) is a security feature that instructs browsers to verify resources provided by third parties such as CDNs that have been downloaded without any influence or action on them. SRI is able to do this by comparing the hash values ​​that the resource stores with the values ​​in the website’s HTML tags.

Developers often use CDNs to improve application speed, performance and save bandwidth. At the same time, they also want to make sure that the resources they receive serve only the content they expect, not the malicious code or code that is harmful to the application they are developing. However, the use of third-party resources has never been safe and highly likely to be manipulated. Hackers have access to a CDN that can manipulate and edit files.

Technologies like SSL / TLS and HSTS ensure that resources are downloaded securely from third parties. However, these technologies also cannot verify whether the downloaded resource has been compromised. TLS and HSTS cannot prevent server-level attacks; they can only prevent attacks during transport. Developers use SRI to instruct the browser to run only the unmodified files and to have the same code as defined in the HTML tags.

We use the SRI feature by specifying the base64 encoded hash of the resource that the expected learning load on demand. The integrity attribute contains the hash function and is added to HTML tags like <link> or <script> . This integrity chain consists of a base64 encoded hash function followed by a prefix depending on the hashing algorithm. This prefix can be sha265, sha384 or sha512.

The format of the integrity attribute is as follows:

For example with the <script> tag when using the CDN is jquery as follows:

Once the browser encounters an HTML tag such as <link> or <script> with the integrity attribute, it will first compare the file with the expected hash given in the integrity value. If the given value matches, then the browser will load the resource. But if the value in the HTML tag does not match the integrity value of the third party resource then the browser will refuse to download the resource. And it returns an error indicating that the resource cannot be loaded as shown below.

Source: https://www.troyhunt.com/protecting-your-embedded-content-with-subresource-integrity-sri/

However, a little attention, apart from the src and integrity properties, we also define more crossorigin properties. It allows you to configure CORS requests for the fetched data of HTML tags. Possible values ​​are as follows:

When you try to delete the crossorigin property, the browser will say the following:

Source: https://www.troyhunt.com/protecting-your-embedded-content-with-subresource-integrity-sri/

The CORS installation attribute is required for SRI when the request has not been sent from the same place. Set this attribute to an anonymous value to ensure no authentication or identity information is sent with the request (basic auth, or cookie auth).

Create the hash function

You can easily generate code using the terminal command. In this guidance statement that you can use.

You can generate SRI code from the command with openssl:

Or use shasum:

Or use the online SRI Hash Generator

Conclude

SRI brings security benefits to customers, developers, visitors, CDN providers and third party servers. It helps websites to mitigate many risks of attacks that may arise due to tampering or modification by third party resources. SRI makes websites more secure in the event that developers get resources from third parties to use for their applications. This is where they do not have control over the server nor manage the content of resources. Using SRI will bring some clear benefits as follows:

• More users trust the site.
• Many developers rely on third-party servers.
• Notice to the developer

In general, I do not know anything about Web security, so the article is just for research and then shouting out things that seem sublime. . I still hope anyone who reads the article finds mistakes to improve ‍ .

Refer

https://developer.mozilla.org/en-US/docs/Web/Security/Subresource_Integrity