vue使用csp的简单示例
(福利推荐:你还在原价购买阿里云服务器?现在阿里云0.8折限时抢购活动来啦!4核8G企业云服务器仅2998元/3年,立即抢购>>>:9i0i.cn/aliyun)
在 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="http://9i0i.com/pic.php?p=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 发现报错
按提示,meta 加入 'unsafe-eval' 后成功运行:
不过无法指定 nonce,因此 VUE 用 webpack 时要限制 script-src 的域名才有安全的 CSP 的策略。
总结:
vue ,react 都对基本数据进行了转义,同时,许多基于 MVVM
框架的单页面应用不需要刷新 URL 来控制 view。但代码疏忽还是有 xss 可能性,所以使用 CSP 策略可以双重保险,避免人为的疏忽导致 XSS 漏洞。
到此这篇关于vue使用csp的文章就介绍到这了,更多相关vue使用csp内容请搜索程序员之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持程序员之家!
相关文章
element-ui?table表格控件实现单选功能代码实例
这篇文章主要给大家介绍了关于element-ui?table表格控件实现单选功能的相关资料,单选框是指在?Element?UI?的表格组件中,可以通过单选框来选择一行数据。用户只能选择一行数据,而不能同时选择多行,需要的朋友可以参考下2023-09-09为vue-router懒加载时下载js的过程中添加loading提示避免无响应问题
这篇文章主要介绍了为vue-router懒加载时下载js的过程中添加loading提示避免无响应问题,需要的朋友可以参考下2018-04-04vuex中...mapstate和...mapgetters的区别及说明
这篇文章主要介绍了vuex中...mapstate和...mapgetters的区别及说明,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教2022-08-08Ant Design Vue pro 动态路由的实现和打包方式
这篇文章主要介绍了Ant Design Vue pro 动态路由的实现和打包方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教2023-06-06把vue-router和express项目部署到服务器的方法
下面小编就为大家分享一篇把vue-router和express项目部署到服务器的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧2018-02-02
最新评论