IMWeb提升营Day5

2017.5.28

今日早报

• GMTC2017全球移动技术大会，为期两天，面向移动开发、前端、AI技术人员。
• 阿尔法狗团队在3：0胜利后宣布“阿尔法狗”退役，50份自我对战棋谱留给人类。AlphaGo之父、DeepMind创始人戴密斯·哈撒比斯（Demis hassabis）
• 根据中文互联网数据中心CB Insights的报告，腾讯是亚洲科技初创公司中最活跃的企业投资者

前端常见题目

问题1: Ajax的优缺点都有什么？

• 介绍
  
  • AJAX全称为“Asynchronous JavaScript and XML”（异步JavaScript和XML），是一种创建交互式网页应用的网页开发技术。
• 原理
  
  • 相当于在用户和服务器之间加了—个中间层(AJAX引擎),使用户操作与服务器响应异步化。并不是所有的用户请求都提交给服务器,像—些数据验证和数据处理等都交给Ajax引擎自己来做, 只有确定需要从服务器读取新数据时再由Ajax引擎代为向服务器提交请求。
• 优点
  
  • 1）页面无刷新。用户体验非常好。
  • 2）使用异步方式与服务器通信。具有更加迅速的响应能力。
  • 3）前端和后端负载平衡。可以把一些服务器负担的工作转到客户端，利用客户端闲置的能力来处理，减轻服务器负担，节约空间和宽带租用成本。并且减轻服务器的负担，ajax的原则是“按需取数据”，可以最大程度的减少冗余请求和响应对服务器造成的负担。
  • 4）基于标准化并被广泛支持的技术，不需要下载插件或者小程序。
  • 5）界面与应用分离。Ajax使WEB中的界面与应用分离（也可以说是数据与呈现分离），有利于分工合作、减少非技术人员对页面的修改造成的WEB应用程序错误、提高效率、也更加适用于现在的发布系统。
• Ajax的缺点:
  
  • 1）Ajax不支持浏览器back按钮。在动态更新页面的情况下，用户无法回到前一个页面状态，因为浏览器仅能记忆历史记录中的静态页面。一个被完整读入的页面与一个已经被动态修改过的页面之间的差别非常微妙；用户通常会希望单击后退按钮能够取消他们的前一次操作，但是在Ajax应用程序中，这将无法实现。
  • 2）安全问题， Ajax暴露了与服务器交互的细节，Ajax技术就如同对企业数据建立了一个直接通道。这使得开发者在不经意间会暴露比以前更多的数据和服务器逻辑。
  • 3）对搜索引擎的支持比较弱。如果使用不当，AJAX会增大网络数据的流量，从而降低整个系统的性能。
  • 4）破坏了程序的异常机制。至少从目前看来，像Ajax.dll，Ajaxpro.dll这些Ajax框架是会破坏程序的异常机制的。关于这个问题，曾在开发过程中遇到过，但是查了一下网上几乎没有相关的介绍。
  • 5）不容易调试。分别采用Ajax和传统的form提交的模式来删除一条数据……给我们的调试带来了很大的困难
  • 6）客户端过肥，太多客户端代码造成开发上的成本。编写复杂、容易出错 ；冗余代码比较多（层层包含js文件是AJAX的通病，再加上以往的很多服务端代码现在放到了客户端）；破坏了Web的原有标准。

问题2: 简述一下Ajax的工作原理

• Ajax的核心是JavaScript对象XmlHttpRequest。该对象在Internet Explorer 5中首次引入，它是一种支持异步请求的技术。简而言之，XmlHttpRequest使您可以使用JavaScript向服务器提出请求并处理响应，而不阻塞用户。

问题3: CSS+DIV开发Web页面的优势有哪些？

• 1）CSS+DIV，这个网页设计模式中，DIV承担了网页的内容，CSS承担了网页的样式。这样就使网页的内容和样式的分离开来。有利于页面的维护升级。
• 2）有助于提高搜索引擎亲和力（快速找到需要的数据，而不是像在TABLE中一层层的查找），简洁、结构化的代码更加有利于突出重点和适合搜索引擎抓取。
• 3）有助于页面的重构(换皮肤如blog，直接套用另外一套样式就可以实现，而不用改动网页脚本。)

问题4：简述DIV元素和SPAN元素的区别

DIV默认情况下是分行显示，SPAN在同行显示。

前端常见题目个人思考题：

1、前端安全方面有没有了解？CSRF如何攻防？

• 前段攻击都有哪些

  • XSS攻击

    • XSS是一种经常出现在web应用中的计算机安全漏洞，它允许恶意web用户将代码植入到提供给其它用户使用的页面中。其实在web前端方面，可以简单的理解为一种JavaScript代码注入。
    • 防范：最简单的办法防治办法，还是将前端输出数据都进行转义最为稳妥。比如，按照刚刚我们那个例子来说，其本质是，浏览器遇到script标签的话，则会执行其中的脚本。但是如果我们将script标签的进行转义，则浏览器便不会认为其是一个标签，但是显示的时候，还是会按照正常的方式去显示。

  • append的利用

    • 直接给innerHTML赋值一段js，是无法被执行的。比如，$('div').innerHTML = '<script>alert("okok");</script>';但是，jQuery的append可以做到，究其原因，就是因为jquery会在将append元素变为fragment的时候，找到其中的script标签，再使用eval执行一遍。jquery的append使用的方式也是innerHTML。而innerHTML是会将unicode码转换为字符实体的。
    • 利用这两种知识结合，我们可以得出，网站使用append进行dom操作，如果是append我们可以决定的字段，那么我们可以将左右尖括号，使用unicode码伪装起来，就像这样–"\u003cscript\u003ealert('okok');"。接下来转义的时候，伪装成\u003的<会被漏掉，append的时候，则会被重新调用。

  • img标签的再次利用

    • img标签，在加载图片失败的时候，会调用该元素上的onerror事件。
    • <img src="<?php echo $imgsrc;?>" />
    • 图片的地址我们换种写法$imgsrc="\" onerror=\"javascript:alert('侯医生');\""; />;
    • 拼接好后就是<img src="" onerror="javascript:alert('侯医生');""/>
    • 代码注入已经成功
    • 防御升级了，我们将输出的字符串中的\反斜杠进行转义(json转义)。这样，\就不会被当做unicode码的开头来被处理了

  • CSRF攻击

    • CSRF（Cross-site request forgery跨站请求伪造，也被称为“One Click Attack”或者Session Riding，通常缩写为CSRF或者XSRF，是一种对网站的恶意利用。
    • 其实就是网站中的一些提交行为，被黑客利用，你在访问黑客的网站的时候，进行的操作，会被操作到其他网站上(如：你所使用的网络银行的网站)。
    • 举个例子：http://blog.csdn.net/fengyinchao/article/details/52303118
    • 通常我们会为了省事儿，把一些应当提交的数据，做成get请求。殊不知，这不仅仅是违反了http的标准而已，也同样会被黑客所利用。

    • 所以，我们日常的开发，还是要遵循提交业务，严格按照post请求去做的。更不要使用jsonp去做提交型的接口，这样非常的危险。

    • 使用了post请求来处理关键业务的，还是有办法可以破解的

    • 解决方法：
      
      • 最简单的办法就是加验证码
      • 另一种方式，就是在用访问的页面中，都种下验证用的token，用户所有的提交都必须带上本次页面中生成的token，这种方式的本质和使用验证码没什么两样，但是这种方式，整个页面每一次的session，使用同一个token就行，很多post操作，开发者就可以自动带上当前页面的token。如果token校验不通过，则证明此次提交并非从本站发送来，则终止提交过程。如果token确实为本网站生成的话，则可以通过。

• 网络劫持攻击

  • 我们的用户经常会在各种饭馆里面，连一些奇奇怪怪的wifi，如果这个wifi是黑客所建立的热点wifi，那么黑客就可以结果该用户收发的所有数据。这里，建议站长们网站都使用https进行加密。这样，就算网站的数据能被拿到，黑客也无法解开。
• 控制台注入代码
  
  • 有的黑客会诱骗用户去往控制台里面粘贴东西（欺负小白用户不懂代码），比如可以在朋友圈贴个什么文章，说:”只要访问天猫，按下F12并且粘贴以下内容，则可以获得xx元礼品”之类的，那么有的用户真的会去操作，并且自己隐私被暴露了也不知道。
• 钓鱼
  
  • QQ群里面有人发什么兼职啦、什么自己要去国外了房子车子甩卖了，详情在我QQ空间里啦，之类的连接。打开之后发现一个QQ登录框，其实一看域名就知道不是QQ，不过做得非常像QQ登录，不明就里的用户们，就真的把用户名和密码输入了进去，结果没登录到QQ，用户名和密码却给人发过去了。

2、平时网站开发要注意些什么

• 开发时要提防用户产生的内容，要对用户输入的信息进行层层检测
• 要注意对用户的输出内容进行过滤(进行转义等)
• 重要的内容记得要加密传输(无论是利用https也好，自己加密也好)
• get请求与post请求，要严格遵守规范，不要混用，不要将一些危险的提交使用json完成。
• 对于URL上携带的信息，要谨慎使用。
• 心中时刻记着，自己的网站哪里可能有危险。

3、 说说你对SVG理解?

• SVG是什么
  
  • SVG是一种可缩放矢量图形（英语：Scalable Vector Graphics，SVG）是基于可扩展标记语言（XML），用于描述二维矢量图形的图形格式。SVG由W3C制定，是一个开放标准。
  • 简单的理解它是图形的另一种格式例如它和常见的图片格式.png、.jpg、.gif等是一类。
  • 2011年8月16日，發布SVG 1.1（第2版），成为W3C目前推荐的标准
• 和传统图片格式有什么不同
  
  • 兼容现有图片能力前提还支持矢量：质量高，占用空间小
  • 可读性好，有利于SEO与无障碍
    
    • SVG采用的是XML语法，图形的里面的文本内容可以直接被浏览器，搜索引擎SEO和无障碍读屏软件读取
  • 与icon font对比
    
    • 渲染方式不同：icon font在一倍屏幕下渲染效果并不好，在细节部分锯齿还是很明显的，但SVG不会
    • icon font只能支持单色
    • con font可读性不好
• 制作成本与维护成本
  
  • 制作SVG设计软件有：Adobe Illustrator、Visio以及CorelDRAW等
  • “用PS画一个图形和用AI画一个图形的所需时间是一样”
  • 不同尺寸的控制都有前端同学直接调整SVG宽高参数就能实现不同尺寸切换，且不会有锯齿
• 性能测试
  
  • svg图标和icon font在Chrome Timeline做了测试
  • 1.svg与icon font性能对比整体 Rendering项基本上是碾压了icon font
• 兼容性
  
  • 关于兼容性，在咱祖国一直是一个比较伤感的话题，不过从IE9开始已经开始兼容SVG了，安卓3.X开始局部支持
• 参考：http://isux.tencent.com/why-svg.html