自从这个词 万维网 是在1990年创造的吗, web应用程序开发已经从提供静态HTML页面发展到完全动态, 复杂的业务应用.

今天我们有成千上万的电子版和印刷版 资源 它们提供了开发各种不同web应用程序的分步指导. Development environments are “smart” enough to catch 和 fix many mistakes that early developers battled with regularly. T在这里 are even many different development platforms that easily turn simple static HTML pages into highly interactive applications.

所有这些发展模式, 实践, 平台有共同的基础, 和 they are all prone to similar web development issues caused by the very nature of web applications.

The purpose of these web development tips is to shed light on some of the common mistakes made in different stages of the web development process 和 to help you 成为一个更好的开发者. 我已经触及了几个对几乎所有人都很常见的一般话题 web开发人员 例如验证、安全性、可伸缩性等 搜索引擎优化. 当然，您不应该被我在本指南中描述的特定示例所束缚, 因为列出它们只是为了让您了解可能遇到的潜在问题.

常见错误No. 1:不完整输入验证

在客户端和服务器端验证用户输入非常简单 必做的事! 我们都知道这个明智的建议 “不相信用户输入” 但是，尽管如此，由验证引起的错误还是经常发生.

这种错误最常见的后果之一是 SQL注入 在 OWASP top10 年复一年.

Remember that most front-end development frameworks provide out-of-the-box validation rules that are incredibly simple to use. 另外, most major back-end development platforms use simple annotations to assure that submitted data are adhering to expected rules. 实现验证可能非常耗时, 但它应该是你标准编码实践的一部分，永远不要放在一边.

常见错误No. 2: 身份验证 Without Proper 授权

在我们继续之前，让我们确保我们在这两个术语上是一致的. 如《 10个最常见的网络安全漏洞:

身份验证: 验证一个人是(或至少看起来是)特定用户, 因为他/她已经正确地提供了他们的安全凭证(密码), 安全问题的答案, 指纹扫描, 等.).

授权: Confirming that a particular user has access to a specific resource or is granted permission to perform a particular action.

换一种说法, 身份验证就是知道实体是谁, 而授权是知道给定实体可以做什么.

让我用一个例子来说明这个问题:

Consider that your browser holds currently logged user information in an object similar to the following:

{
    用户名:“猫王”,
    角色:“歌手”,
    令牌:“123456789”
}

当修改密码时，应用程序进行POST操作:

POST / changepassword /用户名/:newpassword

在你的 / changepassword 方法，则验证用户是否已登录，并且 令牌未过期. 然后找到用户配置文件 :用户名 参数，并更改用户密码.

So, 您验证了您的用户已正确登录, 然后你执行了他的请求修改了他的密码. 过程看起来不错，对吧? 不幸的是，答案是否定的!

At this point it is important to verify that the user executing the action 和 the user whose password is changed are the same. 存储在浏览器上的任何信息都可以被篡改, 任何高级用户都可以轻松更新 用户名:“猫王” to 用户名:“管理员” 无需使用内置的浏览器工具.

在这种情况下，我们只是处理 身份验证 确保用户提供了安全凭证. 我们甚至可以添加验证 / changepassword 方法只能由 通过身份验证 用户. 但是，这仍然不足以保护您的用户免受恶意尝试.

您需要确保您验证了实际的请求者和请求的内容 / changepassword 正确的方法和实施 授权 确保用户只能更改她的数据.

身份验证 和 授权 是一枚硬币的两面吗. 永远不要把它们分开对待.

常见错误No. 3 .没有做好规模化的准备

在高速发展的今天, 创业加速器, 伟大的思想可以迅速传播到全球, having your MVP (minimum viable product) out in the market as soon as possible is a common goal for many companies.

然而, this constant time pressure is causing even good web development teams to often overlook certain issues. 扩展通常是团队认为理所当然的事情之一. MVP的概念很好，但如果太过了，你就会遇到严重的问题. 不幸的是, selecting a scalable 数据库 和 web server 和 separating all application layers on independent scalable servers is not enough. T在这里 are many details you need to think about if you wish to avoid rewriting significant parts of your application later - which becomes a major web development problem.

例如, 假设您选择将用户上传的个人资料图片直接存储在web服务器上. 这是一个完全有效的解决方案——应用程序可以快速访问文件, 文件处理方法在每个开发平台中都可用, 您甚至可以将这些图像作为静态内容提供, 这意味着应用程序的最小负载.

但是当应用程序增长时会发生什么呢, 你需要在负载均衡器后面使用两个或更多的web服务器? 即使您很好地扩展了数据库存储, 会话状态服务器, 网络服务器, 您的应用程序的可伸缩性会因为像配置文件映像这样简单的事情而失败. 因此, you need to implement some kind of file synchronization service (that will have a delay 和 will cause temporary 404 errors) or another workaround to assure that files are spread across your web servers.

What you needed to do to avoid the problem in the first place was just use shared file storage location, 数据库, 或任何其他远程存储解决方案. 这可能会花费几个小时的额外工作来实现它, 但这样做是值得的.

常见错误No. 4:错误或遗漏搜索引擎优化

网站上不正确或缺失搜索引擎优化最佳实践的根本原因是 被误导的搜索引擎优化专家.” Many web开发人员 believe that they know enough about 搜索引擎优化 和 that it is not especially complex, 但事实并非如此. 搜索引擎优化 mastery requires significant time spent researching best 实践 和 the ever-changing rules about how Google, 必应, 雅虎索引网络. 除非你不断地进行实验，并有准确的跟踪和分析, 你不是搜索引擎优化专家, 你也不应该自称是.

此外，搜索引擎优化往往被推迟作为一些活动，在最后完成. 这需要付出高昂的web开发代价. 搜索引擎优化不仅仅是设置好的内容, 标签, 关键字, 元数据, 图像Alt标签, 站点地图, 等. 它还包括消除重复内容, 具有可抓取的站点架构, 有效的加载时间, 智能反向链接, 等.

比如可扩展性, 你应该从开始构建web应用程序的那一刻起就考虑搜索引擎优化, or you might find that completing your 搜索引擎优化 implementation project means rewriting your whole system.

常见错误No. 5:请求处理程序中的时间或处理器消耗动作

这种错误的一个最好的例子是根据用户的操作发送电子邮件. 开发者常常认为制作一款 SMTP 直接从用户请求处理程序调用和发送消息是解决方案.

Let’s say you created an online book store, 和 you expect to start with a few hundred orders daily. As part of your order intake process, you send confirmation emails each time a user posts an order. 这将在一开始没有问题, 但是当你扩展系统时会发生什么呢, 然后你突然收到了成千上万封发来确认邮件的请求? 您要么获得SMTP连接超时, 配额超出了, or your application response time degrades significantly as it is now h和ling emails instead of 用户.

Any time or processor consuming action should be h和led by an external process while you release your HTTP requests as soon as possible. 在这种情况下, you should have an external mailing service that is picking up orders 和 sending notifications.

常见错误No. 6:没有优化带宽使用

大多数开发和测试都在本地网络环境中进行. 所以当你下载5张背景图片，每张都是3MB或更多, 在您的开发环境中，您可能无法识别1Gbit连接速度的问题. 但是当你的用户开始在他们的智能手机上通过3G连接加载一个15MB的主页时, 你应该准备好面对一系列的抱怨和问题.

优化带宽使用可以极大地提高性能, 为了获得这种提升，你可能只需要一些技巧. 许多优秀的web开发人员默认会做以下几件事:

1. 所有JavaScript的最小化
2. 所有CSS的缩小
3. 服务器端HTTP压缩
4. 优化图像大小和分辨率

常见错误No. 7 .未针对不同屏幕尺寸进行开发

响应设计 在过去的几年里一直是一个大话题. Expansion of smartphones with different screen resolutions has brought many new ways of accessing online content, 这也带来了许多web开发问题. 来自智能手机和平板电脑的网站访问量每天都在增长, 而且这一趋势正在加速.

以确保无缝导航和访问网站内容, 您必须允许用户从所有类型的设备访问它.

构建响应式web应用程序有许多模式和实践. 每个开发平台都有自己的技巧和窍门, 但是有一些框架是独立于平台的. 最流行的可能是 Twitter引导. 它是一个开源和免费的HTML, CSS, JavaScript框架已经被各大开发平台所采用. 在构建应用程序时，只需坚持Bootstrap模式和实践, 你会得到一个响应式的web应用程序，一点也不麻烦.

常见错误No. 8:跨浏览器不兼容

在大多数情况下，开发过程都面临着巨大的时间压力. Every application needs to be released as soon as possible 和 even good web开发人员 are often focused on delivering functionality over design. 尽管大多数开发人员都有Chrome浏览器, 火狐, 即安装, 他们在90%的时间里只使用其中一种. It is common practice to use one browser during development 和 just as the application nears completion will you start testing it in other browsers. This is perfectly reasonable–assuming you have a lot of time to test 和 fix issues that show up at this stage.

然而, t在这里 are some web development tips that can save you significant time when your application reaches the cross-browser testing phase:

1. You don’t need to test in all browsers during development; it is time consuming 和 ineffective. 然而，这并不意味着你不能频繁地切换浏览器. 每隔几天就换一个浏览器, 你至少会在开发阶段的早期发现主要问题.
2. 要小心使用统计数据来证明不支持浏览器的合理性. 有许多组织在采用新软件或升级方面进展缓慢. 在那里工作的成千上万的用户可能仍然需要访问您的应用程序, 由于内部安全和业务策略，他们无法安装最新的免费浏览器.
3. 避免特定于浏览器的代码. 在大多数情况下，存在跨浏览器兼容的优雅解决方案.

常见错误No. 9 .没有考虑可移植性

假设是一切问题之母! 当谈到可移植性时，这句话比以往任何时候都更加真实. 你在web开发中遇到过多少次像硬编码文件路径这样的问题, 数据库连接字符串, 或者假设某个库将在服务器上可用? Assuming that the production environment will match your local development computer is simply wrong.

理想的应用程序设置应该是免维护的:

1. Make sure that your application can scale 和 run on a load-balanced multiple server environment.
2. 允许简单和清晰的配置-可能在单个配置文件中.
3. 当web服务器配置不符合预期时，处理异常.

常见错误No. 10 . RESTful反模式

RESTful api已经在web开发中占据了一席之地，并将继续存在下去. 几乎每个web应用程序都实现了某种类型的REST服务, 无论是内部使用还是与外部系统集成. 但是我们仍然看到一些不符合预期实践的RESTful模式和服务.

最常犯的两个错误是 编写RESTful API 是:

1. 使用错误的HTTP动词. 例如，使用GET来写数据. HTTP GET被设计成幂等且安全的, 这意味着无论在同一资源上调用GET多少次, 响应应该始终是相同的，应用程序状态不应该发生变化.

2. 没有发送正确的HTTP状态码. 此错误的最佳示例是发送响应代码为200的错误消息.

    HTTP 200 ok
    {
        消息:“有一个错误”
    }
   

当请求没有产生错误时，您应该只发送HTTP 200ok. 在出现错误的情况下, 你应该发送400, 401, 500或与发生的错误相对应的任何其他状态码.

可以找到标准HTTP状态码的详细概述 在这里.

总结

网络 development is an extremely broad term that can legitimately encompass development of a website, web服务, 或者复杂的web应用程序.

The main takeaway of this web development guide is the reminder that you should always be careful about authentication 和 authorization, 计划可伸缩性, 和 never hastily assume anything - or be ready to deal with a long list of web development problems!