这是一个创建于 1482 天前的主题，其中的信息可能已经有所发展或是发生改变。
我想问问前端是否能控制页面访问权限。Jquery 可以实现吗？我试了一下发现直接禁用 JS 就可以跳过。
还是必须得和后端联调，使用 Vue ？单纯使用 Js 做不了权限控制么？
 |
1
jaylee4869 2020-11-09 11:54:02 +08:00  3
前端是否能控制页面访问权限？能，但是不安全。
Jquery 可以实现吗？ 能，但是不安全。 我试了一下发现直接禁用 JS 就可以跳过？ 对啊，所以不安全。 还是必须得和后端联调，使用 Vue ？ 和 Vue 没有任何关系，只和后端有关系。 单纯使用 Js 做不了权限控制么？ 可以，不过的你的 JS 必须运行在服务端。 |
 |
2
toma77 2020-11-09 11:59:09 +08:00
SSR
|
 |
3
w88975 2020-11-09 12:11:15 +08:00
你换个思路嘛
你的思路: 所有页面都默认能访问, 如果用 JS 判断权限,没有权限就不能访问,禁用 JS 就失效了 那为什么不改为,本来所有人都没权限访问,得 JS 判断有权限,才能授权访问呢 |
 |
4
hahastudio 2020-11-09 12:13:43 +08:00
@w88975 那就直接分析 JS 不就好了，前端防不住的
|
 |
5
kop1989 2020-11-09 12:23:49 +08:00
与页面技术无关，web 前端的特点就是浏览器执行源代码，即无编译。
所以所有的前端封锁与控制都是“最大限度的增加破译的工作量来使得破译的性价比太低”来实现。 所以页面上的权限控制都是防君子不防小人的，即只是单纯的提醒你你没有这个按钮的权限，点了也没用。所以我给你隐藏了。 真正的权限控制都是服务器端接口的控制。 |
 |
6
AerithLoveMe OP @w88975 可是如何才能做到无权限访问呢。我能想到的只有隐藏，可这个也没用。
|
|
7
AerithLoveMe OP @kop1989 我原本是想无权限就不给看页面。不渲染，这么说的话，单纯页面不能做到对吧？该渲染还是得渲染，只不过没有数据？
|
|
8
AerithLoveMe OP @jaylee4869 好的感谢😊
|
 |
9
yaphets666 2020-11-09 13:18:15 +08:00
在我的认知范围内是可以的(当然我很菜).以我熟悉的 vue 举例子,在 index.html 中写一个 noscript 标签.如果浏览器禁用了 javascript.那就会显示 noscript 标签中的内容.这时候 js 已经禁用.单页面应用无法进行路由跳转.手动输入 url 也没用.
当 js 未被禁用时.那么可以通过 vue-router 的动态路由功能限制路由. 既登录后调一个接口获取用户的理由数据.通过 addRoutes 方法添加进去.再加上路由守卫在跳转前判断权限.就可以自由控制用户的页面访问的权限. 这是绝大数单页面应用的做法 |
 |
10
cmdOptionKana 2020-11-09 13:21:59 +08:00
@AerithLoveMe 纯前端也能做到，但使用场景有限。
比如，前端可以加密数据，必须知道正确密码的人才能解密。但这种方法的缺点是，你必须通过别的方式把密码告诉用户，并且用户必须是一个可靠的人（一个不会泄露密码的人）。 |
 |
11
agdhole 2020-11-09 13:23:21 +08:00
WASM ？
业务需求的话，直接可以从接口处拦截，后端不返回数据就行了，前端用户能不能 hack 进页面都没用。 |
 |
12
rodrick 2020-11-09 13:23:53 +08:00
不可以也不应该，就像最常见的购物支付界面，你可以看任何东西，但是你点击去支付的时候，点击前你必须调接口判断登录状态让他登录，差不多就是这么个设计吧
|
|
13
kop1989 2020-11-09 13:24:55 +08:00
|
|
14
yaphets666 2020-11-09 13:46:19 +08:00
我很好奇你是怎么禁用 JS 跳过的?
难道你们是后端渲染的页面? 如果是后端渲染的那路由控制跟前端没关系啊.前端当然是无论如何都控制不了的. 如果你的 SPA 应用.前端是能完全的控制的.而且没有安全隐患. |
 |
15
imn1 2020-11-09 13:52:04 +08:00
这里前端只是说 web 吧？ APP/编译过的客户端 GUI 也是前端啊，这些可以控制
应该说这个前端给了用户什么权限，浏览器是用户控制数据权限很大的客户端，其他的就不一定了 |
|
16
AerithLoveMe OP @yaphets666 就是单前端界面，我原本想试试如果只用 js 能不能做到控制权限
|
 |
17
bnm965321 2020-11-09 16:10:15 +08:00
当 js 未被禁用时.那么可以通过 vue-router 的动态路由功能限制路由. 既登录后调一个接口获取用户的理由数据.通过 addRoutes 方法添加进去.再加上路由守卫在跳转前判断权限.就可以自由控制用户的页面访问的权限. 这是绝大数单页面应用的做法
@yaphets666 这部分直接在前端修改代码，修改 localstorage 是不是可以跳过？ |
|
18
yaphets666 2020-11-09 16:30:41 +08:00
@bnm965321 有风险的数据不存储在 webStorage 中的.尤其是 localStorage 中. 请求回来的路由数据.都在程序内部的存储空间中.也就是 Chrome 的内存中.这个外界是接触不到的. 而且路由数据没有存储在 webStorage 的必要.webStorage 中的数据一般是作为跨标签通信.防止页面某些数据刷新后丢失.等等 路由数据没有这个需求.
|
|
19
bnm965321 2020-11-09 16:44:27 +08:00
@yaphets666 你说的办法必须每个页面都先获取路由数据，然后再做其它的。而且安装这个逻辑不能并发 requests，需要安装 路由 response 的结果再做下一步。
js 源代码是可以直接在浏览器修改的，直接跳过检查可不可以。 如果上面的方法麻烦，只要后端接口没有做检查，可以直接访问接口。 |
|
20
yaphets666 2020-11-09 16:57:09 +08:00
@bnm965321 不用每个页面都请求啊 别的框架我不懂 在 vue 中,我的路由数据在你访问页面 或者登陆后就已经注入到 router 当中了. router 会自动识别你访问的 url 在不在路由列表中.如果不在话就会 404 了. 如果刷新页面的话.vue 有个 beforEach 这个东西.在进入每一个路由之前执行一些代码.我只要在这里检测.router 是否已经 addRoutes 就行了.没有的话那就发送一次请求.而不是次次发送请求.
js 源码可以直接在浏览器修改.这个我不知道你是什么意思.前端程序文件虽然运行在用户浏览器.用户可以查看(一堆乱码,已经压缩混淆过的).但是用户是无法编辑的啊.你可以试着编辑下这个 v2 的 JS 代码.你看能编辑么? |
|
21
bnm965321 2020-11-09 17:06:29 +08:00
|
|
22
bnm965321 2020-11-09 17:07:59 +08:00
https://stackoverflow.com/questions/6657229/how-can-i-edit-javascript-in-my-browser-like-i-can-use-firebug-to-edit-css-html
用 fiddler 可以修改数据，或者我伪造一个本地的 DNS，伪造路由接口的数据 |
|
23
yaphets666 2020-11-09 17:10:30 +08:00
@bnm965321 在控制台执行代码 是没办法影响到**不依赖外部数据**的程序. 我的理解是这样的.我的路由数据在 Vue 实例中.Vue 实例也就是一系列的 JS 代码.代码运行在浏览器的引擎当中. 在控制台中是没办法改变运行着的 JS 代码的.比如说一个 Vue 应用.Vue 实例挂载在 window 上.你在控制台输入 delete window.Vue. 这样 window.Vue 就变成 undefined 但是这并不影响前端程序的运行 这不是一回事
|
|
24
bnm965321 2020-11-09 17:25:14 +08:00
比如你的 route API 是 xxx.com/api/route
我在本地拦截这个请求，修改 response 。 https://blog.csdn.net/hqzxsc2006/article/details/47041979 @yaphets666 |
|
25
yaphets666 2020-11-09 17:34:07 +08:00
@bnm965321 spa 应用的路由都是#/XXXX 这个路由是前端路由 不涉及到页面的跳转 xxx.com/secrets/1 这个样子是去访问服务器了 这跟 vue react 做的 spa 不是一回事了 跟前端没关系了 当然前端控制不了 我是在讲 spa 应用
你意思 fiddler 可以拦截 HTTPS 的某个特定的请求返回假数据?如果这样的话确实可以. 不过应该做不到吧 HTTP 的兴许可以,不然 HTTPS 还有什么用呢 |
|
26
bnm965321 2020-11-09 17:35:35 +08:00
@yaphets666 本地 https，可以直接使用 fiddler 的证书的，很多 mobile app 的数据爬虫都是这么做的
|
 |
27
lllllliu 2020-11-09 17:52:02 +08:00
WASM ..
|
|
28
yaphets666 2020-11-09 18:26:37 +08:00
@bnm965321 这样确实可以，不过问题不大，也只是看到了页面 不影响数据安全
|
Select Language