网站开发注意事项上篇

原文名：What technical details should a programmer of a web application
consider before making the site public?
原文地址：https://softwareengineering.stackexchange.com/questions/46716/what-technical-details-should-a-programmer-of-a-web-application-consider-before#

Interface and User Experience(界面用户与体验)

1.Be aware that browsers implement standards inconsistently and make
sure your site works reasonably well across all major browsers. At a
minimum test against a recent Gecko engine (Firefox), a WebKit engine
(Safari and some mobile browsers), Chrome, your supported IE browsers
(take advantage of the Application Compatibility VPC Images), and
Opera. Also consider how browsers render your site in different
operating systems.

意译：了解主流浏览器执行web标准的情况，保证你的站点可以在主流浏览器上正常运行。你至少要测试以下引擎：Gecko（用于Firefox）、Webkit（用于Safari、Chrome和一些手机浏览器）、IE和Opera。同时，不同的操作系统，可能也会影响浏览器对站点的呈现。

2.Consider how people might use the site other than from the major browsers: cell phones, screen readers and search engines, for example. — Some accessibility info: WAI and Section508, Mobile development: MobiForge.

意译：除了浏览器，网站还有其他使用方式：手机、屏幕朗读器、搜索引擎等等。你应该知道在这些情况下，你的网站的运行状况。MobiForge提供了手机网站开发的一些相关知识。

3.Staging: How to deploy updates without affecting your users. Have one or more test or staging environments available to implement changes to architecture, code or sweeping content and ensure that they can be deployed in a controlled way without breaking anything. Have an automated way of then deploying approved changes to the live site. This is most effectively implemented in conjunction with the use of a version control system (git, Subversion, etc.) and an automated build mechanism (Ant, NAnt, etc.).

意译： 知道如何在基本不影响用户使用的情况下升级网站。通常来说，你必须有版本控制系统（CVS、Subversion、Git等等）和数据备份机制（backup）。

4.Don’t display unfriendly errors directly to the user.

意译： 不要让用户看到那些不友好的出错提示。

5.Don’t put users’ email addresses in plain text as they will get spammed to death

意译：不要直接显示用户的Email地址，至少不要用纯文本显示。

6.Add the attribute rel=”nofollow” to user-generated links to avoid spam.

意译：添加 rel=”nofollow” 属性给用户生成的链接以避免产生垃圾邮件。

7.Build well-considered limits into your site - This also belongs under Security.

意译：为你的站点设置一些合理使用的限制。一旦超过门阀值就停止服务（这也与网站安全有关）。

8.Learn how to do progressive enhancement.

意译：知道如何实现网页的渐进式增强（progressive enhancement）。

9.Redirect after a POST if that POST was successful, to prevent a refresh from submitting again.

意译： 用户发出POST请求成功后，总是将其重导向（redirect）至另外一个网页。

10.Don’t forget to take accessibility into account. It’s always a good idea and in- certain circumstances it’s a legal requirement. WAI-ARIA and WCAG 2 are good resources in this area.

意译：
不要忘记网站的可访问性（accessibility，即残疾人如何使用网站）。对于美国网站来说，有时这是法定要求。WAI-ARIA有一些这方面很好的参考资料。

11.Don’t make me think

意译：不要让用户思考，软件傻瓜化。

---

Security（安全性）

1.It’s a lot to digest but the OWASP development guide covers Web Site
security from top to bottom.

意译：阅读《OWASP开发指南》，它提供了全面的网站安全指导。
2.Know about Injection especially SQL injection and how to prevent it.

意译：了解SQL注入（SQL injection）及其预防方法。

3.Never trust user input, nor anything else that comes in the request
(which includes cookies and hidden form field values!).

意译：永远不要信任用户提交的数据（cookie也是用户端提交的！）。

4.Hash passwords using salt and use different salts for your rows to
prevent rainbow attacks. Use a slow hashing algorithm, such as bcrypt
(time tested) or scrypt (even stronger, but newer) (1, 2), for
storing passwords. (How To Safely Store A Password). The NIST also
approves of PBKDF2 to hash passwords”, and it’s FIPS approved in .NET
(more info here). Avoid using MD5 or SHA family directly.

意译：不要明文（plain-text）储存用户的密码，要hash处理后再储存。

5.Don’t try to come up with your own fancy authentication system. It’s
such an easy thing to get wrong in subtle and untestable ways and you
wouldn’t even know it until after you’re hacked.

意译：不要对你的用户认证系统太自信，它可能很容易就被攻破，而你事先根本没意识到存在相关漏洞。

6.Know the rules for processing credit cards. (See this question as
well) Use SSL/HTTPS for login and any pages where sensitive data is
entered (like credit card info).

意译： 了解如何处理信用卡。在登录页面及其他处理敏感信息的页面，使用SSL/HTTPS。

7.Prevent session hijacking.

意译：知道如何对付session劫持（session hijacking）。

8.Avoid cross site scripting (XSS).

意译： 避免”跨站点执行”（cross site scripting，XSS）。

9.Avoid cross site request forgeries (CSRF).

意译：避免”跨域伪造请求”（cross site request forgeries，XSRF）。

10.Avoid Clickjacking.

意译：避免站点劫持。

11.Keep your system(s) up to date with the latest patches.

意译：及时打上补丁，让你的系统始终跟上最新版本。

12.Make sure your database connection information is secured.

意译：确认你的数据库连接信息的安全性（尽可能避免明文存储相关信息）。

13.Keep yourself informed about the latest attack techniques and
vulnerabilities affecting your platform.

意译：跟踪攻击技术的最新发展，以及你使用的平台的最新安全漏洞。

14.Read The Google Browser Security Handbook.

意译：阅读Google的《浏览器安全手册》（Browser Security Handbook）。

15.Read The Web Application Hacker’s Handbook.

意译：阅读《网络软件的黑客手册》（The Web Application Hackers Handbook）。

16.Consider The principle of least privilege. Try to run your app server
as non-root. (tomcat example)

意译：考虑最低权限的原则。尝试以非root方式运行您的应用服务器。（tomcat示例）

17.Put rel=”noopener noreferrer” on all user-provided links with
target=”_blank” to prevent JavaScript on the destination page from
redirecting your page to somewhere else, such as a fake login page.

意译：给所有用户提供的链接设置属性： rel=”noopener noreferrer”，同时设置属性
target=”_blank”以防止目标页面上的JavaScript将页面重定向到其他位置，例如假登录页面。

---

Performance（性能）

1.Implement caching if necessary, understand and use HTTP caching
properly as well as HTML5 Manifest.

意译：只要有可能，就使用缓存（caching）。正确理解和使用HTTP caching与HTML5离线储存。

2.Optimize images - don’t use a 20 KB image for a repeating background.
Learn how to gzip/deflate content (deflate is better).

意译： 优化图片。不要把一个20KB的图片文件，作为重复出现的网页背景图案。

3.Combine/concatenate multiple stylesheets or multiple script files to
reduce number of browser connections and improve gzip ability to
compress duplications between files.

意译：将多个样式表文件或脚本文件，合为一个文件，这样可以减少浏览器的http请求数，以及减小gzip压缩后的文件总体积。

4.Take a look at the Yahoo Exceptional Performance site, lots of great
guidelines, including improving front-end performance and their YSlow
tool (requires Firefox, Safari, Chrome or Opera). Also, Google page
speed (use with browser extension) is another tool for performance
profiling, and it optimizes your images too.

意译：浏览Yahoo的Exceptional
Performance网站，里面有大量提升前端性能的优秀建议，还有他们的YSlow工具。Google的page speed则是另一个用来分析网页性能的工具。两者都要求安装Firebug。

5.Use CSS Image Sprites for small related images like toolbars (see the
“minimize HTTP requests” point)

意译：如果你的网页用到大量的小体积图片（比如工具栏），就应该使用CSS Image Sprite，目的是减少http请求数。
6.Busy web sites should consider splitting components across domains.
Specifically…
意译：大流量的网站应该考虑将网页对象分散在多个域名（split components across domains）。

7.Static content (i.e. images, CSS, JavaScript, and generally content
that doesn’t need access to cookies) should go in a separate domain
that does not use cookies, because all cookies for a domain and its
subdomains are sent with every request to the domain and its
subdomains. One good option here is to use a Content Delivery Network
(CDN), but consider the case where that CDN may fail by including
alternative CDNs, or local copies that can be served instead.

意译：静态内容（比如图片、CSS、JavaScript、以及其他cookie无关的网页内容）都应该放在一个不需要使用cookie的独立域名之上。因为域名之下如果有cookie，那么客户端向该域名发出的每次http请求，都会附上cookie内容。这里的一个好方法就是使用”内容分发网络”（Content
8.Delivery Network，CDN）。

• Minimize the total number of HTTP requests required for a browser to
  render the page.

意译： 将浏览器完成网页渲染所需要的http请求数最小化。

9.Utilize Google Closure Compiler for JavaScript and other minification
tools. Choose a template engine and render/pre-compile it using
task-runners like gulp or grunt.

意译：使用Google的Closure Compiler压缩JavaScript文件，YUI Compressor亦可。

10.Make sure there’s a favicon.ico file in the root of the site, i.e./favicon.ico. Browsers will automatically request it, even if the icon isn’t mentioned in the HTML at all. If you don’t have a /favicon.ico, this will result in a lot of 404s, draining your server’s bandwidth.

意译：确保网站根目录下有favicon.ico文件，因为即使网页中根本不包括这个文件，浏览器也会自动发出对它的请求。所以如果这个文件不存在，就会产生大量的404错误，消耗光你的服务器的带宽。

---