前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >JS页面跳转使地址后面不显示参数[通俗易懂]

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

作者头像
全栈程序员站长
发布2022-07-31 14:55:55
5.7K0
发布2022-07-31 14:55:55
举报

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

背景

使用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创建工具类

代码语言:javascript
复制
(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;
    }


})()

使用方法

代码语言:javascript
复制
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)

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

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2022年4月1,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 背景
  • 案例
  • 实现方法
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档