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)


相关推荐

  • 如何在 Windows 上 使用 ONLYOFFICE 协作编辑文档「建议收藏」

    1、说明——可以加我qq504284沟通。ONLYOFFICEDocumentServer提供文档协作的服务功能,支持Word,Excel和PowerPoint以及国产WPS的协作。但是这里告诉我们,需要进行文档管理和存储的二次开发。它api里现成的开发好的文档管理平台,有java,node.js,PHP等,可能不具备权限功能吧。Pleasenote,thatONLYOFFICE…

  • dynamin_Dynamite

    dynamin_Dynamite摘自《JEDEC78-3F》在某种应用情况下,为了更好的提高数据总线的信号完整性,我们需要DDR3SDRAM的终端阻抗可以不需要通过MRS命令来改变。这种需求由“动态ODT”特性来支持。

  • 使用 Android Studio 搭建安卓开发环境[通俗易懂]

    使用 Android Studio 搭建安卓开发环境[通俗易懂]使用AndroidStudio搭建安卓开发环境,方便、快捷。因为AndroidSDK等下载已经集成到AndroidStudio的安装中1、官网下载AndroidStudio编辑器首先,访问谷歌中国开发者网站下载AndroidStudio编辑器:https://developer.android.google.cn/studio选择要下…

  • 键盘过滤驱动程序[通俗易懂]

    键盘过滤驱动程序[通俗易懂]在我,因为现在是半个月后的时间与驱动器接触,我深深体会到开头难,和学习毅力的重要性。同时推动新。当看着帆驱动的开始《Windows驱动开发技术具体解释》讲的挺细。对新手来说是个不错的学习资料,可是更重

  • linux tar.gz zip 解压缩 压缩命令

    linux tar.gz zip 解压缩 压缩命令

    2021年12月10日
  • webpack css_web引入css文件

    webpack css_web引入css文件css文件处理-准备工作(以下项目配置都是基于上一篇webpack(4)的基础上)在项目开发中,我们必然需要添加很多的样式,而样式我们往往写到一个单独的文件中。这里我们就在src目录中创建一个n

发表回复

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

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