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('!')
    }
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值