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

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

https://segmentfault.com/q/1010000005618139

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

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

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

 
<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.HTTPS
4.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工程师搞定,当然如果你确实需要了解,可以网上查资料

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请联系我们举报,一经查实,本站将立刻删除。

发布者:全栈程序员-站长,转载请注明出处:https://javaforall.net/113686.html原文链接:https://javaforall.net

(0)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • nginx配置https转发

    nginx配置https转发

    2021年5月14日
    212
  • acwing-170. 加成序列(迭代加深)「建议收藏」

    acwing-170. 加成序列(迭代加深)「建议收藏」满足如下条件的序列 X(序列中元素被标号为 1、2、3…m)被称为“加成序列”:X[1]=1X[m]=nX[1]<X[2]<…<X[m−1]<X[m]对于每个 k(2≤k≤m)都存在两个整数 i 和 j (1≤i,j≤k−1,i 和 j 可相等),使得 X[k]=X[i]+X[j]。你的任务是:给定一个整数 n,找出符合上述条件的长度 m 最小的“加成序列”。如果有多个满足要求的答案,只需要找出任意一个可行解。输入格式输入包含多组测试用例。每组测试用例占据一行,包含

    2022年8月8日
    5
  • WPF布局之WrapPanel与StackPanel

    WPF布局之WrapPanel与StackPanel转载:https://www.cnblogs.com/Im-Victor/p/10565030.html三.WrapPanelWrapPanel布局面板将各个控件从左至右按照行或列的顺序罗列,当长度或高度不够是就会自动调整进行换行,后续排序按照从上至下或从右至左的顺序进行。Orientation——根据内容自动换行。当Horizontal选项看上去类似于Windows资源管理器的缩略图视图:元素是从左向右排列的,然后自上至下自动换行。Vertical选项看上去类似于Windows资源..

    2022年7月23日
    13
  • awvs使用教程_awm20706参数

    awvs使用教程_awm20706参数目录:0×00、什么是AcunetixWebVulnarabilityScanner(WhatisAWVS?)0×01、AWVS安装过程、主要文件介绍、界面简介、主要操作区域简介(InstallAWVSandGUIDescription)0×02、AWVS的菜单栏、工具栏简介(AWVSmenubar&amp;toolsbar)0×03、开始一次…

    2022年9月23日
    2
  • 分类变量的卡方检验(python实现&SPSS实现)「建议收藏」

    分类变量的卡方检验(python实现&SPSS实现)「建议收藏」卡方介绍卡方检验是针对自变量和因变量都是分类数据,也就是说带有属性的数据;而单因素方差分析是自变量是分类数据,因变量是连续型的数据。还有一点:方差分析是参数检验,而卡方检验是属于非参数检验。卡方检验是统计样本的实际观测值与理论推断值之间的偏离程度,实际观测值与理论推断值之间的偏离程度就决定卡方值的大小:卡方值越大,偏差越大,越趋于不符合;卡方值越小,偏差越小,越趋于符合,若两个值完全相等时,卡方值就为0,表明理论值完全符合。案例介绍本次实验是研究聚类结果和标签DR的关系,即检验我们的聚类有没有意义。

    2022年8月30日
    6
  • 代码注册广播需要调用registerReceiver()方法_怎么把程序注册成服务

    代码注册广播需要调用registerReceiver()方法_怎么把程序注册成服务分享一下我老师大神的人工智能教程!零基础,通俗易懂!http://blog.csdn.net/jiangjunshow也欢迎大家转载本篇文章。分享知识,造福人民,实现我们中华民族伟大复兴!&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&

    2025年10月27日
    3

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注全栈程序员社区公众号