可以玩好久的WEB解密向游戏

近期有V2坛友做了一个WEB解密的网站。游戏规则很简单，在当前网页中找到通往下一关的password就行。
于是周末花了点时间挑战一下，顺便消耗一点百无聊赖的时间吧。

挑战地址

下面是我个人的提示。喜欢挑战的童鞋可以直接略过。实在抓脑想不出可以看一下参考参考。

stage1

直接点链接进入第二关。

stage2

右键点击查看页面源码或者直接打开chrome的debug console，找到被css式样隐藏的链接即可。

stage3

发现url赫然写着thethirdstage.html，试着把third改成fourth进入第四关。

stage4

查看页面源码，发现注释里面有下一关的页面名称。输入页面名称进入第5关。

stage5

总之先谷歌一下吧。把谷歌到到答案输入进去，进入第六关。

stage6

谷歌图像检索。顺利找到该图女主名称。

stage7

略难。首先进入页面debug模式看到有个图像的tag是’ing’，修改成’img’之后发现是白图一张。很显然，上面肯定有我们要的线索。
这种一般用不显眼的颜色写了什么在图上，谷歌一下online ocr，比如这个网站，把刚刚的图片扔进去，顺利获取下一关的信息。

stage8

发现是一张jpg的图。之前都是png的图，唯独这张是jpg，可以想象一下应该是利用了jpg的特性隐藏了什么东西。以前有把torrent藏在jpg里面的猥琐做法，这次比较简单，我们直接用文本编辑器打开该jpg即可。比如vim question.jpg，移动到最下端，赫然发现下一关的信息就在下面。

stage9

比较简单，打开console把隐藏的input field的数字从0改成9就行了。

stage10.5

直接一下子跳到了第10.5关？提示我们得先回到第十关。还好我的chrome插件提醒我从第九关跳过来的时候有302跳转。查看一下跳转信息就可以扒到第十关的url了。
直接在浏览器里输入第十关的url会立即又跳到第10.5关。我们可以直接用curl获取页面源码来查看。

stage11

md5值啊。直接谷歌好了。一般来说一些彩虹表会提供很多常用字符串的md5值。这一关我们直接谷歌就是了。

stage12

乱码。但是不用怕，我们用curl就行了。lol。
然后看到问题提示，再次通过谷歌，当然这个问题的答案对于理工科的同学来说应该是常识才对。

stage13

翻看源码发现snowa.png。这个是什么啊？搜一下雪花图相关的图片加密，并没有什么通用方法。手贱看看有snowa估计有snowb，嗯，这样我们得到两张雪花图片。
乍看是一模一样的图片，diff一下呗。最方便的当然是用imagemagick啦。没有的童鞋请自己安装。

magick compare snowa.png snowb.png snowdiff.png 打开 snowdiff.png一看，答案写得真够大的。

stage14

两个提示，第一个谷歌意思意思是让你倒过来看。我们发现这个是一家知名的公司名字。第二个提示，问你仅仅是公司名吗？显然把公司名字直接输入进去是错误的。我们可以谷歌一下该单词还有无别的意思。最后在wikipedia可以找到我们期待的答案。

stage15

扫视源码发现有PNGsNot.png的图片。提示文件头有问题。我们试着用vim打开该png文件，发现开头是PNG98a字样，谷歌搜索png98a什么狗屁都没有，倒是我们发现gif里面有GIF89a的式样。我们试着把PNG改成GIF，然后把文件名后缀改成PNGsNot.gif，打开文件，顺利获取答案。

今天就暂时到这里。

Web

不温不火的AMP

AMP全称是Accelerated Mobile Pages，由谷歌提出，目的是通过改造一部分html的样式来给移动端网页加速。不过这个式样自从提出来之后除了少许有博文介绍，一直是不温不火，导致我有几次看到都毫无兴趣地略过了。

我们可以从这里了解快速生成一个AMP页面的方法。

如何把网页AMP化？

其实总而言之，从一般的网页到AMP支持的网页只需要几点。

必须的markup形式

  • html 文件以 <!doctype html>开头。

  • html的top的dom元素需要为<html ⚡> tag (或者是<html amp>)

  • 需要有<head> 和 <body> tag。(在传统html中它们不是必须的)

  • 包含一个 <link rel="canonical" href="$SOME_URL" /> tag 指向没有导入AMP的原版网页，如果我们仅有AMP网页，那么使用相同的url就行了。

  • 需要把 <meta charset="utf-8"> 作为<head> tag的第一个子元素。

  • 需要包含一个<meta name="viewport" content="width=device-width,minimum-scale=1">的tag，同时推荐其属性包含initial-scale=1。

  • <head> tag里面需要包含一个 <script async src="https://cdn.ampproject.org/v0.js"></script> 的tag。

  • 需要在<head>tag中包含<style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
    tag。

把AMP化之后和非AMP相应的页面捆绑起来

发布的时候需要，在非AMP的页面中使用<link rel="amphtml" href="https://www.example.com/url/to/amp/document.html">，而在AMP页面中使用<link rel="amphtml" href="https://www.example.com/url/to/amp/document.html"> 来把这个内容相同，但是只不过是对应AMP与否区别的两个页面捆绑起来。

其它注意点

一些tag需要使用AMP专用的形式。比如img tag需要改成 amp-img， 类似的还有video，audio，iframe等等。

另外一些event，class，id的名称也要注意。基本就是注意有些形式不能用。 比如其中带-amp-的id。比较重要的有一点，就是css只能用on page的 style tag来指定。

这些规则比较杂乱也不是本文重点，我们可以参考这里。

Hexo中引入AMP。

其实写一个支持AMP的模版是最传统的做法。当然，我们还可以使用这个插件。
其实我们发现，这个插件做的事情无非也就是另起炉灶搞一个模版，然后用这个模版渲染新的AMP的页面，然后把新老页面通过上面的link tag捆绑起来而已。

后话

AMP这个概念其实自从提出来一直不温不火，从官网的doc的中文翻译只翻译了标题就可以看出来。另外谷歌已经明确说过AMP对SEO并没有直接效果。至于是否有必要去趟水导入，那就请自己判断了。

Web AMP