Nocti

Nocti 查看完整档案

填写现居城市  |  填写毕业院校  |  填写所在公司/组织填写个人主网站
编辑

大学生,以前端为方向的web全栈初学者

个人动态

Nocti 赞了文章 · 2016-07-26

你所不知道 ❌ URL

你所不知道的 URL

0.说明

第一幕

产品大叔有用户反映账户不能绑定公众号。
大叔:啊咧咧?怎么可能,我看看?
大叔:恩?这也没问题啊,魏虾米。
大叔:还是没问题啊,挖叉类。
大叔:T T,话说产品姐姐是不是Java提供接口的时候,没有对URL进行encodeURI
产品:啊咧咧?我问问看?

第二幕

大叔小二你给我过来!
小二:啊咧咧?怎么了大叔
大叔:知道在URL中的+有时候会变成什么吗?
小二:啊咧咧?不是+吗?
大叔:知道在URL中的空格有时候会变成什么吗?
小二:啊咧咧?不是空格吗?
大叔:还不赶快自己去查查看!别也成了挖坑型选手。

1.杀手兄弟 - 加号与空格

0.说明

维基百科中关于百分号编码中有段说明。

当HTML表单中的数据被提交时,表单的域名与值被编码并通过HTTP的GET或者POST方法甚至更古远的email把请求发送给服务器。这里的编码方法采用了一个非常早期的通用的URI百分号编码方法,并且有很多小的修改如新行规范化以及把空格符的编码"%20"替换为"+" . 按这套方法编码的数据的MIME类型是application/x-www-form-urlencoded, 当前仍用于(虽然非常过时了)HTML与XForms规范中. 此外,CGI规范包括了web服务器如何解码这类数据、利用这类数据的内容。

1.GET - 简单的在浏览器中测试

URL带有加号

在浏览器里输入URLhttps://www.baidu.com/s?wd=小二+大叔,这时候百度搜索框中出现的是小二 大叔搜索框+神奇的变成了空格

URL带有空格

在浏览器里输入URLhttps://www.baidu.com/s?wd=小二 大叔,这时候百度搜索框中出现的是小二 大叔URL空格的变成%20

URL带有%2B

在浏览器里输入URLhttps://www.baidu.com/s?wd=小二%2B大叔,这时候百度搜索框中出现的是小二+大叔搜索框%2B的变成+

2.POST - 简单的PHP测试

代码
<?php
echo $_POST['word'];
POSTMAN 发送请求
POST /1.php HTTP/1.1
Host: 127.0.0.1
Cache-Control: no-cache
Postman-Token: fed5740c-aceb-0f57-edc9-cf42a275b35a
Content-Type: application/x-www-form-urlencoded

word=%2B%2B%2B+%2B%2B%2B
输出
+++ +++

2.孕妇 - URL中的URL

0.说明

在社交登录或微信公众号等时候,我们常常会在URL中使用到回调地址来处理验证成功后的页面跳转。

例如:

  • 回调地址为:lionis.taroball.com?username=lionis&sex=man
  • 这时候在URL中附加回调信息时
  • 地址变为www.xxx.com?redirect=lionis.taroball.com?username=lionis&sex=man

这个时候尴尬的问题出现了,sex=man在这个时候变成了www.xxx.com的参数了,而不是lionis.taroball.com的参数了。

这个时候就需要对回调信息进行encodeURL

2.代码

<?php
// 文件名为test.php
echo $_GET['redirect'];

3.有 encodeURL

URL
localhost/test.php?redirect=lionis.taroball.com%3Fusername%3Dlionis%26sex%3Dman
输出
lionis.taroball.com?username=lionis&sex=man

4.无 encodeURL

URL
localhost/test.php?redirect=lionis.taroball.com?username=lionis&sex=man
输出
lionis.taroball.com?username=lionis

3.结论

GET

  • 如果想在URL中使用+需要对URL进行encodeURL,把+编码成%2B
  • 在服务端渲染页面的时候,对URL需要encodeURL
  • 在客户端发送请求的时候,javascript需要使用正则来进行替换
  • 在服务端接受参数的时候,对关键字使用decodeURL
  • 对于URL中的URL也需要进行encodeURL

POST

  • POSTContent-Type默认是application/x-www-form-urlencoded,顾名思义对URL进行了encodeURL
  • 想要了解更多有关POST可以看我之前写的你所不知道的POST

一起成长

在困惑的城市里总少不了并肩同行的 伙伴 让我们一起成长。
  • 如果您想让更多人看到文章可以点个 点赞
  • 如果您想激励小二可以到 Github 给个 小星星
  • 如果您想与小二更多交流添加微信 m353839115

微信公众号

本文原稿来自 PushMeTop
查看原文

赞 9 收藏 21 评论 0

Nocti 赞了回答 · 2016-02-05

解决服务器小白求教一台 Ubuntu 网站服务器完整的部署流程是怎样的?

配一台 Web 服务器这个问题太泛了,要知道每一门语言都可以提供 Web 服务,Web 容器的种类也十分繁多。
这里只讲一些最基本的事项吧。

Q:那么到底如何开始学习配置一台 Web 服务器?
A:你首先需要知道用户访问Web服务所经过的流程,逐个击破。

0x01 了解 Web 请求流程

1.用户打开浏览器后输入网址,并回车。
2.浏览器开始查询网址的DNS纪录,并对查询到的纪录发起请求。(购买域名/DNS记录都是什么/配置域名的DNS)
3.服务器的Web容器(如Nginx/Apache等)接收到请求,并根据浏览器发送过来的HTTP头开始工作。(HTTP头/常见Web容器/如何配置这些Web容器和后端程序协同工作)(注:Web容器不是必须存在的,但却是最常见的处理Web请求的流程的一部分)
4.后端处理收到的请求
5.Web容器从后端程序获得最终的结果,并将结果和HTTP回复头一起返回给浏览器
6.浏览器展示结果

基本流程说完了,看看有哪些自己概念模糊甚至完全不懂的地方,搜索一下,弄清楚之后继续向下看。

0x02 服务器部署

1.熟知常用指令,至少日常操作服务器不要把大量时间用在查基本指令怎么用上,打击自己的积极性。
2.创建一个自己的低权限账户,不要通过ssh直接登录root账户操作,对于防止自己误操作,提升安全性都有帮助。
3.学会使用包管理器,就是用来安装软件的那个指令。CentOS/RedHat是yum,Debian/Ubuntu是apt-get
4.开始安装你阅读了 0x01 之后你觉得需要安装的东西...
5.使用包管理器找不到的软件,或者版本不如意的软件,学会下载源代码,编译,安装到指定目录。

另外:搞清楚 $ ls -lhta 列出目录/文件后,前面的那些东西的意义。

比如:drrwxrwxr-x  1 lakechan lakechan 322K Jan 28 09:10 233333

部署完之后,你现在应该能够跑起来服务了,并且能够访问你的页面了,但是在上线之前,看看下面的基本安全常识。

0x03 基本安全常识

  • 部署安全

系统:禁止ssh的root账户登录,创建一个自己的低权限账户平日管理服务器使用,使用sudo或者su到root账户来进行提升权限的操作;所有账户使用强密码,或者仅允许使用publickey通过ssh登录;系统内核常升级
Web容器:常升级
仅对于PHP:禁用eval的使用
Mysql:如无需要,关闭所有账户的远程登录;不要让程序使用root账户连接数据库,尽量细化账户权限分配;账户不要使用太弱的密码
代码部署:如果你选择使用git/svn等版本管理系统来部署和更新代码,禁止用户访问.git/.svn这些用户不该访问的目录;不要让Web容器跟随软链接;对各个文件和目录(包括Web程序的根目录)的 权限/所有者 的配置,遵循最小化原则;不要偷懒
其他:默认的东西统统不要留,比如apache的server-status,phpMyAdmin的目录名称起一个复杂一点的,至少不要用pma,pma123这种随手猜的名字。

  • 程序安全

警惕一切用户提供给你的数据,预防sql注入,文件上传,xss,csrf等攻击

安全方面配置到这里,基本能挡住大多数的ScriptKid了

0x04 最重要的

打了这么多字累死我了,好歹给个赞吧?

关注 34 回答 11

Nocti 赞了回答 · 2016-02-01

解决css中能用padding实现的效果尽量不用margin去实现,这是为什么

老师说出错少,然后不说原因?我猜大概是:

  • 相邻的 margin 存在重叠问题,如果能用 padding 实现,那重叠通常会是未预期的副作用;

  • 如果存在 box-sizing: border-box; 那么 padding 通常无需设计人员额外计算对整体尺寸的影响,而 margin 需要。

关注 8 回答 5

Nocti 回答了问题 · 2016-02-01

解决读取图片文件,将获得的Buffer转换成String,再把String转Buffer写入到新图片文件,新图片文件无法正常显示

在评论区犯了个蠢之后自己去测试了一下。代码和部分输出结果如下:

var fs = require('fs');
var l = console.log;
var bf = fs.readFileSync('./headicon.png');
l(bf);
// <Buffer 89 50 4e 47 0d 0a ... >
var str = bf.toString();
l(str);
// 控制台输出大量乱码天书QAQ
var cp = new Buffer(str);
l(cp);
// <Buffer ef bf bd 50 4e 47 ... >
fs.writeFileSync('./hah.png', bf);

直接输出获取到的bf的话结果肯定是对的,但是toString之后就不行了。
我又这样试了一下:

var fs = require('fs');
var l = console.log;
var bf = fs.readFileSync('./headicon.png');
l(bf);
var str = bf.toString();
var cp = new Buffer(str);
l(cp);
fs.writeFileSync('./hah.png', bf);
fs.writeFileSync('./hah2.png', str);
fs.writeFileSync('./hah3.png', cp);
fs.writeFileSync('./hah.txt', bf);
fs.writeFileSync('./hah2.txt', str);
fs.writeFileSync('./hah3.txt', cp);

分别写出6个文件。
hah.png是可以正常访问的图片,图片信息PNG 图像-26 KB
hah2.png不可以正常访问,预览会报错,图片信息PNG 图像-47 KB
hah3.png同hah2.png;
hah.txt同样是26kb大小的文件,放到sublime里面,显示的结果如下:
clipboard.png
hah2.txt大小47kb,sublime显示结果不用截图也可想而知,是efbf bd50 ...这些东西。
hah3.txt同hah2.txt。

然后问题在于,Buffer对象进行toString的时候发生了什么变化?
于是我换了一张12*12大小、体积为225B的图片,用以上的代码重新测试,测试结果:
hah.png是可以正常访问的图片,图片信息PNG-225 字节
hah2.png不可以正常访问,预览会报错,图片信息PNG-383 字节
hah3.png同hah2.png;
对比hah.txt与hah2.txt,结果如下:
clipboard.png
可能你已经发现区别了……我们调整一下格式:
clipboard.png
这也就是说图片的Buffer在进行toString()的时候,图片的数据信息因为种种原因发生了一些异变,同样的测试下,文本文件并不会造成这种问题。将生成的hah2.png重新进行了处理,用到以下代码(接上面的代码):

var bf2 = fs.readFileSync('./hah2.png');
var str2 = bf.toString();
var cp2 = new Buffer(str2);
fs.writeFileSync('./hah4.png', cp2);

这样输出得到的hah4.png的图片信息是PNG-383 字节,跟hah3.png的是完全相同的。
暂时得到了这样的结论,具体的体积为什么变大了还在测试,如果有结果会回来更新的QAQ;

嘛基本上已经有答案了,详见题主修改后的题目~

关注 3 回答 1

Nocti 回答了问题 · 2016-01-31

解决如何在html页面动态生成图片然后分享至微博?

首先,Get请求是把数据放置到了URL里面,那么浏览器对于URL的长度本身是有个限制的(不同浏览器在这个长度上大同小异),导致服务器反馈给你一个400(服务器无法理解该请求)。
个人对于这个问题的解决思路是,创建一个服务后端,通过AJAX技术,将生成出来的图片上传到服务器上储存为静态文件(文件名什么的可以根据时间啊、用户名啊之类的进行区分),然后将服务器上的图片地址作为POST请求的返回值,用一个json返回回来。
我刚刚简单看了一下新浪微博的分享接口,如果我没看错的话,分享图片是可以直接放置图片的URL的,题主可以研究一下这个思路的可行性。

关注 4 回答 1

Nocti 回答了问题 · 2016-01-31

HTML5开发 video标签 设置视频自动播放(安卓中)

参考楼上的回答,有一种特殊的操作想法。
click事件绑定后,可以通过DOM对象上的click()方法手动触发,题主可以尝试这种黑科技。
另外,个人觉得 onload 要比 ready 靠谱一些。
以下是chrome下的实际测试代码和输出:

var foo = document.getElementById("wrapper")
// undefined
foo
// <div id=​"wrapper">​…​</div>​
foo.onclick = function(){console.log(1);}

foo.click
// click() { [native code] }
foo.click()
// 1

关注 4 回答 2

认证与成就

  • 获得 2 次点赞
  • 获得 1 枚徽章 获得 0 枚金徽章, 获得 0 枚银徽章, 获得 1 枚铜徽章

擅长技能
编辑

(゚∀゚ )
暂时没有

开源项目 & 著作
编辑

(゚∀゚ )
暂时没有

注册于 2015-12-13
个人主页被 72 人浏览