Vue project security scanning vulnerability, the JS library version is too low, it is required to upgrade YUI, process summary

background

The security department of the company conducted a security scan on the project and found some vulnerabilities, one of which required upgrading the javascript framework library (as shown in the figure):

I was so scared that I thought I would upgrade Vue2 to Vue3.

After some inquiries, I found out that the YUI that the toolkit relies on is a version with security holes.

Vulnerability location

Principal colleagues only gave me the picture above at the beginning, and I didn't know which package version needed to be upgraded.

I can only use the title of the vulnerability to go to Baidu, and found some situations where the same vulnerability was found, mostly talking about the following tools:

• jquery i didn't use this
• The js-cookie article says to save localStorage instead (it makes no sense at all)
• jsencrypt turns out to be this, but doesn't specify why

After checking here, a colleague also sent a more detailed explanation:

YUI:2.9.0 (Link) https://www.cvedetails.com/cve/CVE-2012-5883/

So I searched in the packaged code YUI(case insensitive, no whole word matching), and I found a comment:

After confirming this matter, the next step will be much easier. This is obviously not my code, so continue searching node_modulesin and finally jsencryptfind this comment under :

Version Vulnerability of YUI2

Search the web for information about YUI 2.9.0 vulnerabilities: Search Results

The results also include the address of the vulnerability provided by the scanning tool, which states:

An XSS vulnerability exists in the Flash component infrastructure in YUI 2.8.0 - 2.9.0, allowing a remote attacker to inject arbitrary Web script or HTML.

Now we know that YUI 2.9.0 version does have a security risk, BUG do we really have this vulnerability?

Practical application of YUI in code

Official introduction: YUI is a free, open source JavaScript and CSS library for building rich interactive web applications.

To put it less rigorously, YUI is a tool library similar to jquery.

Then look at jsencryptWhy use it?

From the code node_modules\jsencrypt\lib\lib\jsrsasign\yahoo.jsof the , the entire file is filled with just one lang.extendobject containing the method.

lang.extendMethods mimic the inheritance of classes, extending domains from an object to objects.

That is to say, jsencryptonly lang.extendthe method of YUI is used, and YUI SWF is not touched.

In this way, although the code uses part of the 2.9.0 version, the security hole of this version does not affect the project at all.

Solution

It can now be concluded that:

• The reason for the vulnerability is that there is a security vulnerability in the YUI 2.9.0 version
• Security software scans are based on comments containing the version number of yui

In fact, just solve the comment of the YUI version number.

Method 1: Use the compressed file

Most of the ways to search online are to use compressed (without comments) files:node_modules\jsencrypt\bin\jsencrypt.min.js

// 旧的引入方式
import JSEncrypt from 'jsencrypt'
// 新的引入方式
import JSEncrypt from 'jsencrypt/bin/jsencrypt.min'

Method 2: Optimize the packaging configuration and delete comments

My solution is to delete comments during the packaging process, and use global AOE to kill all comments and solve all problems caused by comments.

Including security scans, links to external platforms, email URLs (npm author emails), etc.

I use Vue Cli to generate the Vue2 version of the project. In the default packaging configuration, webpack uses terser (terser-webpack-plugin) for code optimization, and it can be configured directly.

inspectTake a look at the default configuration:

optimization: {
    
    
  ...
  minimizer: [
    {
    
    
      options: {
    
    
        test: /\.m?js(\?.*)?$/i,
        chunkFilter: () => true,
        warningsFilter: () => true,
        extractComments: false,
        sourceMap: false,
        cache: true,
        cacheKeys: defaultCacheKeys => defaultCacheKeys,
        parallel: true,
        include: undefined,
        exclude: undefined,
        minify: undefined,
        terserOptions: {
    
    
          output: {
    
    
            // 默认保留了 @license 注释
            comments: /^\**!|@preserve|@license|@cc_on/i
          },
          compress: {
    
    ...},
          mangle: {
    
    ...}
        }
      }
    }
  ]
},

You only need to modify outputthe configuration , configuration item reference:

• TerserWebpackPlugin | webpack Chinese documentation
• terser - npmjs.com direct searchFormat options

vue.config.jsAdd configuration:

chainWebpack(config) {
    
    
  // 删除注释
  config.optimization.minimizer('terser').tap(args => {
    
    
    // 直接修改 terserOptions 下的属性值，保留原有配置
    // 这里访问 terserOptions 的时候并没有 output，访问不到 output.comments 需要直接赋值
    args[0].terserOptions.output = {
    
    
      comments: false,
    }
    return args
  })
}