VUE CSP

最新推荐文章于 2025-06-21 09:52:20 发布

weixin_34129696

最新推荐文章于 2025-06-21 09:52:20 发布

阅读量2.2k

点赞数

CC 4.0 BY-SA版权

文章标签： javascript webpack python ViewUI

原文链接：https://my.oschina.net/phybrain/blog/1553485

2019独角兽企业重金招聘Python工程师标准>>>

在VUE中 {{{ data }}}和v-html属性会把内容解析成html，可能会造成xss漏洞；

以及当使用SSR（ Server Side Rendering（服务端渲染））， SSR 的时候忘记了转义和过滤而导致XSS；

vue使用csp时，需要使用csp兼容版本

$ npm install vue
# 获取CSP兼容版本：
$ npm install vue@csp

demo：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="Content-Security-Policy" content=" img-src https://*; script-src * 'unsafe-inline' 'nonce-1'; ">
<script src="vue.min.js"></script>
</head>
<body>
<div id="app">
  {{ message }}
</div>

<div id="test"></div>
<div id="test2"></div>


<script nonce=1>
new Vue({
    el:'#app',
    data: {
        message:'Hello World!'
    }
});
</script>
<script type="text/javascript" nonce=1>
document.getElementById('test').innerHTML = 'xxx';


</script>
<script type="text/javascript" nonce=2>
document.getElementById('test2').innerHTML = 'sss'; 

</script>
</body>
</html>

vue组件成功执行，nonce=1的成功执行而nonce=2的js没有执行，所以CSP策略成功执行。

VUE官方文档里的兼容CSP方法：

当使用运行时只有建立WebPACK + Vue装载机或Browserify + vueify，将预编译渲染模板，能工作在CSP环境。

这里使用webpack +vue尝试，用npm 搭建vue的官方demo，vue init webpack my-first-vue-project.

改写 index ，加入meta

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
   <meta http-equiv="Content-Security-Policy" content=" script-src * 'unsafe-inline' ; ">

    <title>myvue</title>
  </head>
  <body>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

npm run dev ，浏览器console发现报错