schtonn
/
public


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250
							<!DOCTYPE html>

<head>
    <!-- <link async rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"
        integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous"> -->
    <script type="text/javascript" src="../js/jquery.min.js" crossorigin="anonymous"></script>
    <link rel="stylesheet" href="../css/bootstrap.min.css" crossorigin="anonymous">
    <script type="text/javascript" src="../js/bootstrap.min.js" crossorigin="anonymous"></script>
    <link rel="stylesheet" href="../css/style.css">
    <link rel="preconnect" href="https://fonts.gstatic.com">
    <link href="https://fonts.loli.net/css2?family=Anonymous+Pro:ital,wght@0,400;0,700;1,400;1,700
&family=Noto+Serif+SC:wght@300;400;500;600;700&display=swap" rel="stylesheet">
    <title>日志</title>
    <style>
        * {
            transition-duration: 300ms;
        }

        .btn {
            text-shadow: rgb(133, 133, 130) 1px 2px 3px;
        }

        .btn-xs.gee {
            background-color: rgb(70, 59, 150);
            color: white;
        }

        .btn-info.gee {
            color: #fff;
            background-color: #027396;
            border-color: #46b8da;
        }

        code.gee {
            background-color: rgb(70, 59, 150);
        }

        .noshadow {
            text-shadow: none;
        }

        .gee ::selection {
            color: white;
            text-decoration: underline wavy #FF3028;
            text-shadow: 1px 1px 2px red, 0 0 1em blue, 0 0 0.2em blue;
            background-color: black;
        }

        .gee {
            color: white;
            background-color: black;
        }

        .btn-dang {
            transition-duration: 1000ms;
        }

        .btn-dang.gee {
            outline: 10px transparent
        }

        .btn-dang:is(:hover, :hover:focus) {
            outline: 15px solid rgba(58, 58, 58, 0.8)
        }

        .btn-dang.gee:hover {
            outline: 4000px solid rgba(0, 0, 0, 0.1)
        }

        .btn-dang:is(:hover:active:focus, :active) {
            scale: 80%;
            transform: translate(-7px, -7px);
            outline: 150px double rgba(162, 6, 6, 0.5)
        }
    </style>
    <script>
        $().ready(function () {
            $('.btn-danger').on('click', function (e) {
                $('body,.btn,.btn-xs,code,pre').toggleClass('gee')
                console.log(e)
            })
        })
    </script>
</head>

<body>
    <a class="btn btn-info" href="/"><span class="glyphicon glyphicon-home" aria-hidden="true"></span>&nbsp;返回</a>
    <div class="page-header">
        <h1>网站日志</h1>
    </div>

    <h3 id="22.12.23">
        2022.12.23
        <small>git hooks</small>
    </h3>
    <p>用 Git Hooks 科技实现了博客的自动推送更新，这样就不用我每次都暴力粘贴了。hook 这个名字听着很高大上，其实就是 <code>git push</code>
        之后执行一个脚本，把原来的博客文件夹覆盖了而已，也就是把暴力粘贴的工作自动化。</p>
    <p>给首页加上了背景图，是我在潭柘寺拍的鸽子。这张图太大了，我云服务器的公网出流量要省着用，所以我托管到图床上了。</p>
    <p>发现了一个很神奇的 js 压缩工具，<a href="https://lifthrasiir.github.io/roadroller/">Roadroller</a>，能把代码压到原来的百分之几大小，所以我稍微压了一下成绩查询和化学数据库的代码。</p>
    <hr>

    <h3 id="22.12.22">
        2022.12.22
        <small><a href="/score">score</a>、<a href="/about">about</a></small>
    </h3>
    <p>让所有扣分点晃来晃去；多好玩。</p>
    <p>录入多人时增加了一个图表，让比较更直接。</p>
    <p>修改了首页排版。</p>
    <hr>

    <h3 id="22.12.20">
        2022.12.20
        <small><a href="/score">score</a></small>
    </h3>
    <p>实现了整理答题卡小分的功能，选择题只标出错题，其他题目也标明总分，比心意答上那一堆勾勾叉叉的看着顺眼多了。</p>
    <p>本来以为获取到的坐标很难转化成文档流直接定位的形式，后来发现原来 XYWH 代表坐标和大小，单位都是像素，这样只要我再乘一个图片缩放的系数就能定位了。</p>
    <hr>

    <h3 id="22.12.18">
        2022.12.18
        <small></small>
    </h3>
    <p>把成绩查询的一些冗余文字删减了。把又臭又长的代码压缩了一下，体积减了一半还多。</p>
    <p>梳理了一下前两天嗅探心意答数据的过程，发现要是我的工具流传特别广，学校还坚决要以这个为由告我，好像还真能定一个提供侵入、非法控制计算机信息系统程序、工具罪...</p>
    <p style="font-family:KaiTi">
        提供侵入、非法控制计算机信息系统的程序、工具，具有下列情形之一的，应当认定为刑法第二百八十五条第三款规定的情节严重：<br>（一）提供能够用于非法获取支付结算、证券交易、期货交易等网络金融服务身份认证信息的专门性程序、工具5人次以上的；<br>（二）提供第（一）项以外的专门用于侵入、非法控制计算机信息系统的程序、工具20人次以上的；...
    </p>
    <p style="text-align:right">——节选自《关于办理危害计算机信息系统安全刑事案件应用法律若干问题的解释》</p>
    <p>怎么说呢，希望学校不要告我吧...</p>
    <hr>

    <h3 id="22.12.17">
        2022.12.17
        <small><a href="https://greasyfork.org/zh-CN/scripts/456705-wangshaui-simulator">TamperMonkey</a></small>
    </h3>
    <p>写了个集修改 localStorage，替换 javascript，伪造老师身份于一身的用户脚本，但技术能力有限，还得要用户手动屏蔽原来的 javascript。</p>
    <p>给图表加上了令人舒适的自适应窗口变化功能。</p>
    <p>准备写各科的分析，现在能拿到接口数据了，还得研究怎么处理。</p>
    <p>为了方便调试，把心意答接口的加密过程硬编码了一下，以后就可以直接从<a href="/crypty-2">这里</a>处理了。</p>
    <hr>

    <h3 id="22.12.16">
        2022.12.16
        <small><a href="http://36.112.23.77/">36.112.23.77</a></small>
    </h3>
    <p>这个心意答，简直就是活靶子，循循善诱地让人把他完全攻破。</p>
    <p>它还有个合适的难度曲线，从未加密的接口里偷数据，到双向加密的接口进行解密，到伪造 cookie 和 localStorage，再到骗过虚假的 uuid 验证，每一步都能放出刺激而又吓人的新信息。</p>
    <p>我们只能期望，不要有太多人来想着攻击这些接口，不然来一个攻破一个，到时候大家的成绩都成公开的秘密了。</p>
    <p>我们说它蠢事做尽，还好它坏事没做到底，至少阅卷的权限还握在登陆验证手里。可是，既然会登陆验证了，其他各种东西，如每次考试的成绩单、详细的分析，这些却都完全不需要登陆验证。只要在客户端合适的位置写好老师的校园号（可以从校园邮箱里检索），再模仿网页进行加密，或是直接篡改网页的
        javascript，你就得到了老师的身份，全校所有人的各种信息都暴露无遗。</p>
    <p>它在加密上也完全没有用心，只草草加了一层 base64 和 AES，密码竟然明文放在 javascript
        文件里，加密函数的名称也没有混淆。而且，这样危险的接口完全不是这么加密来的吧！理应在每个有敏感信息的接口都放上登陆验证，这才能体现出对学生隐私的重视。<b>问题出在哪儿？问题就出在开发者犯懒。</b></p>
    <p>话又说回来，要是它加上了登陆验证，我还怎么偷你们的成绩呢？？也许我可以学学机房大佬，用易语言开发一个木马，然后把老师的账号密码偷过来。或者远程控制老师的电脑，用惊悚图片把老师吓跑，再趁机操作他的帐号。</p>
    <hr>

    <h3 id="22.12.14">
        2022.12.14
        <small><a href="/score">score</a>、<a href="/blog">blog</a></small>
    </h3>
    <p>今天的发现特别离谱。</p>
    <p>心意答查询成绩的接口只经过了一层双向加密，没有丝毫验证身份的手段，并且返回的数据也多于显示的数据，结果就是只要知道考试编号、科目编号和数字校园号就能直接查到这个人，以及他的班级详尽的成绩。</p>
    <p>更有甚者，在线学习平台直接放出了全年级所有人的姓名和数字校园号的对照表，以至于只要知道姓名就能查出成绩来。</p>
    <p>以及，它返回信息的模式属于能返则返，也就是说我不知道科目编号，可以直接放两百个进接口里，它还自动筛选出存在的科目编号；不知道考试编号也能一个一个试出来：就算考试和校园号完全对不上，它也会返回考试名称。对我们这些<i>阴险的窃取者</i>来说，这简直是太方便了。
    </p>
    <p><b>只需要知道一个姓名，你历次考试的成绩就全都查出来，这就是信息泄露的危害...</b></p>
    <p>查成绩的接口，这样的安全性不能说离谱，只能说是离谱至极。</p>
    <p>除此之外，今天还把博客通过暴力粘贴的方式搬运过来了。</p>
    <hr>

    <h3 id="22.12.13">
        2022.12.13
        <small><a href="/chem">chem</a>/add</small>
    </h3>
    <p>实现了添加化学式的操作，往里加了几个式子，但是对删除操作的处理非常纠结，因为 MySQL 的自增主键是不受删除影响的，删除一个元素后仍然占用着这个编号。</p>
    <p>倒也有解决办法，就是强制覆盖自增的位置，但这样很难应对在序列中间删除的情况，所以删除功能基本是不会上线了，只能由我在后台自己维护。</p>
    <hr>

    <h3 id="22.12.12">
        2022.12.12
        <small><a href="/chem">chem</a>/query</small>
    </h3>
    <p>实现了对数据库中化学方程式的查询，虽然目前数据库里只放了两个式子，但等我实现添加功能后会往里加的。</p>
    <p>大量运用了正则表达式（没有你我活不了啊！）。</p>
    <p>认识到了 SQL 注入的危害，并用简陋的手段做了防护。</p>
    <hr>

    <h3 id="22.12.11">
        2022.12.11
        <small>release</small>
    </h3>
    <p>折腾了半天，总算把网站放到公网上了。</p>
    <p>为了方便，我大致梳理一下，原先只是在 <a href="http://schtonn.github.io/">schtonn.github.io</a> 和 <a
            href="http://schtonn.gitee.io/">schtonn.gitee.io</a> 上写博客，随后把实现的几个小功能拉起来拼凑了个页面。</p>
    <p>后来gitee停止服务了，我又想学习学习后端开发，所以目前网站在 <a
            href="http://43.143.233.184/">http://43.143.233.184/</a>，应该会保持更新，不过暂时还没有购置域名的打算。</p>
    <hr>

    <h3 id="22.12.4">
        2022.12.4
        <small>dark</small>
    </h3>
    <p>在首页加上了黑暗模式，以及非常愚蠢的秘密消息（其实更多是对 Bootstrap 响应式布局的测试）。</p>
    <p>进一步完善按钮样式。</p>
    <hr>

    <h3 id="22.12.3">
        2022.12.3
        <small><a href="/chem">chem</a></small>
    </h3>
    <p>把化学式配平、相对质量计算的网页实现出来了，接下来还要加上 MySQL 的上传。</p>
    <p>为所有按钮加上了好玩的悬浮样式。这可真不容易，为了去掉浏览器自带的丑陋黑色边框，我进行了不懈的斗争，最后发现是除了 <code>:focus</code> 和 <code>:active</code> 选择器，还得写上
        <code>:focus:active</code> 。
    </p>
    <button class="btn btn-info">看看</button>&nbsp;&nbsp;&nbsp;&nbsp;
    <button class="btn btn-info"
        style="outline: 10px double rgba(95, 177, 221, 0.5);">悬浮</button>&nbsp;&nbsp;&nbsp;&nbsp;
    <button class="btn btn-info" style="outline: 5px dashed rgba(95, 177, 221, 0.5);">聚焦</button>
    <hr>

    <h3 id="22.12.2">
        2022.12.2
        <small>MySQL</small>
    </h3>
    <p>近日研究了 Bootstrap 框架很多不错的设计，如按钮组团等，进行了应用。</p>
    <p>今天开始尝试在本地搭建 MySQL 数据库。希望是日后能建起一个存放中学化学式的数据库。</p>
    <hr>

    <h3 id="22.11.30">
        2022.11.30
        <small>WebSocket</small>
    </h3>
    <p>有了小崔给的主机，开辟了很多新领域。</p>
    <p>不用暴力地琢磨纯静态页面了，可以开始自己开发网页后端。刚起步，先用 Node.js+Express 做后端。写了个配平化学式的接口（<a class="btn-xs btn-default noshadow"
            href="/chemist?H2+O2=H2O">/chemist?H2+O2=H2O</a>）。</p>
    <p>用 WebSocket 可以实现服务器与客户端的即时通讯，原先搭载在 LeanCloud 上的五子棋计算部分可以迁移到本地了。</p>

    <hr>
    <p><button class="btn btn-danger btn-dang"><span class="glyphicon glyphicon-off" aria-hidden="true"></span></button>
    </p>
    <pre style="font-family: 'Courier New';font-size: 10pt;white-space: pre;margin: 1em 0px;line-height: 10pt;">
    .▄▄ ·  ▄▄·  ▄ .▄▄▄▄▄▄       ▐ ▄  ▐ ▄ 
    ▐█ ▀. ▐█ ▌▪██▪▐█•██  ▪     •█▌▐█•█▌▐█
    ▄▀▀▀█▄██ ▄▄██▀▐█ ▐█.▪ ▄█▀▄ ▐█▐▐▌▐█▐▐▌
    ▐█▄▪▐█▐███▌██▌▐▀ ▐█▌·▐█▌.▐▌██▐█▌██▐█▌
     ▀▀▀▀ ·▀▀▀ ▀▀▀ · ▀▀▀  ▀█▄▀▪▀▀ █▪▀▀ █▪
    </pre>

</body>

</html>