是时候再提web标准,跨域访问和防盗链基本原理

2019-09-11 16:05栏目:人才招聘
TAG:

是时候再提web标准

2016/07/06 · 基础技术 · WEB

原文出处: 灵感(@灵感_idea )   

前端面试【有感而发】

2015/09/16 · HTML5, JavaScript · 1 评论 · 面试

原文出处: 聂微东(@聂微东)   

首先,这篇没有具体的面试题;

其次,这篇仅是我个人的面试态度;

最后,在这金三银四的跳槽季里,祝愿各位找到好工作。

俺第一次做面试官是2011年,想起那时自己真的很紧张(不管做什么头几次都紧张哈),可是还是在希望在面试者面前留个比较专业的印象,所以总是装作很淡定,记得那时总会放一件修身小西装放公司,专门用来面试的时候穿的,装成熟,你懂得。现在回忆起那时的点滴,不由自主的会嘴角上扬:)

图片 1

——————————- 低调的分割线 ——————————-

 

“全世界都缺前端” —— 这话总会被提起,PM尤其是喜欢这么说,而且还是在工作推动的过程中(我会告诉你我这是在黑PM么)

面试一直是俺工作中重要的一块,而且自己也喜欢去参与面试(工作忙爆的时间除外)。原因究竟为甚其实我自己也说不上来,可能是因为心里希望在工作时可以与聪明的人合作吧;也可能是希望通过面试push自己去主动了解行业新的技术…Anyhow,也就一头扎进了面试官的行列,且乐此不疲。

图片 2

前端回忆录  

8年前的前端做些什么?页面重构(HTML+CSS)和实现页面交互(JS+CSS);jQuery也是在8年前诞生(06年8月发布V1.0);

4年前业内提出大前端,这直接让前端职位在产品和业务中变得更加重要,甚至是最重要的存在,在以前的技能基础上又需要掌握一门服务端语言和少量数据库的经验(从那时开始身边经常有朋友由后端转前端);

2年前的前端界Node开始疯狂火热,且一扫各种前端论坛、开源项目,狂热者更提出“JS一统WEB开发”的头号,数据结构简单点的网站建设只需要一个工程师即可搞定,那就是前端,叼炸天呀;

Now,全端工程师???maybe…

移动互联网风光依旧,前端更是无处不在。

可是… …

招人真心难,招前端更难,招个好前端难上加难有木有~~

图片 3

主观意识 & 经验主义  

工程师每轮面试时间一般为一小时左右,除非面试官对你没有兴趣,否则不会十几分钟就打发走你(我厂要求面试至少20分钟)。而且就在这差不多一小时,面试官要判断你是否符合招聘的岗位,这本身就是一件非常挑战的事情。正因为这样,所以面试官的决定都有一定的风险和主观意识,这不可避免。

许久以前看过一篇跟面试相关的文章,具体内容说什么忘记了,不过里面有一句话给我印象深刻,大概意思是:“很多面试官希望能招到个像自己的人,和自己类似的人”。很容易理解这句话,因为和自己类似所有更容易引起自身的关注,而且记忆会更深刻。这个“类似”俩字我理解应该至少包括几个方面:技术方向、性格、思维方式等。

我也同意会带着主观意识去面试,但我认为这并不是什么糟糕的事情。

具体点说,我会考虑你是否会push甚至引导团队的成长、与你合作是否会愉快,这也是我参与面试的原因之一。在此,希望你静静思考下,你在团队中是否属于这类人,至于是与不是由看官您自己评判了:)

图片 4

技术一面  

通常情况下工程师面试都有几轮?不管几轮都很正常,反而很少有听说只有一轮面试的,所以这里说的一面是纯技术的面试。

有时我会为面试面到一名优秀的同学而高兴不已,因为聊天会很畅快,而且决定很明朗。

更多时候我会比较纠结,因为我需要考虑给不给面试者通过我这关。正因如此,其实很多时候我做的每个选择都有一定的运气成分。

俺初期做面试官的时候,基本都是我主动来发问和出题,用自己的主观意识去考察面试者的方方面面。那时想当然的认为,这份岗位需要这些XX技能和用到这些XX技巧,所以如果面试者具备这些知识点就可以通过。

再后来面试的经验提升了,想明白了学习能力、思维方式和技术能力同样非常重要,所有会主要针对面试者比较擅长的领域来【交流、讨论】。

在面试这个过程里,我现在总会在正式面试之前,和面试者说句话:“面试就是聊天,我们简单聊聊吧”。

图片 5

本来想随便配个图,可是看到这个图片突然想起一首儿歌:丢肥皂 丢肥皂 轻轻的放在小基友的后面 大家不要告诉他 快点快点捉住他,快点快点捉住他…

好吧,节操碎了一地。

 

我的期待  

下周已经安排有六个面试。请思考,作为一名面试官应该对你又有怎样的期待?

俺的面试时的问题一般不固定,因为我不喜欢背题的做法。

有一定工作经验最好,当然没有也同样有机会,而且有工作经验对于面试也不一定都是好事。

PS:工作年限和项目经验决定了你的知识储备,所以也会有针对性的调整难度和问题。

 

在我看来评价一名同事是否优秀其实很简单, 看看他是否够【专业】就行了。那么合计合计,你自己对待工作是否对得住专业俩字。至于怎么理解专业俩字,还是见仁见智吧。

简历造假或者过分夸大。夸大自己的工作确实也属正常,可是如果夸大、夸大程度都需要有底线可言。经常会看到简历上写着精通XX,比如jQuery,然后面试的一问没有读过源码,对其细节原理说不出所以然来,这还不如不写。

记得前不久在微博上看 @朴灵 说过:“如果你的GitHub上没有任何项目和代码,简历上还是别填GitHub地址了,没啥好处的。”

期待你不要紧张、而且自信,让自己好的一面尽量的展现出来,努力把面试官当成你的同事,你只是与他探讨工作中的问题。甚至可以多提些自己觉得有意思的想法,如果能够和面试官一直存于一个较愉快的谈话环境,相信你的面试结论上,面试官一定不会吝啬对你进行正面的评价。

图片 6

总结  

面试其实也是修心的过程。

我毕业初期时找工作也并不顺利,不过多次在找工作面试的过程中经常会遇见很好的面试官,就算你没有达到他们的岗位要求,他们还是会中肯的给你一些靠谱的建议。这些面试过程就非常的美好,其实结果不一定是最重要的,过程也一样美妙,不是吗。

最后,请带着你积极的心态,好好享受每一次面试。

祝好

2 赞 3 收藏 1 评论

图片 7

跨域访问和防盗链基本原理(一)

2015/10/18 · HTML5 · 跨域, 防盗链

原文出处: 童燕群 (@童燕群)   

**背景**

**web标准是个老生常谈的话题。引入国内的时间,粗略算下来,有十年左右了。但是由于国内前端优秀人才的缺失和相关教育跟进的缓慢,造成了很多人都没有对它引起足够的重视并运用到自己的实际项目当中,同时又花了较多精力在眼花缭乱的新技术方案和工具中,这就造成了技术断层,影响不是一个两个人,而是一大部分,如果再缺少相关的正确引导,就会保留很多不正确的编码习惯,对于个人成长和所做的项目都是不利的。**

为什么是时候再提呢?可以先来看看下面一张具有一定代表性的图,截自我的企鹅群(152128548)

图片 8

1、标签仍在被滥用
2、重视觉,轻语义和结构
3、热衷于跟进热门新技术,不重视基础
4、当我在跟大家说重视基础的时候,要么有人说原生js,要么有人说css原理和技巧,没人说html

由于以上的几点,加上各种场合和会议似乎很少提及这些方面的东西,新手在被老手“牵”着走,老手的精力又不在这些比较基础的东西上。这篇文呢,就是跟大家一起回到起点,去看看怎样做才算是符合了web标准的编码。

一、什么是防盗链

网站资源都有域的概念,浏览器加载一个站点时,首先加载这个站点的首页,一般是index.html或者index.php等。页面加载,如果仅仅是加载一个index.html页面,那么该页面里面只有文本,最终浏览器只能呈现一个文本页面。丰富的多媒体信息无法在站点上面展现。

那么我们看到的各类元素丰富的网页是如何在浏览器端生成并呈现的?其实,index.html在被解析时,浏览器会识别页面源码中的img,script等标签,标签内部一般会有src属性,src属性一般是一个绝对的URL地址或者相对本域的地址。浏览器会识别各种情况,并最终得到该资源的唯一地址,加载该资源。具体的加载过程就是对该资源的URL发起一个获取数据的请求,也就是GET请求。各种丰富的资源组成整个页面,浏览器按照html语法指定的格式排列获取到各类资源,最终呈现一个完整的页面。因此一个网页是由很多次请求,获取众多资源形成的,整个浏览器在一次网页呈现中会有很多次GET请求获取各个标签下的src资源。

图片 9

上图是一篇本站的博客网页呈现过程中的抓包截图。可以看到,大量的加载css、js和图片类资源的get请求。

观察其中的请求目的地址,可以发现有两类,一个是本站的43.242段的IP地址,这是本站的空间地址,即向本站自身请求资源,一般来说这个是必须的,访问资源由自身托管。另外一类是访问182的网段拉取数据。这类数据不是托管站内的,是在其他站点的。浏览器在页面呈现的过程,拉取非本站的资源,这就称“盗链”。

准确的说,只有某些时候,这种跨站访问资源,才被称为盗链。假设B站点作为一个商业网站,有很多自主版权的图片,自身展示用于商业目的。而A站点,希望在自己的网站上面也展示这些图片,直接使用:

<img src=";

1
<img src="http://b.com/photo.jpg"/>

这样,大量的客户端在访问A站点时,实际上消耗了B站点的流量,而A站点却从中达成商业目的。从而不劳而获。这样的A站点着实令B站点不快的。如何禁止此类问题呢?

HTTP协议和标准的浏览器对于解决这个问题提供便利,浏览器在加载非本站的资源时,会增加一个头域,头域名字固定为:

Referer:

1
Referer:

而在直接粘贴地址到浏览器地址栏访问时,请求的是本站的该url的页面,是不会有这个referer这个http头域的。使用Chrome浏览器的调试台,打开network标签可以看到每一个资源的加载过程,下面两个图分别是主页面和一个页面内资源的加载请求截图:

图片 10

图片 11

这个referer标签正是为了告诉请求响应者(被拉取资源的服务端),本次请求的引用页是谁,资源提供端可以分析这个引用者是否“友好”,是否允许其“引用”,对于不允许访问的引用者,可以不提供图片,这样访问者在页面上就只能看到一个图片无法加载的浏览器默认占位的警告图片,甚至服务端可以返回一个默认的提醒勿盗链的提示图片。

一般的站点或者静态资源托管站点都提供防盗链的设置,也就是让服务端识别指定的Referer,在服务端接收到请求时,通过匹配referer头域与配置,对于指定放行,对于其他referer视为盗链。

1 赞 1 收藏 评论

图片 12

问题来源

1、门槛低、简单

一周就可以掌握html,常用标签不多,用不到的不用管

比如:h1~6、p、span、div、img、a、input等,我们来随意的看一张截图

图片 13

上面是某宝PC端的登录页,可能是由于种种原因(不详),只用了少量的标签,所以,并不说它是不好的或者是错的,但它是其他很多人的写照。如果我说html标签有100多个,你会是什么反应?

1、不知道,没想到有这么多
2、知道,但认为很多都用不上

你会是哪种?

如何在合适的时候,合适的地方,使用正确的标签,这是web标准的基本要求。后面细说。

CSS很简单,常用属性也就那么多

宽、高、边框、背景、定位、浮动、边距,如果你掌握了这么多,那么就能够应对很多页面布局的情况了。如果你因此就认为css很简单,那么就等着它来“惩罚”你吧。

不好的方面:各种兼容问题,各种奇葩布局要求,各种不可预知的bug

好的方面:诸多奇妙的技巧和css3新属性,能够帮助我们做出充满美感又神奇的效果

如果你依然觉得CSS太简单,那么请看一下这里https://drafts.csswg.org/indexes/,要坚强~

2、只需要做“对”,不需要做好

很多时候,即使写错了浏览器会包容它,当我们的代码是不规范的,甚至有时候是错的,但是浏览器仍然将它“正常”显示出来,这个时候,我们意识不到自己的错误。认为看起来没问题就没问题,这是很危险的。

标签不用在意,交给CSS去处理就好,理论上,我们可以通过一定的CSS规则,任意的改变一个元素的表现,这就造成了对html标签的不重视,因为我们总能让它们看起来没有任何问题。

3、热衷于“向前看”

学习新技术,丰富自己的技能树——html5、canvas、svg、react、ES6等。

解决“难题”——觉得一般的工作没什么挑战了,所以不屑于去深挖自己已经会了东西。

做出炫酷的效果——纯CSS图标、动画,3D动画,canvas动画等。

跟风式学习——大家都在谈,业界都在捧,看起来很好的东西,就开始躁动不安,跃跃欲试,其实有句话叫做:“基础不牢,地动山摇”,兴致冲冲的去学习新的东西的时候,往往会发现,没有足够的基础,是很难前行的。

上面说的这些是错的么?当然都对,特别是在技术发展更新迭代速度快的互联网领域,想会得更多让自己更强,同时会的更多在实际应用中可选择的方案也更多,兴趣驱动去学习,这是好事,我自己也是这样的,但我们需要注意的是,学习不是一条直线,不能沿着一条线一直往前冲,除了长度,还有深度,需要我们不断的从各个方面去打磨和填充才能日臻完善。

文档结构和意义为先

我们都知道,实现一种效果可以有多种方式,那么哪种才是最优的?来看例子

列表

什么特点呢?最明显的就是有很多项,项和项之间相互独立,竖着排列,像这样

我是列表
我是列表
我是列表

它可以被怎样写呢?

1、

XHTML

我是列表<br> 我是列表<br> 我是列表<br>

1
2
3
我是列表<br>
我是列表<br>
我是列表<br>

2、

XHTML

<li>我是列表</li> <li>我是列表</li> <li>我是列表</li>

1
2
3
<li>我是列表</li>
<li>我是列表</li>
<li>我是列表</li>

3、

XHTML

<ul> <li>我是列表</li> <li>我是列表</li> <li>我是列表</li> </ul>

1
2
3
4
5
<ul>
    <li>我是列表</li>
    <li>我是列表</li>
    <li>我是列表</li>
</ul>

上面三种是比较直接想到的对的写法,当然也可以用ol,算同一种方法。它们所能实现的效果是类似的,往往我们会从表现的角度考虑说第一种不够灵活,无法控制样式,第二种方法浏览器也不会不搭理你,它会把li解析成块级元素,让它们单独排列,但它失去了告诉浏览器“我是个列表”的标志,也就是外层容器(ul/ol),最好的写法肯定是第三种,它不仅看上去是对的,还告诉浏览器这是个列表,还有列表所应有的特点,比如“缩进”和“着重号”,当然,最大的益处仍然是它是有意义的,也是为什么这里没有提div和p等元素的原因。

版权声明:本文由ag真人发布于人才招聘,转载请注明出处:是时候再提web标准,跨域访问和防盗链基本原理