JS页面跳转使地址后面不显示参数[通俗易懂]

背景使用window.open()和window.location.href跳转时,新页面的地址栏会显示参数,如下:http://127.0.0.1:8080/website-cms/admin/article/edit?action=add。这样会暴露参数内容,用户可以修改地址栏的参数。如果提交的参数修改可能会出现业务上的错误,甚至可以跳过权限验证,实现本来没有的权限。案例以…

大家好,又见面了,我是你们的朋友全栈君。

背景

使用window.open()和window.location.href跳转时,新页面的地址栏会显示参数,如下:http://127.0.0.1:8080/website-cms/admin/article/edit?action=add
这样会暴露参数内容,用户可以修改地址栏的参数。如果提交的参数修改可能会出现业务上的错误,甚至可以跳过权限验证,实现本来没有的权限。

案例

以前做过一个系统是通过权限控制按钮,权限小的只能查看,权限大的可以修改。但是为了方便只使用了同一个页面通过不同的参数控制查看和修改。?op=1和?op=2分别是查看和修改,结果有的用户直接将op=1改为了op=2从而跳过权限验证,直接实现了修改功能。

实现方法

实现的思路是利用JS创建一个Form表单,然后将参数用Input元素的方式添加到Form表单中,最后提交Form表单从而实现跳转。
Form创建工具类

(function(){ 
   
    //设置命名空间
    var CodeSTD = window.CodeSTD || {};

    window.CodeSTD = CodeSTD; 

    /** * 创建Form表单 * @author 王成委 * @param config Object * <p>url:form的Action,提交的后台地址</p> * <p>method:使用POST还是GET提交表单</p> * <p>params:参数 K-V</p> * @return Form */
    CodeSTD.form = function(config){ 
   
        config = config || {};

        var url = config.url,
            method = config.method || 'GET',
            params = config.params || {};

        var form = document.createElement('form');
        form.action = url;
        form.method = method;
        form.target = "_blank";

        for(var param in params){
            var value = params[param],
                input = document.createElement('input');

            input.type = 'hidden';
            input.name = param;
            input.value = value;

            form.appendChild(input);
        }

        return form;
    }


})()

使用方法

function onAddClick(){ 
   
    var treeObj = $.fn.zTree.getZTreeObj("menu-tree");
    var nodes = treeObj.getSelectedNodes();
    var node = nodes[0];
    var menuId = node.menuId,menuName = node.menuName;

    var form = new CodeSTD.form({
        url:'admin/article/edit',
        method:'POST',
        params:{
            editor:'UE',
            action:'add',
            menuId:menuId,
            menuName:menuName
        }
    })

    $(form).submit();

    form = null;
}

使用Form跳转后的地址http://127.0.0.1:8080/website-cms/admin/article/edit

有需求的小伙伴可以参考下,实现方式很简单。如果文中有什么不妥的地方欢迎提出建议。有更好的方法欢迎留言。

有好多小伙伴反应不能使用,原因可能是因为您用的是火狐浏览器,在火狐浏览器下需要将form以隐藏的方式写入到body中才可以使用。也就是需要在CodeSTD.form中加入document.body.appendChild(form)

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

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/128152.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • TCP的拥塞控制(详解)「建议收藏」

    TCP的拥塞控制(详解)「建议收藏」在某段时间,若对网络中某一资源的需求超过了该资源所能提供的可用部分,网络性能就要变坏,这种情况就叫做网络拥塞。在计算机网络中数位链路容量(即带宽)、交换结点中的缓存和处理机等,都是网络的资源。若出现拥塞而不进行控制,整个网络的吞吐量将随输入负荷的增大而下降。当输入的负载到达一定程度吞吐量不会增加,即一部分网络资源会丢失掉,网络的吞吐量维持在其所能控制的最大值,转发节点的缓存不够大这造成分…

  • jupyter notebook的安装与使用

    jupyter notebook的安装与使用最近由于项目需要,开始学习python,然后发现一个非常有用的python交互式编辑器,非常容易上手而且非常有用和实在,本博文是对学习jupyternotebook的一个汇总和记录,与大家一起分享!下面的内容是针对ubuntu系统的,当然,jupyternotebook在windows也是支持的。

  • Linux命令 – su命令

    Linux命令 – su命令Linux命令-su命令  su是swithuser的缩写,在Linux中su命令可让用户暂时变更登入的身份,除root外变更时须输入所要变更的用户帐号与密码。1.语法:su[参数][-][用户帐号]2.功能:  变更用户身份,若不指定用户帐号,则预设变更为root。3.参数:-c<指令>或–command=<指令> 执行完指定的指令后,即恢复原来的身份。-f或–fast 适用于csh与tsch,使shell不用去读取启动文件。–l

  • 手把手教你如何玩转Activiti工作流「建议收藏」

    手把手教你如何玩转Activiti工作流「建议收藏」一:Activiti的介绍场景:学校主角:阿毛,班主任,教务处处长问题:有一天,阿毛到学校,感觉到身体不舒服,然后想跟班主任请假,然后班主任告诉阿毛说,你想请假,那么就必须要请假条,这个上面必须要我同意,然后再拿到教务处去盖章,然后交给我,这样才可以进行请假。。阿毛,想着,怎么请个假都这么麻烦,这么多层次处理问题,能不能简便一点。。。。好烦好烦~!!~~分析…

  • PHP函数高级(二)

    PHP函数高级(二)

    2021年10月31日
  • python2 nonlocal_python unboundlocalerror

    python2 nonlocal_python unboundlocalerrornonlocal关键字用来在函数或其他作用域中使用并修改外层(非全局)变量。意义:nonlocal使用能够弥补global和闭包的两个问题。对于global,只能使用全局变量,对于嵌套函数中的内层函数而言,无法通过global使用外层函数,通过nonlocal就可以,当然直接读取也可以(闭包)。对于闭包,内层函数可以读取外层函数的变量,但是如果在内部函数中尝试进行修改外部变量,且外部变量为不可变类型,则需要在变量前加nonlocal,如果变量为可变类型,则不需要添加nonlocal。”’nonl

发表回复

您的电子邮箱地址不会被公开。

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