Category Archives: 网站开发

关于网站开发的一些文章

思科网络学院无法访问分析

这学期的网络课程要求用思科网络学院，然而并不能打开。好吧，抱着一探究竟的态度先去看一下吧。虽然直接ss可破，不过还是看一下GFW到底做了什么手脚吧。

首先访问主页，发现页面加载不出来，直到超时之后发现前端模板引擎没有解析。额，模板引擎竟然放在客户端来做，这个真的很少见。F12看一下资源加载情况，发现来自cloudfront.com的全部资源都无法访问。这明显是被墙了。什么都不说，先PING一下吧。


C:\Users\manageryzy>ping 204.246.164.217

正在 Ping 204.246.164.217 具有 32 字节的数据:
来自 204.246.164.217 的回复: 字节=32 时间=100ms TTL=47
来自 204.246.164.217 的回复: 字节=32 时间=106ms TTL=47
来自 204.246.164.217 的回复: 字节=32 时间=96ms TTL=47
来自 204.246.164.217 的回复: 字节=32 时间=88ms TTL=47

204.246.164.217 的 Ping 统计信息:
数据包: 已发送 = 4，已接收 = 4，丢失 = 0 (0% 丢失)，
往返行程的估计时间(以毫秒为单位):
最短 = 88ms，最长 = 106ms，平均 = 97ms

ICMP是通的，至少IP层应该是通的。然后追踪一下路由吧：


C:\Users\manageryzy>tracert 204.246.164.217

通过最多 30 个跃点跟踪
到 server-204-246-164-217.sin2.r.cloudfront.net [204.246.164.217] 的路由:

1 5 ms 1 ms 2 ms 192.168.1.1
2 6 ms 2 ms 3 ms 180.201.128.1
3 3 ms 2 ms 2 ms 172.16.0.25
4 5 ms 3 ms 1 ms 172.16.0.1
5 21 ms 14 ms 15 ms 219.147.0.1
6 7 ms 9 ms 17 ms 222.173.65.53
7 24 ms 15 ms 22 ms 60.235.16.97
8 24 ms 21 ms 18 ms 202.97.40.197
9 * * * 请求超时。
10 27 ms 35 ms 35 ms 202.97.91.6
11 59 ms 74 ms 70 ms 202.97.61.58
12 52 ms 52 ms 48 ms 202.97.121.98
13 136 ms 138 ms 138 ms TenGE8-5.br02.sin02.pccwbtn.net [63.218.228.154]

14 130 ms 132 ms 131 ms TenGE8-5.br02.sin02.pccwbtn.net [63.218.228.154]

15 123 ms 111 ms 114 ms 63-218-107-42.static.pccwglobal.net [63.218.107.
42]
16 97 ms 96 ms 98 ms 54.239.41.48
17 93 ms 94 ms 92 ms 203.83.223.83
18 * * * 请求超时。
19 * * * 请求超时。
20 * * * 请求超时。
21 117 ms 104 ms 103 ms server-204-246-164-217.sin2.r.cloudfront.net [20
4.246.164.217]

跟踪完成。

嗯，有点奇怪。一开始走的教育网的内网之后到了电信的骨干网。然后走的大概是中国电信的中美海底光缆。然后，WTF！地址怎么跑道新加坡了。以前电信的网抽的时候国内的包也跑道新加坡了。不过这个先不管，有可能是IP地址数据没更新。然后紧接着三个超时之后到达目标。这样来看应该没什么问题，至少IP层面上是通的。那就上WireShark抓包吧。

wireshark_思科

惊了，这重传。这是TLS被GFW干扰之后直接IP丢包。没有任何办法，只能让他丢个开心喽。

visual studio code快捷键

怎么说呢，好久没有写博客，最近发现visual studio code真的实在是太好用了，就来按照官方的总结一下快捷键啦

这里的快捷键都是IBM PC的啦，至于Mac用户自己寻找好了。我会在下面把我认为比较常用的用粗体标示出来。比较鸡肋的用删除线标示出来。

本文章汇编自visual studio code的官方文档

基础使用

打开/关闭窗口左侧的边栏：Ctrl + B

增加一栏打开的文件窗口：Ctrl + \

在新的一栏里面打开文件：Ctrl + Enter （这个需要在左面的文件栏选择好文件，比较鸡肋）

通过名称搜索打开文件：Ctrl + P

保存文件：Ctrl + S （BTW，保存文件不是Ctrl + S的异端都要灭亡！）

自动保存文件：Ctrl + Shift + P （不是很喜欢idea的那种模式）

在目录下文件中全文搜索： Ctrl + Shift + F 

高级版的上一个功能： Ctrl + Shift + J

对编辑器输入命令：Ctrl + Shift + P （就当这个是vi的冒号的模式好了）

在最近打开的文件中切换：Ctrl + Tab

查找并且导航到符号：Ctrl + Shift + O

文件编辑窗口导航：Alt + ← 或者 Alt + → （这个倒是和idea很像）也可以通过 Ctrl + 数字键 导航

文件编辑

跳转到匹配的括号：Ctrl + Shift + ]

多行选择：Alt + Click （鼠标左键） 或者 Ctrl + Alt + ↑ 或 Ctrl + Alt + ↓

选择全部和当前光标所在的标识符同名的标识符：Ctrl + Shift + L 或者 Ctrl + F2 （代码重构反混淆神器）

代码提示：Ctrl + Space（比起idea那么多代码提示的快捷键好多了，嗯，可是为什么我要黑idea呢）

查看定义：F12 或者 Ctrl+ Click

转到定义：Ctrl + Alt + Click

查找符号：Ctrl + T

查找引用：Shift + F12 或 Alt + F12

重命名符号：F2

查看所有错误：Ctrl + Shift + M

Microsoft Azure Dreamspark试玩

几个月之前微软宣布Azure在Dreamspark上免费了，抱着试试看的态度几个月之前就打算弄一个玩玩。不过由于中国的特殊情况，中国地区的Azure是由世纪互联运营，但是世纪互联并不认Dreamspark的活动，于是需要一个其他地区的手机号用来验证账户。

网络上有一些虚拟电话号码用来接收短信，不过由于他们大多是VOIP号码被微软禁止使用，所以我一狠心花了三十大洋买了一个香港的手机卡。

注册账号这个没什么说的。去Dreamspark网站一进去就能看到Azure了，激活账号的时候验证手机号，Dreamspark注册Azure不需要信用卡，否则还要信用卡进行验证。注册完账号之后微软要求等几分钟。大概等待了两分半中后账号就绪了。这个时候可以通过访问https://portal.azure.com/ 进入后台。

QQ图片20150502020340

进后台的过程由于网速原因简直就是煎熬。我花了整整十分钟才进入。

QQ图片20150502020340

费半天劲终于成功的进入了主面板。各种操作由于网速的原因……不说了，说多了都是泪

下面看一下Azure Dreamspark提供的免费服务。Dreamspark版本的Azure相当多的内容都不能用，能用的只有最低配置的Web程序以及数据库。大概和烂大街的免费主机是一个水平的。网速上Azure也没有明显的优势。这可能和我选择的节点有关吧，我选择的是日本西部地区可能速度不如亚洲南部地区。总之Azure Dreamspark版本是相当坑爹的东西啦

Microsoft Visual Studio Code Linux上手试玩

在微软2015 build大会上微软推出了最新的跨平台的代码编辑器：Visual Studio Code。这个编辑器可以在Windows、Linux、OS X上运行。

QC)EJ@XDD0KYQ_GAHXAAT5Q

访问visual studio的网站马上就能看到这个的下载页面，下载linux版之后会得到一个zip包（不是tar.gz差评）。解压缩之后能看到一个叫做code的文件，文件已经默认有了执行权限，在ubuntu下面只要双击就可以运行。

虽然说visual studio code是一个编辑器，但是它还是很好的继承了visual studio的一大特色——慢。不过还好只是启动比较慢。运行的速度不是很慢。这可能是由于我的ubuntu分区不是在SSD上的原因吧。启动软件花了我十多秒，并且一开始的时候没有任何提示。这让我以为我没有启动成功。

编辑器的界面总体上讲非常的清爽，没有一坨坨的按钮，只有必要的编辑、浏览、git和调试。

QQ图片20150502020340

怎么说呢，这个界面觉得好像IE的F12的……

使用起来的话初学者可能有一点比较麻烦，这里没有一个个的先导。系统会默认的把项目的配置文件生成并且存在.setting目录下面。项目的配置以及启动配置都是json文件。虽然有英文的说明，但是你不得不把这些全都读一遍。（真是满满的linux的感觉，雾）

编辑器支持许多web开发技术：从nodejs到sass，基本囊括了所有前端后端的最热门的web新技术，代码提示也很好用，而且在没有reshape的时候代码提示就已经能用了（黑vs黑的丧心病狂），但是，他只能开发web，只能开发web，只能开发web（因为很重要，所以要说三遍，但愿不要被微软光速打脸）

总之有时间那它撸个nodejs的项目玩玩好了，刚上手的感觉还算是不错

typecho用户个性签名插件

好久没有更新博客了。最近忙成狗了。随便开源一下我写的代码啦。

 

项目主页：https://github.com/hmoe/typechoSignPlugin

 

typecho 用户个性签名插件

安装方法：

在插件目录下面建立UserSign文件夹，把Plugin.php复制进去

注意：由于typecho的问题，插件的用户配置在读取的时候会自动读取在配置表里面的插件数据。如果要让用户的设置正常运行请修改 ‘/var/Widget/Users/Profile.php’。修改下面这个函数。不修改的话用户的个人页面里面显示用户的当前签名


    /**
     * 输出自定义设置选项
     *
     * @access public
     * @param string $pluginName 插件名称
     * @param string $className 类名称
     * @param string $pluginFileName 插件文件名
     * @param string $group 用户组
     * @return Typecho_Widget_Helper_Form
     */
    public function personalForm($pluginName, $className, $pluginFileName, &$group)
    {
        /** 构建表格 */
        $form = new Typecho_Widget_Helper_Form($this->security->getIndex('/action/users-profile'),
        Typecho_Widget_Helper_Form::POST_METHOD);
        $form->setAttribute('name', $pluginName);
        $form->setAttribute('id', $pluginName);

        require_once $pluginFileName;
        $group = call_user_func(array($className, 'personalConfig'), $form);
        $group = $group ? $group : 'subscriber';

        $options = $this->options->personalPlugin($pluginName);

        if (!empty($options)) {
            foreach ($options as $key => $val) {
				if(!isset($form->getInput($key)->value))
					$form->getInput($key)->value($val);
            }
        }

        $form->addItem(new Typecho_Widget_Helper_Form_Element_Hidden('do', NULL, 'personal'));
        $form->addItem(new Typecho_Widget_Helper_Form_Element_Hidden('plugin', NULL, $pluginName));
		
		$submit = new Typecho_Widget_Helper_Form_Element_Submit(NULL, NULL, _t('保存设置'));
		$submit->input->setAttribute('class', 'btn primary');
        $form->addItem($submit);
		
        return $form;
    }

使用方法

由于已经在users表里面插入了userSign这个字段了，这个字段会自动的被系统读取。只需要在需要的地方输出$user->userSign就可以了

waf绕过-奇淫技巧

传统的waf都有一些比较常见的绕过技巧，最近在网上看到了绕过百度云CDN的攻击拦截的方式……果然是奇淫技巧，故拿出来分享一下。此方法百度云CDN、360网站卫士等均有可能适用

使用百度云CDN等的网站多半是只有一个VPS的小站，而一个网站往往拥有若干域名，于是就可以通过域名解析的方式查看有没有直接解析的子域名。我经手的网站里面就有两个网站有这种问题。一旦发现了真实的ip之后就可以添加真实ip到host文件之后使用扫描器之类的工具进行攻击啦。

Mediawiki清除全部缓存

（果然百度是不收录https的站点呢，我的wiki百度完全不收录呢QAQ

最近建立了minecraft中文开发wiki虽然没有被百度收录，我倒是练习了不少mediawiki的使用，在使用mediawiki的时候如果你开启了缓存，如果你修改了一个模板页面，引用了模板的页面的内容不会立刻改变。为了更新页面的内容，你不得不手动清除缓存。

清除缓存的最简单的方法就是添加purge参数，但是这样一次只能清除一个页面

google一下发现还专门有清除缓存的插件……果然这是个棘手的问题呢。后来我竟然在百度中找到了一个暴力的解决方案：直接清空缓存的数据库！！！亲测有效，简单暴力

现代浏览器js跨域

js跨域一直是一个让人头疼的问题不过现代浏览器有一种针对API的解决方案就是Access-Control-Allow-Headers。

你可以通过Access-Control-Allow-Headers来控制允许哪些域的js来访问此资源。不过这中方法只是一个折中的方案，如果说使用起来还不如普通的跨域好用。并且ie11以下浏览器并不支持。

不过对于那些开放的API最好还是加上这个头。

nginx可以通过下面的一行来加上这个头，不过域名最好还是限定一下。
add_header Access-Control-Allow-Origin *;

通过iframe引用b站站内播放器

b站的站外播放器不是一般的难用，如果想要在自己的网站之类的嵌入b站的视频，人们通常会想要使用站内播放器，然而由于b站的swf有根据域名进行判断的功能，所以正常情况下很难嵌入站内播放器。
在以前的时候b站的播放器是在一个iframe里面，可以通过那个iframe来直接调用站内播放器，但是在上个月b站用户中心改版之后这个接口就被堵上了。于是只能依靠其他方法来欺骗swf的域名的检测了。
很自然的就会想到用iframe加载swf可不可以，经过查找，确实有这么个api，但是服务器会根据浏览器的信息进行判断，如果是站外的话就会返回空页面。现在破解的思路就很明确了：去掉客户端refer信息并且访问这个页面。
我曾经尝试了使用https，但是由于目标域名也是https所以无效。最终想到了下面的解决方案：

  • 建立一个新的html页面，作为iframe的页面使用
  • 在主页里面添加一个iframe，并且设置宽度和高度
  • 在建立的html页面里面添加一个超链接

下面放一个示例页面（附送acfun的站外播放




    
    


    去b看
    去a看