米米的博客

做了一点微小的工作

前言

编码,是每个程序员绕不开的话题。对于前端工程师而言,字符更是会直观地展示在界面上。
提起文字,大部分人的脑中,都会定式为规整排列的字符。但是林子大了什么鸟都有,世界上可是存在着 6800 + 种文字,难免会飞出来一些诡异的鸟…
而号称「万国码」的 Unicode,在实现编码与展示的时候,也会不会遇到一些奇葩的事情呢?
事实上,可能你早已见识过了:


x̙͈̝͍͕̙̄͛̽̆͌́̕͟g̘̣̠̝̟̤̥̼̼̽͑͋̈̑̒͟͞q̛̤̦̝̘͎͋̔̋͌͒̆̋̚͡f̵̢̙͇̮̠̋̀͌̅̉̃̔͜͜͠͡r̢̜̩͙̭̲͓͈̈̀͑̆͋̚͢͜m̷̛͙̝̣̲̭͍͉̊̓̾̈̋̿̚͢͟͠s̷̡̩͔̮͈̜̊̽͂̆̈́̃̓͋̏

热҈的҈字҈都҈出҈汗҈了҈

你的屏幕被蓝翔挖掘机给挖坏了不信你看;̷̸̨̀͒̏̃ͦ̈́̾̀́̎͢҉̵̶͚̼͉͖̺̥͔͇̰̹̮͙͉̻̼̭̻͕̮͇ͨͬͪ͗̇̑̽͋̀̋̊͌ͧͨͭ̓̅͐ͥ̂̔̊ͧ͊҉̶̵̷̞̩̦̳̺̳̬̬̩̣̫͇̯̥͖͍͕̠̦̼̗ͯ̽͌̔ͪͯ́́͋̍ͨ̿̿̎͒ͤ̓̅̀͂ͧ͋̏ͫͣ̔͘͜͠͏̶̵̸̧̧̥̺͓̘̺͎̜̥͕͈̝̫͎̺̮̱̤̠̠͖̳̻̥̣̪͍͕͇̮͙̹̪ͮͧͫ͂͒ͤͣ̌̽ͨͪ͒̄̄̉̒̊ͩ̅͆͘̚͘͘̚͟͟͝ͅ


今天我们就来探讨一下这些奇怪的字符。

文字可以戴帽子和穿鞋子

提起泰文,很多朋友都会立即想到:萨瓦迪卡(你好)
但这句话是怎么写的呢?
其实这句你好,男生和女生之间还有差异,男生写法是:สวัสดีครับ,女生则是:สวัสดีค่ะ
不过这并不重要,重要的是,我们发现某些字的上面,还带了特殊的符号。就好像是戴上了帽子。
事实上,泰文字符不仅会「戴帽子」,偶尔还会「穿鞋子」,比如这三个字符:ผ ผู ผู้
如果脑洞再大一点,有人就会想,那是不是还可以戴多顶帽子呢?
的确如此… 泰文允许你穿一双鞋子,并且戴两顶帽子。完整的形式是这样的:

所以,平时看惯了中英文的我们,需要改变一下思路了。
世界上的文字,并不全是规规整整横向排列的格子,也存在像泰文这种变形金刚组合式的文字。
虽然标准的泰文里,「帽子」和「鞋子」的数量是有限制的,但由于国际码的迷之设计(先卖个关子),在计算机里显示的泰文字符,却可以拥有无数的帽子和鞋子。也就是说,它变成了一款可以在 Y 轴无限拓展的文字!
并且,咱不光可以往上喷,还可以有一定角度…
(由于一些系统会崩溃,这里使用截图)


还可以

简直是不讲道理。

文字还能倒过来

这里还介绍一个神奇的 Unicode 字符:\u202e,它的作用是让它之后的字符从右到左显示。笔者最早是在微信中发现这个小技巧的,如果昵称中包含这个字符,可以产生奇妙的效果。例如用户:
米米‮
看上去没有什么问题,但实际上是
米米\u202e
发送一个表情,就会显示为
米米‮:[动画表情]
如果用在文件名中,还可以起到欺骗的效果,例如:
sample_\u202ecod.exe
就会显示为
sample_‮cod.exe

阅读全文 »

Live2D看板娘

项目地址:live2d-widget

克隆这个仓库到服务器上,并配置 autoload.js,修改其中的链接为各文件的绝对地址,即可在网页中添加 Live2D 看板娘(かんばんむすめ)。
相对于市面上广为流传的版本,笔者对触发动作和语言进行了魔改(针对 Hexo NexT 主题),调整了图标样式、元素定位,并解决了 CSS 的前缀等问题。
更多内容可以参考项目文档及下方链接。
快来把萌萌哒的看板娘抱回家吧!


参考文章:
网页添加 Live2D 看板娘
给博客添加能动的看板娘 (Live2D)- 将其添加到网页上吧

本文更新于 2019 年 12 月 30 日:
即日起本插件不再依赖于 jQuery。

本文更新于 2020 年 4 月:
如果修改 fork 之后的版本,并通过 jsDelivr 的 CDN 加载,请务必创建新的 git tag,否则改动不会生效。具体操作见仓库 README 中的说明。

In 2012, Mathematician Ian Stewart came out with an excellent and deeply researched book titled "In Pursuit of the Unknown: 17 Equations That Changed the World."
在 2012 年,数学家斯图尔特(Ian Stewart)出版了一本精彩而深入研究的著作,名为《追寻未知:改变世界的 17 个公式》。
His book takes a look at the most pivotal equations of all time, and puts them in a human, rather than technical context.
他的书着眼于有史以来最关键的方程式,并将它们置于普通人而非专业的背景中。
"Equations definitely can be dull, and they can seem complicated, but that's because they are often presented in a dull and complicated way," Stewart told Business Insider. "I have an advantage over school math teachers: I'm not trying to show you how to do the sums yourself."
「方程式肯定会显得沉闷,而且它们看起来很复杂,但那是因为它们经常以这样的方式呈现,」斯图尔特告诉 Business Insider。 「我比学校的数学老师更有优势:我不会试图告诉你如何自己算出它们。」
He explained that anyone can "appreciate the beauty and importance of equations without knowing how to solve them ... The intention is to locate them in their cultural and human context, and pull back the veil on their hidden effects on history."
他解释说,任何人都可以「欣赏方程式的美丽和重要性,而不去知道如何解它们…… 目的是将它们置于文化和人文环境中,并揭开它们对历史隐藏效应的面纱。」
Stewart continued that "equations are a vital part of our culture. The stories behind them — the people who discovered or invented them and the periods in which they lived — are fascinating."
斯图尔特继续说道,「方程式是我们文化的重要组成部分。他们背后的故事 —— 发现或发明它们的人以及他们生活的时期 —— 都很吸引人。」
Here are 17 equations that have changed the world:
以下是改变世界的 17 个方程式:
Max Nisen contributed to an earlier version of this post.
Max Nisen 为本文的早期版本做出了贡献。

The Pythagorean Theorem


Pythagoras, 530 BC
What does it mean? The square of the hypotenuse of a right triangle is equal to the sum of the squares of its legs.
作用:直角三角形的斜边的平方等于其直角边的平方和。
History: Though attributed to Pythagoras, it is not certain that he was the first person to prove it. The first clear proof came from Euclid, and it is possible the concept was known 1,000 years before Pythagoras by the Babylonians.
历史:虽然认为毕达哥拉斯(Pythagoras)发现了这个公式,但不确定他是否是第一个证明它的人。第一个明确的证明来自欧几里得,而这个概念可能是在毕达哥拉斯之前 1000 年就被巴比伦人知道了。
Importance: The equation is at the core of much of geometry, links it with algebra, and is the foundation of trigonometry. Without it, accurate surveying, mapmaking, and navigation would be impossible.
重要性:勾股定理是几何的核心,它与代数联系起来,是三角学的基础。没有它,准确的测量、地图制作和导航将是不可能的。
In terms of pure math, the Pythagorean Theorem defines normal, Euclidean plane geometry. For example, a right triangle drawn on the surface of a sphere like the Earth doesn't necessarily satisfy the theorem.
在纯数学方面,毕达哥拉斯定理定义了正常的欧几里德平面几何。例如,在像地球一样的球体表面上绘制的直角三角形不一定满足该定理。
Modern use: Triangulation is used to this day to pinpoint relative location for GPS navigation.
现代用途:今天使用三角测量来确定 GPS 导航的相对位置。

阅读全文 »

之前的一篇文章中,提到了 WordPress 的插件审核机制,其中对于代码安全性的要求,主要就是对 CSRF 与 XSS 攻击的防范。官方邮件中这样写道:

Not using Nonces and/or checking permissions

Please add a nonce to your POST calls to prevent unauthorized access.
Keep in mind, check_admin_referer alone is NOT bulletproof security. Do not rely on nonces for authorization purposes. Use current_user_can() in order to prevent users without the right permissions from accessing things.

Please sanitize, escape, and validate your POST calls

When you include POST/GET/REQUEST/FILE calls in your plugin, it's important to sanitize, validate, and escape them. The goal here is to prevent a user from accidentally sending trash data through the system, as well as protecting them from potential security issues.
SANITIZE: Data that is input (either by a user or automatically) must be sanitized. This lessens the possibility of XSS vulnerabilities and MITM attacks where posted data is subverted.
VALIDATE: All data should be validated as much as possible. Even when you sanitize, remember that you don't want someone putting in 'dog' when the only valid values are numbers.
ESCAPE: Data that is output must be escaped properly, so it can't hijack admin screens. There are many esc_*() functions you can use to make sure you don't show people the wrong data.
To help you with this, WordPress comes with a number of sanitization and escaping functions. You can read about those here: https://developer.wordpress.org/plugins/security/securing-input/
Remember: You must use the MOST appropriate functions for the context. If you're sanitizing email, use sanitize_email(), if you're outputting HTML, use esc_html(), and so on.
Clean everything, check everything, escape everything, and never trust the users to always have input sane data.

下面通过维基百科的内容介绍 CSRF 与 XSS 攻击的具体形式。

阅读全文 »

如何过滤垃圾评论是个人博客老生常谈的话题。一种比较简单的方案就是加上验证码,这不会为正常回帖的用户增加太多负担,但足以将一些刷评论的机器人拒之门外。对 WordPress 这种带后端的博客系统而言,验证码还可以增加暴力破解登录密码的成本,提高安全性。

在 WordPress 插件库中,有着各式各样的验证码插件。然而,很多验证码插件都依赖于 Google 的 reCAPTCHA,这在国内无法访问;而一些图片验证码插件的质量参差不齐,在机器学习快速发展的今天,实际效果难以得到保障。

虽然本站已经抛弃了 WordPress 转投 Hexo 静态博客(正如你所看到的这样),但考虑到 WordPress 中少有适合我国国情的验证码插件,笔者决定将一些常见的图形验证码的功能进行整合,推出一个更完美的验证码解决方案。Mimi Captcha 就这样诞生了,该插件最大的特点是,除了传统的数字、大小写字母验证码之外,还加入了对中文验证码和算术验证码的支持。

Mimi Captcha 是基于 Vinoj Cardoza 的 Captcha Code 在 GPL 协议下二次开发的。原项目存在的问题是,验证码中的字符采用同一字体在同一高度下顺序排列,这样非常容易被识别。改动过程中,加入了「超时时间」,以及对用户更为友好的「不区分大小写」选项。而验证码图片的生成算法,则进行了重构,很大程度上采用了流水孟春的方案,在原插件上拓展而成。同时,在 IP 白名单等功能上,参考了 Captcha by Simplywordpress 的实现。最终效果如图:

登录验证码

阅读全文 »
0%