Detailed guide to verify the integrity of web page sub-resources

Time to write a simple compiler: use Swift's tail closure syntax in JavaScript 1614862b9640ea has been released, and I have been thinking about updating on time for the past half year. Article; But because of the trivial work and life, I couldn't stick to it. a little ashamed, but I feel that the 1614862b9640eb plan , which was established at the beginning of the year, will almost not be realized. I hope I can continue to update the article for this period of time.

What I want to share with you this time is about Subresource Integrity (Subresource Integrity). If you don't pay much attention to Web security, you may not have heard of this term. It doesn’t matter if you don’t know. Next, I’ll study and discuss this content with you. I believe that after reading this article, you can deeply understand what SRI , why use SRI , and where SRI in the project under the situation of aspect requirements.

What is SRI and what problems it solves

SRI is Subresource Integrity , which represents the integrity of sub-resources. For example link and script tags in the page are the sub-resources of the page. For example, like the following:

<link rel="stylesheet" 
      href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"  
      crossorigin="anonymous">

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js" 
        crossorigin="anonymous"></script>

Generally, in order to improve the response speed and performance of web pages, we usually put these sub-resources on the CDN . For large Internet companies, they generally have their own cloud services, and basically have their own CDN services. But for small companies, they generally use the CDN function provided by cloud service vendors. There will be a problem here. If the resources we host on the CDN of the cloud service provider are tampered with, it will have some impact on our business. Although this kind of thing does not happen under normal circumstances, if our business has high security requirements, then we still have to take precautions against this situation.

SRI is a solution to this problem. So what is the specific way to solve it? First of all, for a file, how do we know whether the content of the file has been tampered with? We can perform a hash calculation on this file and then generate a unique string associated with the file content base64 If the content of the file changes, the string generated by the same method is different from the string generated by the original file. So we know that the file has been tampered with . On this point, if everyone has an understanding of blockchain, it should be easier to understand.

For each imported third-party resource, we only need to add the integrity attribute integrity attribute is a string, and the form is as follows:

<script src="https://example.com/example-framework.js"
        integrity="sha384-oqVuAfXRKap7fdgcCY5uykM6+R9GqQ8K/uxy9rx7HNQlGYl1kPzQho1wx4JwY8wC"
        crossorigin="anonymous"></script>

Among them, sha384-oqVuAfXRKap7fdgcCY5uykM6+R9GqQ8K/uxy9rx7HNQlGYl1kPzQho1wx4JwY8wC is integrity . This string starts with sha384 , which represents the name of the corresponding secure hash algorithm, as well as sha256 and sha512 ; followed by a dash - , used to split the algorithm name and later generated by this algorithm the base64 value encoding; final oqVuAfXRKap7fdgcCY5uykM6+R9GqQ8K/uxy9rx7HNQlGYl1kPzQho1wx4JwY8wC string corresponding to the file after that calculated to produce the representation.

When the browser downloads a integrity , it will not immediately execute the code in it; or apply the style in it. The browser will first calculate whether the hash value of this file is the same as the value in the tag according to the corresponding algorithm specified in the attribute value of integrity Execute the corresponding code. If the two are different, the browser will refuse to execute the corresponding code and refuse to apply the corresponding style. An error will also be reported in the console to remind us that there is a problem with the currently downloaded sub-resource.

In this way, we use SRI ensure that our pages will not use resources downloaded from the CDN with tampered content. To ensure the safety of our pages.

How to use SRI

The above briefly introduced the SRI , so how do you practice it? Let us practice together how to use SRI .

First, we randomly create a index.html , and then add the following content in it:

<script src="http://localhost:3000/test.js"
        integrity="sha384-yGduQba2SOt4PhcoqN6zsgbwhbpK8ZBguLWCSdnSRc6zY/MmfJEmBguDBXJpvXFg"
        crossorigin="anonymous"></script>

Then create a test.js file with the following content:

document.write("Hello World!");

Then use the local Node.js of express framework or other tool that allows test.js through local http://localhost:3000/test.js access.

For the above script tag integrity properties, we can following command , by openssl obtain a corresponding tool sha384 string generation algorithm:

cat test.js | openssl dgst -sha384 -binary | openssl base64 -A

If it is a Windows environment, you need to use another way to get the corresponding string

index.html in the browser, you will see the display on the page: Hello World! . If we test.js at this time, on the basis of the original, remove the exclamation point after Hello World!

document.write("Hello World");

Then the page is blank at this time and no longer displays Hello World . The corresponding console will also report an error, but different browsers report different information:

• Chrome reported the following error:

  

• Firefox reports the following error:

  

• Safari reported the following error:

  

In short, I will remind you that the is inconsistent with the hash string after the calculation, and the browser refuses to execute the corresponding code .

There are some things to note here. If our test.js resource index.html , then we need to add crossorigin="anonymous" to the label, indicating that the request for this resource requires cross-source resource sharing. Otherwise, the browser will report the following error :

with cross-origin resource sharing, please refer to 1614862b96452d Cross-Origin Resource Sharing .

Of course, the corresponding server also needs to set the corresponding response header: Access-Control-Allow-Origin: * . If you use express , you can use cors to simply set it. The details are as follows:

// ...
app.use(
    cors({
        origin: "*",
    })
);
// ...

How to use SRI in the framework

• For the Vue project, by using Vue CLI we can easily use this function. By adding a configuration vue.config.js integrity: true , we can see after index.html that the resources introduced in the integrity attribute, as shown below:

<!-- ... -->
<link href="/css/app.fb0c6e1c.css" rel="stylesheet"
          integrity="sha384-1Ekc46o2fTK9DVGas4xXelFNSBIzgXeLlQlipQEqYUDHkR32K9dbpIkPwq+JK6cl">
<!-- ... -->
<script src="/js/chunk-vendors.0691b6c2.js"
        integrity="sha384-j7EDAmdSMZbkzJnbdSJdteOHi77fyFw7j6JeGYAf4O20/zAyQq1nJ91iweLs6NDd"></script>
<script src="/js/app.290d19ae.js"
        integrity="sha384-S3skbo1aIjA4WCmQH6ltlpwMgTXWrakI5+aloQEnNKpEKRfbNyy1eq6SrV88LGOh"></script>
<!-- ... -->

• For other frameworks, if the packaging tool uses Webpack , you can directly use the corresponding plug-in webpack-subresource-integrity , related installation and use instructions can refer to here .

Some details about Integrity

In the actual use process, there are still many details that need to be paid attention to. I will give you an in-depth introduction below.

• currently used to calculate the resource file hash algorithm sha256 , sha384 , sha512 , these belong to SHA-2 secure hash algorithm .
• currently does not recommend the use of MD5 and SHA-1 to calculate the hash value algorithm .

• first Integrity value may be a plurality, with a space between each value separated .

  • If multiple values use different secure hash algorithm, for example, as shown below:

  <script src="http://localhost:3000/test.js"
          crossorigin="anonymous"
          integrity="
          sha256-LsK9lSOT7mZ9iEbLTm9cwaKTfuBdypNn2ID1Z9g7ZPM=
          sha384-yGduQba2SOt4PhcoqN6zsgbwhbpK8ZBguLWCSdnSRc6zY/MmfJEmBguDBXJpvXFg
          sha512-2qg2xR+0XgpsowJp3VCqWFgQalU9xPbqNTV0fdM9sV9ltHSSAcHni2Oo0Woo6aj860KvFu8S1Rdwb8oxJlMJ2Q==
  "></script>

So at this time, the browser is processing according to which secure hash algorithm? Or do you just need to have one match?

The answer is: browser will first choose the most secure calculation method. If it is the above example, the browser will choose sha512 calculate the hash value algorithm. Because sha512 security is greater than sha384 , sha384 security is greater than sha256 , then ignores the rest of the calculated hash value in other ways. At this time, it should be noted that if sha512 different from the provided one, then regardless of whether sha384 or sha256 is correct, the browser will consider the hash calculated by this resource The value is not the same as the hash value provided. Therefore, the corresponding code will not be executed.

+ 如果多个值分别使用的是**相同**的安全散列算法，比如如下所示：

<script src="http://localhost:3000/test.js"
        crossorigin="anonymous"
        integrity="
        sha384-yGduQba2SOt4PhcoqN6zsgbwhbpK8ZBguLWCSdnSRc6zY/MmfJEmBguDBXJpvXFg
        sha384-c+xXeW2CdZ1OuDKSrMpABg4MrVFWi3N5VKDC6CTgSRRnPr0dgprowjuFPomHgXlI
        sha384-E6ULLMoeKAMASZMjQ00AvU+3GzK8HPRhL/bM+P4JdcHLbNqGzU14K9ufSPJCnuex
"></script>

So as long as there is a value that is the same as the result calculated by the browser at this time, then the resource can be considered as having not been tampered with; the content of the resource can be executed.

• Integrity attribute temporarily only supports link and script tags, and more tags about sub-resources will be supported in the future, such as: audio , embed , iframe , img and other .

Summarize

about 1614862b96491c Web page sub-resource integrity check is over here, I believe if you read it carefully, you should have some gains. If you have any suggestions and feedback after reading, you can here , or leave a message at the bottom of the article.

If you want to quickly practice it yourself, you can refer to the sri-demo . Some examples in the article can be practiced in this project. Of course, you can also write some examples yourself to practice. After all, if you practice it yourself, you will remember the corresponding knowledge more firmly.

Also welcome everyone to pay attention to my public Guanshan is not difficult to , if you think this article is well written, or helpful to you, please like and share it~

Recruitment

Dasouche, established in 2012, is providing data analysis, marketing management, financial and transaction services for the daily operations of car dealers. As an advanced new automobile retail platform in China, we have been looking forward to redefining the industry with Internet + intelligent thinking from the early days of its birth, creating a full circulation ecology of automobiles and advancing the Internet development of the automobile industry by linking, empowering and leading the upstream and downstream of the industrial chain.

We belong to the financial services division of Souche. Due to the rapid development of the department's business, we need excellent front-end engineers to join us. We look forward to excellent you who can do some meaningful things with us to promote the development of the automotive industry. Everyone achieves each other and strives for a better tomorrow together.

For more information about the company, please visit . For job salaries and benefits, please refer to Position Information . If you are interested, you can send your resume to [e-mail] , or 1614862b9649c9. Add my WeChat , remarks search the car to push , if the resume is available, I will help you directly push it to the relevant person in charge. And can help you understand the progress of the internal push in time.

refer to:

• Subresource Integrity
• A CDN that can not XSS you: Using Subresource Integrity
• Subresource Integrity
• What is the best SRI hash size?