JS页面跳转使地址后面不显示参数
Posted 大扑棱蛾子
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了JS页面跳转使地址后面不显示参数相关的知识,希望对你有一定的参考价值。
背景
使用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)
。
以上是关于JS页面跳转使地址后面不显示参数的主要内容,如果未能解决你的问题,请参考以下文章