脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → vue.js → vue使用csp

vue使用csp的简单示例

 更新时间：2022年08月17日 10:05:23   作者：D-0  
Vue是一套用于构建用户界面的渐进式框架,与其它大型框架不同的是,Vue被设计为可以自底向上逐层应用,下面这篇文章主要给大家介绍了关于vue使用csp的相关资料,需要的朋友可以参考下

在 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 发现报错

按提示，meta 加入 'unsafe-eval' 后成功运行：

不过无法指定 nonce，因此 VUE 用 webpack 时要限制 script-src 的域名才有安全的 CSP 的策略。

总结：

vue ，react 都对基本数据进行了转义，同时，许多基于 MVVM 框架的单页面应用不需要刷新 URL 来控制 view。但代码疏忽还是有 xss 可能性，所以使用 CSP 策略可以双重保险，避免人为的疏忽导致 XSS 漏洞。

到此这篇关于vue使用csp的文章就介绍到这了,更多相关vue使用csp内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

相关文章

  • vant3中使用List组件的一些坑

    vant3中使用List组件的一些坑

    这篇文章主要介绍了vant3中使用List组件的一些坑及解决，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2023-01-01
  • 使用Vue实现网页截图和截屏功能

    使用Vue实现网页截图和截屏功能

    网页截图与截屏功能在许多Web应用程序中都非常有用,Vue.js作为一个流行的JavaScript框架,提供了许多工具和库来简化网页截图和截屏的实现,本文将介绍如何使用Vue来实现一个网页截图和截屏功能的示例,包括使用html2canvas库和vue-cropper库,需要的朋友可以参考下
    2023-10-10
  • 老生常谈vue2中watch的使用

    老生常谈vue2中watch的使用

    watch的基本用法是在Vue实例中定义一个watch对象,该对象内部包含需要监听的数据项和对应的回调函数，这篇文章主要介绍了vue2中watch的使用,需要的朋友可以参考下
    2024-01-01
  • vue+Element中table表格实现可编辑(select下拉框)

    vue+Element中table表格实现可编辑(select下拉框)

    这篇文章主要介绍了vue+Element中table表格实现可编辑，实现select下拉框，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2020-05-05
  • vue3.2 Composition API项目依赖升级

    vue3.2 Composition API项目依赖升级

    这篇文章主要为大家介绍了vue3.2 Composition API项目依赖升级示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
    2022-08-08
  • vue中使用axios post上传头像/图片并实时显示到页面的方法

    vue中使用axios post上传头像/图片并实时显示到页面的方法

    今天小编就为大家分享一篇vue中使用axios post上传头像/图片并实时显示到页面的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2018-09-09
  • vue-cli中安装方法(图文详细步骤)

    vue-cli中安装方法(图文详细步骤)

    这篇文章主要介绍了vue-cli中安装方法(图文详细步骤)，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2018-12-12
  • Vue实现动态路由导航的示例

    Vue实现动态路由导航的示例

    本文主要介绍了Vue实现动态路由导航的示例，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2023-02-02
  • vue-router实现webApp切换页面动画效果代码

    vue-router实现webApp切换页面动画效果代码

    本篇文章主要介绍了vue实现app页面切换效果实例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2017-05-05
  • vue项目中应用ueditor自定义上传按钮功能

    vue项目中应用ueditor自定义上传按钮功能

    这篇文章主要介绍了vue项目中应用ueditor自定义上传按钮功能，文中以vue-cli生成的项目为例给大家介绍了vue项目中使用ueditor的方法，感兴趣的朋友跟随脚本之家小编一起学习吧
    2018-04-04

最新评论