刚手搓的论坛，欢迎大家来玩~

[orlog]

刚自己手搓了个论坛 http://guang.su ，主要是借鉴了 V2EX 和 discuz 的设计。

自己独特的可以拿出来说一说的主要有以下一些设计：

1. 前后端都极简，没有使用任何框架，特别是前端 css, js 都是纯手搓，这样能保证代码的极简，部署在国外网络不太好的机器上时，能以还不错的速度跑起来
2. 界面设计采用了优雅的毛玻璃风格
3. 密码在前端加密，不明文传输，这样即便不幸被脱裤，用户密码也不会出现在各种社工库里
4. discuz 的 ubb 代码和现在流行的 markdown 同时支持。我自己是喜欢用 ubb 的，因为和 html 比较像
5. 实践了 PWA, 我自己试了下效果还不错，也还有一些问题，后续再慢慢解决

论坛主要方向是游戏，二次元，服务器和域名等，欢迎新老朋友们来玩哦~

针对评论里说的”背景图太花哨“，我补充下自己的看法吧：

当人精力充沛，注意力足够的时候，这点识别度都是有的，对正常年轻人都不会构成太大的识别障碍
这和你看电影和游戏里的字幕是一样的，有些人说”我玩 3d 游戏就是眩晕“，那属实是无能为力了

谢谢大家的评论了，不管是和善的还是欠缺礼貌的，至少有人回复，有人关注，我觉得都比无人问津要好，哈哈

多谢一位低调的技术大佬私下提醒了我几处安全漏洞。。。说实话在评论区里瞎起哄的人，真的，我现在觉得越是水平不行的人越张扬，喷的越起劲

有些朋友很奇怪，为什么技术讨论着讨论着，就变成人身攻击？意思是我不能针对你的说法提出疑问是吗，不接受你的说法就要升级成战斗模式？正常的逻辑难道不是基于我的疑问再回去寻找相关的论据来支撑你的论点吗？

[rockddd]

刚打完游戏，显示器还开着暗部增强，一进去文章标题白的我快瞎了。。。

关掉暗部增强能强一点，但是也就是一点，以我的感受来讲标题还是太白了。

[orlog]

@lisongeee 你的无脑 https 在我看来是根本不懂，或者没有认真思考过这个加密协议当初为什么诞生，另外，我 at 你不是希望你杠回来，只是为了让我发言的上下文对的上号

[14v45mJPBYJW8dT7]

@orlog

#100 别阴阳我

我不知道你指的惯例操作是什么，但你认为的是错误的

你使用 http 协议传输前端密文密码，后端如果原样保存，只要被劫持或者中间人攻击，那么你的前端加密就毫无意义了

[orlog]

@rimutuyuan 我觉得你始终都没有理解我为什么要前端加密。。。

[Rorysky]

有没有法律风险

[orlog]

@Rorysky 法律风险是指？图片素材我有些是从网上扒的，可能有版权隐患，不过我这 1 ip 的小个人网站应该问题不大吧

[orlog]

@wxw752 谢谢了，这么详细的描述和评论，很真诚用心，我后续会努力改善

[14v45mJPBYJW8dT7]

@orlog

> 密码在前端加密，不明文传输，这样即便不幸被脱裤，用户密码也不会出现在各种社工库里

你的这句话，前端加密的是防止即使被脱裤，密码也不会出现在社工库

那你知不知道在当前的项目实践中，只要是有点经验的开发人员，或者使用稍微成熟一点的 web 框架，都不会明文存储用户密码，这是不怕脱裤的根本，和前端哈希毫无关系



前端哈希是为了防止中间人攻击，拿到密码明文去尝试其他平台登录，而防止中间人攻击更好的方法是使用 https 协议


------------


设计方面不做评价，如果你在本科毕业前做出这样的项目，已经比 90%的学生强了

但这个论坛里面大多不是学生，而是有经验的互联网从业人员，大家在鼓励你之外指出了问题，一个人指出问题可能是他个人原因，当有多人指出同样的问题时，你应该考虑是否是自己做的不足

如果你只是想得到赞赏，应该去一个不那么专业的平台去发布你的作品

[auh]

开源吧，没啥好说的。

[orlog]

@rimutuyuan 先不说这个前端加密的事。。。我觉得你的发言始终都有种很先入为主的优越感，不知道你自己感觉到没有

[14v45mJPBYJW8dT7]

@orlog

请指出我哪里先入为主

[orlog]

@rimutuyuan 比如你在发言的同时就预设了很多前提，比如我是没毕业的大学生，比如你的观点是对的。网上有句很流行的话不知你听过没有，叫 “先问是不是，再问为什么”，虽然你没问我为什么，但你把“你是对的”这点，在还没论证过的情况下就作为发言的预设前提了

[14v45mJPBYJW8dT7]

@orlog

ok ，那你可以是任何一种身份

那么聊聊前端加密的事吧，你预设前提是“即便不幸被脱裤”，项目中是如何防止的

[orlog]

@rimutuyuan 好吧，您只要好好说话，我随时奉陪。这个事情是这样的：我前端加密主要就是为了不直接存储你的明文密码，并且让你知道，我真的没存，不信的话可以 f12 自己看到，就这样。。。至于后端的其他步骤，并不在这个小功能的涵盖意图范围之内

[14v45mJPBYJW8dT7]

@orlog

如果我输入的密码是 “123”，前端加密后变成“abc”，那么存在你数据库中的内容是“abc”吗？或者是其他的内容？

[orlog]

@rimutuyuan 稳妥起见我在后端把你的 “abc” 也再单向哈希了一次，不过我觉得这个已经不重要了，你为什么需要知道这个呢？

[eaststarpen]

@orlog

你真的知道密码加密或者 hash 的真正作用吗?

作为服务提供者/admin, 对任何用户的账户拥有 100% 权限(当然, 这里指整个服务提供方, 而不指具体的某一个人);

前台加密后后端 hash 存储的目的都是防止第三方攻击; 而不是防后端服务器

[14v45mJPBYJW8dT7]

@orlog

并不是稳妥起见，这是必须的，因为这才是防止脱裤的根本。如果你保存“abc”，密码被泄露后，黑客可以直接使用登录 api 传输“abc 登录”，并不需要知道“123”

[Rorysky]

@orlog #106 正经得许可证，不让随便开论坛呀，要是你肉身在国外，那 ok

[orlog]

@Rorysky 你这么说的话，博客也是不允许的哦，都是属于交互性网站。。。那我们啥都别玩了嘛

[chotow]

不讨论 UI ，前端进行密码哈希的这个做法，大大点赞。
后端哈希是必须的，前端哈希则是锦上添花；许多人不明白这一点的意义，对我来说，「项目开源+前端明文提交密码」和「项目闭源+前端哈希提交密码」，我宁可选择后者。

[orlog]

@rimutuyuan 黑客都能脱裤或者监听到你哈希后的 “abc” 了。。。就让他登录了吧，至少你原文密码不会被收录到社工库，至于防止脱裤，那是代码审计之类的工作吧

[orlog]

@chotow 是的，感觉这里很多人都不理解为什么需要前端加密，很奇怪，这事这么难理解吗

[kakki]

关于这位 op 所谓的前端哈希。。。他的意思就是，我替用户防我自己。万一我数据被泄露出去，不至于让用户担心是否有存储明文密码的可能性，因为之前 csdn 这个草包就干过这种事，用户在所有平台一般都只会使用一个密码。
但其实有心人直接暴力生成海量彩虹表做 match 工作就行了。

[orlog]

@kakki 哈哈这个有心人，暴力成本可有点高吧。。。具体我还没算过，不过我这可不是 md5 哦 ，彩虹表可能一两天做不出来的

[kakki]

@orlog 你可能误会我的意思了，我的意思不是攻击人做彩虹表，是你自己提前生成彩虹表。

[kakki]

@orlog 所以我的结论就是如果站长一定要搞用户的明文密码。。。有的是手段。

[orlog]

@kakki 好吧。。。假设我有一个机房的超级计算机，为了获取小论坛的用户密码明文，要预先做了个彩虹表，先花他个几年时间把机房算力跑满吧，听上去很疯狂，但也不是没可能

[orlog]

@kakki 密码都是这样的，暴力破解只是时间和算力问题。但你觉得站长会花那么大代价做彩虹表的概率有多少？我宁愿相信那个密码是猴子乱敲键盘蒙对出来的，而不是通过预先做彩虹表

[kakki]

@orlog 你不妨说说你用的什么加密方式，可以算看下一天能生成多少条记录，大部分前端加密就我了解应该都只是一些简单哈希吧？一天能生成多少具体算了再看。
我还是坚持前端加密没有什么卵用，如果是 best practice ，不可能没有在业界推广开来。
虽然都说密码是时间和算力问题，但是很明显线性增长和指数增长不能混为一谈。

[orlog]

@kakki 我前端加密用的是 pbkdf2 算法，秘钥长度 512 ，迭代次数 1024 。看得出来大佬是很懂的哦，不如帮我算一下吧！这个加密方案我预先要做个彩虹表出来的话，大约需要多少算力和时间？我把他写到网页上，谢谢哦！

[Achilless]

@lisongeee 'http 在大部分场合下都比 https 好用'

[Achilless]

这么有自信的话希望楼主找工作的时候把这个网站和这个帖子展示给面试官看哦

[kakki]

@orlog 我不懂，但是我有常识。

[orlog]

@Achilless 你不赞同我的观点，可以直接说出你的理由的，没必要跟我比较谁比谁更自信，我觉得这种事情是没有意义的

@kakki 那你谦虚了，据我所知这个事情还真不能算常识，我也至少要百度一下

[kakki]

@orlog 我不懂密码学，我的判断也只能基于一般的“为什么没有推广”来抛砖引玉。这个也不一定完全是技术因素，比如时代进步了，大家都使用手机验证码了，如果有研究密码学相关的专家能回答一下这个问题最好不过了。

[yaidev]

好丑的设计 :)

[aulayli]

无法访问了

[orlog]

@kakki “为什么没有推广”，这种现象是很普遍的，各个领域里都是这样，只要你研究的足够深入，就会发现流行的东西都往往都不是最好的

[orlog]

@sunzhenyucn 好丑的头像

[angry41]

怎么说呢，算了，不说了。已看，留痕，加油！

[tool2d]

用 http 真是一股清泉流。

密码光做 hash 其实不够，还要确保要抵制抓包重放攻击。我推荐 mysql 这个用户密码算法:

The server sends a random string (scramble) to the client

the client calculates:
stage1_hash = SHA1(password), using the password that the user has entered.
token = SHA1(scramble + SHA1(stage1_hash)) XOR stage1_hash

the client sends the token to the server

the server calculates
stage1_hash' = token XOR SHA1(scramble + mysql.user.Password)

the server compares SHA1(stage1_hash') and mysql.user.Password

If they are the same, the password is okay.

(Note SHA1(A+B) is the SHA1 of the concatenation of A with B.)

[orlog]

@tool2d 谢谢密码大佬推荐，我改天去学习一下

[weak]

@orlog 设计过于花哨

[zhiyu1998]

我开着 dark reader 一打开，哟 V2EX 2.0
我关了 dark reader ，哟 还真是

[chihiro2014]

一些组件可以参考 uiverse ？

[orlog]

@zhiyu1998 V2EX 的确有很多聪明和有创意的设计，我承认学(chao)了很多

@chihiro2014 谢谢 收藏了

[volatileSpark]

背景和内容交织在一起，太难受了。打开一个网页总是先被背景分散注意力，然后要强行聚焦才能看到内容，而且明暗对比也不明显，眼睛有点适应不了

[bobryjosin]

其实整个站看起来还是元素不协调，很花哨。
1.尤其是颜色，比如节点名称和回复数，一会是字变色一会是背景变色，暗色背景配亮色主题真的会瞎，而且颜色没有规律很杂乱，背景太花了可以参考 V2EX 的元素不多的背景。
2.注册和登录页的元素没对齐。
3.首页太多动图了...这个是真的看不下去，建议首页静态点进去再动态。

[orlog]

@bobryjosin 因为背景图是随机变换的，也不想换用亮色的背景图，因为我网站风格是跟宇宙有关的，所以后续会想办法在保留现在随机暗色背景图的前提下，改善文字的识别度；元素没对齐，的确有很多细节地方还有疏漏；动图。。。默认主题我还是想保留，不过我会考虑这个建议，在简洁模式里去掉动图
最后谢谢你的建议，都打了挺多字

[ding2dong]

再加个背景音乐，让我回味一下当年玩 qq 空间自定义的感觉

[orlog]

@ding2dong 是的，计划添加中，但音乐版权是个问题，有什么好的方案吗

[ding2dong]

@orlog 搜 无版权背景音乐 看看。我记得当年挂的百度 mp3 的源，一些流行歌曲的纯音乐还是很好听的，比如 夜曲

[orlog]

@ding2dong 好的我研究一下，我想找那种西方古典交响乐一类的

[lk960511]

跟风分享一下我的博客，rccblogs.com ，欢迎来访~~~

[penzi]

发现样式改了，但是我还想说，改啥都不如把毛玻璃改成黑色透明色，不知道为什么要执着于白色。

还有，数据库存储 hash 是基本常识...不知道为什么需要特别强调。前端还是后端 hash 在我看来基本没啥差别。

[8bryo4p5qn758Dmv]

@cssk #5 我想还能丑到什么地步，打开一看我瞎了

[orlog]

@maggch97 黑玻璃的版本我也是有的，在黑暗主题里，颜色还没调好

@lk960511 你的网站好像打不开哦

[jiangteng]

背景太杂，过于影响阅读

[awesomes]

吓我一激灵

[maymayblog]

背景改一下(黑夜/白天 我觉得就够了)，字体悬停效果改一下(明色提醒就够了，没必要强行立体)，我觉得就差不多了，内容可以慢慢丰富，但是这个排班很清晰，那种动效很多，配图符合大众审美的我倒是认为毫无意义，论坛应该内容 first,花里胡哨除了浪费服务器资源，还浪费我眼睛

[dj721xHiAvbL11n0]

咱们背景图能换换嘛，感觉是上古世纪的背景图

[joeshero]

功能该有的都有,这 ui 无法接受...

[virgo]

@orlog #2 现在哪还有明文保存密码到数据库的

[orlog]

@x2420390517 欢迎推荐素材图哦~ 要宇宙风格的，最好带点科技感的

[HelloWorld556]

邮箱已经存在为啥还要清空别的内容,是不是可以改进一下

[orlog]

@HelloWorld556 后续会改成 ajax 的不刷新页面，谢谢反馈

[Zink99]

不愧是程序员的审美...

[lihexinkai]

高情商： 这个设计风格很有特点！ 低情商：不好看

[snitfk]

求求，这背景换一下吧，这把没近视的搞近视，近视的搞成深度近视。这设计根本就是和你建这论坛相违背的。

[huangzhiyia]

希望你工作三年后再回头看看这个帖子

[8zU02dFZkHXS6230]

“老年人”，有被冒犯到。

[orlog]

@vaaagle 这只是我的戏谑和调侃了，我当然不认为这里有真正的老年人

[spacebound]

没有登录的状态下，发私信报错了

[orlog]

@spacebound 收到，谢谢

[mahoo12138]

极简后端，用的是 PHP 吗？

[orlog]

@mahoo12138 看来是同道中人，知道 php 是动态语言里性能最好的？

[Dannyxx]

本来没啥，但为什么右下角切换模式，那种正常的普通的不花哨的模式被称为“老人模式”？？？是在讽刺谁？？

[orlog]

@Dannyxx 不要故意引战，现在大多数 app 里的简洁模式都被叫做“老人模式”

[jiannei]

还不错哦

[huyoa]

看着太晕了，不友好，建议黑色背景就挺好

[baijiahei]

手搓很赞
背景喧宾夺主
我是来看内容输出的
而不是这个花里胡哨的背景啊
老人模式还稍微能接受点

[HomeZane]

白色的字体+随机的背景=随机到不好的体验
被随机的正常年轻人也会很难受的
高质量的电影，游戏的字幕可以深入看下，都是下功夫的
比如字体的阴影，描边，背景边框都可以区分字幕与内容的手段

不会构成太大的识别障碍和有正常的用户体验也是两个概念

最后说一句，手搓论坛很强拉，加油

[arfaWong]

字体的效果看着太难受了，快瞎了

[orlog]

@huyoa
@baijiahei
@HomeZane
谢谢建议了，我为表示友好新增了选择背景色和透明度的功能，至于默认主题我还是保留吧，毕竟是个人论坛嘛，我得保留些特色

[337136897]

打不开了？

[U7Q5tLAex2FI0o0g]

好奇楼主在日常工作中和同事讨论问题的时候是不是也是和回复里的一样的说话方式

[orlog]

@littleylv 我不确定，说话方式你指的是什么

[hackun]

我劝你立刻把阴影背景图代码删了

[uilvn]

https://imgur.com/undefined

[uilvn]

https://imgur.com/EluU1Eh

[wildseeder]

OP 可以用 Chrome 自带的 Lighthouse 测一下，里面会给出具体的问题点 https://imgur.com/fVZcCJJ

[orlog]

@wildseeder 好的谢谢，改天试一下

@uilvn 电脑和手机以外的设备宽度我没测试，可能是自适应有问题改天我做下兼容，方便的话能否提供一下你的设备分辨率？

[kneo]

加密是加密，哈希是哈希。

加密是可逆的，哈希不可逆。但是哈希通常可以重用。如果每次哈希结果都是一样的，则相当于密码（或者 token ）。如果被截获，也会成为安全问题。不过在正确使用 https 的场景下，这个问题现在没那么严重。

哈希通常可以让用户相信服务器没有保存密码原文，当服务器风险高于传输层风险的时候，这一点是有意义的。当然，前提是用户相信这个哈希是不可逆。

你原文说的是加密，看你后来的回复，好像是哈希的意思。我认为你的表达并不准确。

做点事情不易，想得到别人的尊重更不易。没必要反应过激。

[orlog]

@kneo 加密。。。字面意思，加入秘密呗，另外也可以把哈希看作是一种有损加密，可以说哈希是加密的子集

[kneo]

@orlog 不。不管中文还是英文（ encryption ），哈希（ hashing ）都不属于加密。加密是与解密相对的，无法解密的过程不能定义为加密。而哈希只是一种相关的安全技术。在沟通中把哈希说成加密会造成相当大的误解，会被人理解成可逆的。

[orlog]

@kneo 哈希不属于加密。。。也就是说密码学专业不应该学这个是吧，或者说你认为，应该再独立出一门学问叫“加密学”？

[kneo]

@orlog 看来您真的很喜欢抬杠。我已经很礼貌的指出你的错误了。看的出你平常很少与人沟通。这只是一个不专业的术语使用，我只是单纯指出来，也没有对你有任何贬低或者批评的意思。

（维基百科，不让发链接）
在密码学中，加密（英语：Encryption ）是将明文信息改变为难以读取的密文内容，使之不可读的过程。只有拥有解密方法的对象，经由解密过程，才能将密文还原为正常可读的内容。理想情况下，只有经授权的人员能够读取加密文所要传达的信息。

（维基百科，不让发链接）
散列函数（英语：Hash function ）又称散列算法、哈希函数，是一种从任何一种数据中创建小的数字“指纹”的方法。散列函数把消息或数据压缩成摘要，使得数据量变小，将数据的格式固定下来。该函数将数据打乱混合，重新创建一个叫做散列值（ hash values ，hash codes ，hash sums ，或 hashes ）的指纹。

自己仔细读一下定义。很显然，加密过程是 100%可逆，哈希过程 100%不可逆。

加密与哈希的交集是零。

这里“加密”指的就是 Encryption 这个术语对应的含义。密码学是 Cryptography 。

密码学当然包含加密与哈希。我前面提过了，这都是安全技术相关的概念。

至于你的回复，在我看来属于无赖逻辑了。自己品味一下吧。“哈希不属于加密”，与“密码学专业不应该学这个”，有任何逻辑上的联系？我感觉你就是单纯的想杠一下。

最后，我本来是不想再回复的。因为根据你之前的回复，我觉得你还会跟我杠。
我写这么多是给别人看的。一是提醒大家不要再犯类似的低级错误了。二是说清楚点，孰是孰非，让大家自己做判断。

业余不可怕，可怕的傲慢。

[orlog]

@kneo 不好意思。。。我也向你指出一下你的错误：暂时只是你一厢情愿的认为是我错哦，而且你现在牵扯进去的是语言问题了，已经跟加密/哈希技术无关了

[orlog]

@orlog “看的出你平常很少与人沟通” 我可不可以认为这已经上升为人身攻击