vue ajax获取数据的时候,如何保证传递参数的安全或者说如何保护api的安全

https://segmentfault.com/q/1010000005618139

点击提交,发送请求。
但是api:123用于加密的参数,直接暴露了。右键源代码就可以看到

<body>

<div class="row">

    <div class="col-md-4 col-md-offset-4">

        <table class="table table-bordered" id="content">

            <tr>
                <td>
                    商品分类
                </td>
                <td>
                    <select name="cid" v-model="cid">
                        <template v-for="vo in goodscategory">
                        <option v-bind:value="vo.goodscategory_id">{{vo.goodscategory_name}}</option>
                        </template>
                    </select>
                    {{cid}}
                </td>
            </tr>

         <tr>
             <td style="width: 30%">
                 商品名称
             </td>
             <td>
                 <input type="text" name="name" v-model="goodsname" value=""/>
                 <span>{{ goodsname }}</span>
             </td>
         </tr>

            <tr>
                <td>
                    排序
                </td>
                <td>
                    <input type="text" name="sort" v-model="sort"/>
                    {{sort}}
                </td>
            </tr>

            <tr>
                <td>
                    价格
                </td>
                <td>
                    <input type="text" v-model="price"/>
                    {{price}}
                </td>
            </tr>

            <tr>
                <td>
                    商品描述
                </td>
                <td>
                    <textarea name="desc" id="" cols="30" rows="5" v-model="desc"></textarea>
                    {{desc}}
                </td>
            </tr>

            <tr>
                <td colspan="2">
                    <button type="button" v-on:click="submit">提交</button>
                </td>
            </tr>

        </table>

    </div>

</div>

<script type="text/javascript">

    var vm = new Vue({
        el:"#content",
        data: {
           cid:0,
           goodsname:"",
           sort:0,
           price:0,
            desc:"",
           goodscategory:[]
        },
        methods: {
            submit: function () {

                this.$http({
                    url: ‘http://localhost/wang/index.php/Admin/Goods/createProcess‘,
                    method: ‘POST‘,
                    emulateJSON: true,
                    data: {
                        cid: this.cid,
                        name: this.goodsname,
                        sort: this.sort,
                        price: this.price,
                        desc: this.desc
                    }
                }).then(function(response) {

                    console.log(response.data);

                }, function(response) {

                });

            }
        },
        ready: function() {

            var self = this;

            this.$http({url: ‘http://localhost/wang/index.php/Home/Vue/goodscategory‘, method: ‘POST‘}).then(function (response) {

                self.$set(‘goodscategory‘, response.data)
            }, function (response) {
                // error callback
            });

        }

    })

</script>
解决方案: 1.接口服务方输入控制2.参数合法性校验3.HTTPS4.CSRFToken安全性校验

这对用户是透明的,防范思路:

1.服务端CSRFToken校验
2.refer校验
3.同一用户的频度控制

输出响应前服务端对SessionID混淆前缀并加密(MD5),埋点在HTML隐藏<Input />,所有请求将此字段发送给服务端,校验是否相等
 判断$_REQUEST[‘Referer‘],判断这个字段是不是为空或者不是你希望的域名

这类查看数据的api,有什么秘密可言么?如果真有秘密,那应该在api鉴权上下功夫,譬如要求访问这个api的人必须登录啊,或者有相应权限啊什么的。

否则如果仅仅是大众数据,本来也是给人看的,那能防得住么?

还有一点你没搞清楚,信息安全重点在信息,但你理解成获取信息的渠道了。

Api就算防,也不是防止别人知道你的api,而且防止别人非法通过你的api获取里面的数据

那么vue这种项目,用session还是cookie储存用户状态。
https是在什么时候加密数据

首先,session是存在于服务端的存储用户状态的东西。cookie是在客户端保存数据的东西。二者完全不是一回事。

但通常我们配合使用,在客户端用cookie保存一个sessionID,用户每次发请求到后端都带着这个sessionID,后端接收到请求后根据这个sessionID再从不管缓存也好、memcached之类的缓存工具也好里面拿出对应的session数据使用。

https是协议层的东西,通常公司的运维、it工程师搞定,当然如果你确实需要了解,可以网上查资料

时间: 2024-08-30 01:23:19

vue ajax获取数据的时候,如何保证传递参数的安全或者说如何保护api的安全的相关文章

vue 中使用 AJAX获取数据的方法

在VUE开发时,数据可以使用jquery和vue-resource来获取数据.在获取数据时,一定需要给一个数据初始值. 看下例: <script type="text/javascript"> new Vue({ el:'#app', data:{data:""}, created:function(){ var url="json.jsp"; var _self=this; $.get(url,function(data){ _se

Ajax获取数据后append追加到表格内出现格式混乱的错误

Ajax获取数据后append追加到表格内出现追加的数据与表格风格不同的错误: $("#courierTable").append("<tr style='text-align: center'> class='tab-content'") $("#courierTable").append("<tr style='text-align: center'> class='tab-content'") $

jquery通过ajax获取数据,控制显示的数据条数

效果图: 现在我们可以先看它的json数据,如图所示:                然后可以对应我们的代码进行理解. jquery通过ajax获取数据,并通过窗口大小控制显示的数据条数,以及可以根据需求隐掉列数据. <!doctype html> <html> <head> <meta charset="utf-8"> <title>无标题文档</title> <style> html,body {

select2的使用(ajax获取数据)

最近项目中用到了select2来做下拉框,数据都是通过ajax从后台获取, 支持动态搜索等. 使用到的下拉框分有两种情况: 一种是直接发送ajax请求渲染列表:另一种因为查询回的数据有六万多条,导致整个页面卡顿,所以采用的是先让用户至少输入3个字以后再动态模糊查询数据. 基本的使用方法看官方文档就可以明白,但是在做模糊查询的时候遇到了一些问题,在此记录一下. 第一种情况的下拉框,先是封装了函数获取数据,并拼接了列表模版,然后设置templateSelection即可. function getP

用Nodejs+Express搭建web,nodejs路由和Ajax传数据并返回状态,nodejs+mysql通过ajax获取数据并写入数据库

小编自学Nodejs,看了好多文章发现都不全,而且好多都是一模一样的 当然了,这只是基础的demo,经供参考,但是相信也会有收获 今天的内容是用Nodejs+Express搭建基本的web,然后呢nodejs路由和Ajax之间的数据传输,也就是表单提交,然后在用nodejs把数据写入mysql数据库 用到的东西比较多,但是还是很有趣的 1.安装node.js 安装node.js,直接去官网下载然后根据需求点击下一步就好了 Node.js安装包及源码下载地址为:https://nodejs.org

Ajax 获取数据代码

无刷新获取字符串: Html网页中: <script> //定义异步对象 var xmlHttp; //封装方法 function CreateXMLHTTP() {   try {            xmlHttp = new XMLHttpRequest();        } catch (e) {  xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");      } } window.onload = functio

$.ajax()与vue结合获取数据并渲染

html: <div id="app1"> <ul> <li v-for="item in datas"> <div href=""> <div v-text="item.time"></div> <div href="" v-for="item1 in item.list"> <div v-tex

vue在使用ajax获取数据时,两种方法(jquery和vue_resource)

@{    Layout = null;} <!DOCTYPE html> <html><head>    <meta name="viewport" content="width=device-width" />    <title>Index</title>    <script src="~/Scripts/jquery-1.8.2.min.js"><

node后台,MongoDB作为数据库,vue前端获取数据并渲染

作为自己的第一个项目,也是毕业论文,记录点点滴滴,做完发现很简单,但还是纠结了几天.项目经历太少了 ...... 前提:vue脚手架创建项目,node后台,MongoDB数据库,并且跨域还有配置好 背景:前端Home.vue组件从后台获取图片并以轮播图效果展示 后台: models文件夹:存放各种数据库文件,由于存在好多种数据表结构,连接数据库时会产生问题,因此单独创建一个文件夹,创建db.js文件,该文件专门连接数据库.routes文件夹:路由处理文件 1 /** db.js 2 * 完成 M