今天是特别的日子,我想把这篇存稿发出来。

一次缺席,次次缺席,便不再期待重逢。
也是时候,解开最后一个设计过的谜题。


学加密的同时,我恰好写前端比较多,也有朋友找我测试他们前端页面上的加密方案的安全性。当时我就在想:

  1. 前端很适合展示浪漫的心思。前端是一个公开的信息渠道,单纯的前端代码具有较差的隐匿性,但是又具备极其良好的传播性
  2. 加密具备公开又神秘的属性。学到公钥加密的时候我觉得这种手法真的是优美极了:纵使一切信息都能被所有人看到,但只有发送者和接受者知道对方想表达的是什么。

公开的前端,加密的方案,说做就做。

我想到的是隐藏一段话,思维逐渐发散到祝他生日快乐。我不希望文本本身平铺直述地躺在代码里,也不希望同行解密后对我欲盖弥彰的加密嗤之以鼻,所以我希望隐藏的手法多少带一点点巧思。

这是我大二的解决办法:

try{let key=eval(CryptoJS.AES.decrypt("U2FsdGVkX1/sZGG8RDCO08aUuolRteDh0GJRsSIBI4mUGuX9Gd7aPaV9ruxiZ/gFCLStKO9n4P9Y1EH4RELsgQ==", 'trios').toString(CryptoJS.enc.Utf8));
eval(CryptoJS.AES.decrypt("U2FsdGVkX18903sbV5GwKO1wzwFnS9TRTACh25BIRdHGjFdkq2jd75+JYMyicx/7cgVcY4kwGLGqV6Yo0IaaWA==", key).toString(CryptoJS.enc.Utf8));}catch{;}

两段密文,第一段自带密钥,其实没啥破解难度;巧思是第二段,第二段以第一段的运算结果作为密钥。
我把这个代码嵌入到了我写的脚本中:【MOOC】JS脚本|便于复制粘贴中国大学MOOC网站的测试题和选项

第一段解出来是:"''+new Date().getMonth()+new Date().getDate();",代表当前的日期。
只有当日期符合我加密的日期时,第二段才会解密成功。

这样就丝滑地做到了“特定时间(即生日)触发”。
这个加密方案灵感来源于公钥加密方案的设计理念。公钥加密之所以能成功,就是因为其中存在一个难解的数学问题,即大整数分解。因此我就在想,在我的设计场景里,“难解的问题”可以是什么呢?我想到了一个点:少有人知道我喜欢的人是什么时候生日。

解密的结果你们自己去解吧,就不贴了。
这两行代码的好处如下:

对于我:

  1. 可以放到任意地方执行。只要是JS代码,引入了CryptoJS就可以执行了。作为纯前端代码,它的隐匿性和传播性都还不错。即使换成其他语言,也就只是换个加密库的事情,方法可以保持不变。

对于他:

  1. 足够简单,以致于他可以解密。一方面因为是前端,所以不管是验证还是解密都不需要额外安装环境,不像Python或者别的啥还得装环境。另一方面我专门嵌入到了脚本中,如果他尝试过安装我的脚本、或者说看过我的博客、或者看过我发的相关的内容,他只需要安装脚本就可以引入CryptoJS库,并在页面上直接做测试了【毕竟我也知道引入CryptoJS库对于一个行外人来说可能挺麻烦的】。
  2. 他来解密,比其他人更加容易。毕竟密钥是他生日,换别人还得爆破一下密钥,虽然密钥空间才366,但是多少也是要爆破一下的。
  3. 他不解密,效果也还是一样的。不管解密与否,反正这个代码会在他生日那天弹出祝他生日快乐的信息。管它弹给谁了,总之它是弹出来了。我已经教过他怎么运行脚本了,基于人类原始的好奇心,他在看了这篇文章后万一某天突然想起,可能会在生日那天运行一下我的脚本,也不枉我的精心设计。

对于同行:

  1. 调用CryptoJS库有一点小门槛。很多人对浏览器脚本只停留在使用的阶段,而CryptoJS库并不是一个控制台能直接运行的常用库,需要引入,因此我的这两行代码直接扔控制台会报错,需要配合脚本管理插件或者自行想办法引入相应的库;
  2. new Date().getMonth()的结果比实际月份少1,比如如果今天是4月,那么返回的值就是3。即使有人试图暴力破解,得出来了密钥是多少,破解的人也很可能会因为不熟悉JS代码而弄错我究竟要几月祝他生日快乐;
  3. AES的加密模式特别多。如果不调用CryptoJS库,试图使用在线解密,由于CryptoJS库默认的AES加密模式是CBC,会自动将密钥拓展为256位,直接使用在线解密去解第一段密钥时,需要先拓展trios这个密钥,否则无法使用在线解密。并且还得查到它的特定的填充模式。
  4. 这两行代码是无害且无意义的。就算猜出密钥了,知道他是什么时候生日了,也对我俩之外的人都没有什么意义;而如果没猜出来这两行代码的作用,它寻常时候也不会执行。
  5. 就算别人完全解密成功了,我的字符串也只包含他的化名昵称。因此除非与我们俩都相熟的朋友,其他人并不知道我在祝福谁,很大程度地保证了他的互联网隐私性。

至此,就形成了:

你知道我一定会私聊祝福你开心。
却不知道我还会向全世界祝福你。 而我向全世界公开的祝福,
仅当你愿意了解我的时候,
才会发现。

这个矛盾又浪漫的闭环。

方案的确拙劣,不过确实是我当初能想到的藏匿一段文本的、最契合我自己的方法了。
要的就是难度不至于大到解不开,但是又永远对他双标

如果让我现在去设计肯定是尽量想办法做到近似一次一密了。【菜鸡碎碎念】

实际上,我当时发布在互联网上的大部分加密加锁的内容,如果他去解锁都会更加简单。
不过幸运又不幸的是,他一个也没发现

不过,这个方案仍然算是我感觉的挺有趣的一个,
公开分享给大家,或许可以有幸被某个路过的写手捉到灵感。

【代码】JS|前端密码,浪漫至死不渝,祝我生日快乐的更多相关文章

  1. js前端分页之jQuery

    锋利的js前端分页之jQuery 大家在作分页时,多数是在后台返回一个导航条的html字符串,其实在前端用js也很好实现. 调用pager方法,输入参数,会返回一个导航条的html字符串.方法的内部比 ...

  2. 正则表达式之js检验密码强度

    最近一直在做通行证项目,里面的注册模块中输入密码需要显示密码强度(低中高).今天就把做的效果给大家分享下,代码没有网上搜索的那么复杂,能够满足一般的需求. html 代码如下: <!DOCTYP ...

  3. JS前端调用后台方法

    //JS前端代码function Exportqmdltb() { var areavalue= GetQmdltmValue(); $.ajax({ type: "post", ...

  4. JS前端无侵入实现防止重复提交请求技术

    JS前端无侵入实现防止重复提交请求技术 最近在代码发布测试的过程中,我发现有些请求非常的消耗服务器资源,而系统测试人员因为响应太慢而不停的点击请求.我是很看不惯系统存在不顺眼的问题,做事喜欢精益求精, ...

  5. 最好用的js前端框架、组件、文档在线预览插件

    这里收集的都是个人认为比较好的js框架.组件 js前端ui框架 此处列举出个人认为最好的几个框架(排序即排名),现在好点的框架商用都需要付费,以下几个也不例外,但是由于组件丰富,都可以作为企业应用的完 ...

  6. JS前端开发判断是否是手机端并跳转操作(小结)

    JS前端开发判断是否是手机端并跳转操作(小结) 这篇文章主要介绍了JS前端开发判断是否是手机端并跳转操作,非常不错,具有参考借鉴价值,需要的朋友可以参考下 常用跳转代码 ? 1 2 3 4 5 6 7 ...

  7. JS前端创建CSV或Excel文件并浏览器导出下载

    长期以来,在做文件下载功能的时候都是前端通过ajax把需要生成的文件的内容参数传递给后端,后端通过Java语言将文件生成在服务器,然后返回一个文件下载的连接地址url.前端通过location.hre ...

  8. 【QRcode二维码】:使用JS前端插件QRcode.js生成二维码

    1.先简单说一下jquery-qrcode,这个开源的三方库(可以从https://github.com/jeromeetienne/jquery-qrcode 获取), qrcode.js 是实现二 ...

  9. 浅析js前端发展及mvvm的选型

    最近终于下定决心学点前端的东西,然而各种框架,让人眼花缭乱. 先总结一下js前端的发展史 1.刀耕火种,原始时代 这个时候用DOM原生API来操html元素,估计getElementBy之类的函数满天 ...

  10. 编写高质量代码:Web前端开发修炼之道(一)

    最近老大给我们买来一些技术方面的书籍,其实很少搬着一本书好好的完整的看完过,每每看电子档的,也是打游击式的看看这章,瞅瞅那章,在那5本书中挑了一本比较单薄的<编写高质量代码web前端开发修炼之道 ...

随机推荐

  1. Flink11--FliterAndKeyBy算子

    一.导入依赖 参考本人下博客 二.代码 FLink11FilterApp.java package net.xdclass.class9; import org.apache.flink.api.co ...

  2. xcode 12.3 mac m1

  3. 如何通过 Python 实现一个消息队列,为在线客服系统与海外运营的APP对接

    我在业余时间开发了一款自己的独立产品:升讯威在线客服与营销系统.陆陆续续开发了几年,从一开始的偶有用户尝试,到如今线上环境和私有化部署均有了越来越多的稳定用户. 而我收到的用户需求也越来越多,产品化的 ...

  4. Thymeleaf遍历选中多个复选框

    使用场景:用户角色一对多关联关系 <!-- roleList:所有角色信息 :userRoleList:用户已有角色id列表--> <input th:each="role ...

  5. 使用JAVA8 filter对List多条件筛选

    记录项目开发的过程中遇到的一些问题及解决方法,由于公司操作数据库都是统一使用工具生成的存在一些多表查询模糊查询,这些操作只能在集合方面下手了,比如发送邮件记录方面查询,对用户的名字及邮件模糊检索 年龄 ...

  6. QT5笔记:4. 设置应用图标

    4. 设置应用图标 参考视频:https://www.bilibili.com/video/BV1AX4y1w7Nt # 在项目的.pro文件中添加如下内容,ico文件名称可变 RC_ICONS = ...

  7. Flink学习(十一) Sink到Elasticsearch

    导入依赖 <dependency> <groupId>org.apache.flink</groupId> <artifactId>flink-conn ...

  8. FormCreate设计器v5.6发布—AI加持的低代码表单设计器正式上线!

    近期DeepSeek可谓是刷遍全网,当然,在DeepSeek等AI技术的推动下,人工智能正以惊人的速度改变着各行各业.AI不仅是一种技术趋势,更是未来生产力的核心驱动力. 如今,FormCreate设 ...

  9. 关于JS框架的一点想法

    读了几页<vue.js设计与实现>,记录几点想法: 1.Html是根本 2.无论哪个框架,不管是运行时框架,还是编译时框架,最终都要通过标签"绘制"页面 3.这个&qu ...

  10. PHP将变量存储在数据库中,读取并执行变量的方法

    http://www.edbiji.com/doccenter/showdoc/4/nav/1214.html 例如将下边的字符串存储到数据库中您好,您的验证码是".$authcode.&q ...