CSP内容安全策略与vue-cli中转化为base64文件冲突解决方法

出现问题:后台为了防止XXS攻击加入了CSP内容安全策略设置，导致vue-cli中通过url-loader处理为base64的字体文件和图片文件因为违反规则而图标不出现

解决方法：

（1）后台处理

以IIS为例：

   <add name="Content-Security-Policy" value="default-src 'self';" />

在上面的代码中加入允许规则，改为如下

   <add name="Content-Security-Policy" value="default-src 'self'; font-src 'self' data:; img-src 'self' data:;" />

（2）一些文章不建议上面的方式处理(因为data:这种格式允许的话并不能有效组织xxs攻击)，因此也可以前端处理

前端处理，保留原来的ttf,eot等字体文件图片文件名，只用file-loader进行处理，不使用url-loader，修改build文件夹下面的webpack.base.conf.js文件中

 {
        test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
        loader: 'url-loader',
        query: {
          limit: 10000,
          name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
        }
      }

改为

 {
        test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
        loader: 'file-loader',
        query: {
       name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
        }
  }

修改后由于使用file-loader可能有路径问题，因为用base64转码后无路径问题，不转的话css里面引入路径如：“./static/fonts/xxx”，而文件路径如下图,因此需要请修改build里面的util.js文件，publicPath的作用是，将css引入的路径前面加入publicPath,即若一开始css引入url('./static/fonts/iconfont.tff')会改为url('../../static/fonts/iconfont.tff'),改动util.js如下

 if (options.extract) {
      return ExtractTextPlugin.extract({
        use: sourceLoader,

        fallback: 'vue-style-loader'，

        publicPath:'../../',//添加该行，根据你的项目目录进行修改

      })
    } else {
      return ['vue-style-loader', sourceLoader].join('!')
    }