您的位置:奥门新浦京网址 > Wed前段 > 我也想来谈谈HTTPS,跨域访问和防盗链基本原理

我也想来谈谈HTTPS,跨域访问和防盗链基本原理

发布时间:2019-10-14 18:31编辑:Wed前段浏览(161)

    返本求源——DOM元素的特性与属性

    2015/09/06 · HTML5, JavaScript · DOM

    原文出处: 木的树   

    抛砖引玉

    很多前端类库(比如dojo与JQuery)在涉及dom操作时都会见到两个模块:attr、prop。某天代码复查时,见到一段为某节点设置文本的代码:

    JavaScript

    attr.set(node, 'innerText', 'Hello World!')

    1
    attr.set(node, 'innerText', 'Hello World!')

    这段代码执行后并未生效,虽说innerText不是标准属性,尚未被ff支持,可用的是chrome,这个属性是被支持的。既然显示的文本没变,那就查看一下元素吧。
    图片 1

    innerText被添加到了html标签上,而换成prop模块后,成功的为节点替换文本。

    以上的这个小案例就涉及到了DOM操作时常常被忽略的一个问题:特性与属性的区别

    返本求源

    在DOM中,特性指的是html标签上的属性,比如:

    图片 2

    Property是对于某一类型特征的描述。可以这样理解,在DOM元素中可以通过点语法访问,又不是标准特性的都可以成为属性。

    DOM中所有的节点都实现了Node接口。Node接口是在DOM1级中定义的,其中定义了一些用来描述DOM节点的属性和操作方法。

    图片 3

    常见的nodeType、nodeValue、节点关系(parentNode、childNodes、firstChild、lastChild、previousSibling、nextSibling等)都属于Node接口定义的属性。对于Node接口的具体实现者,HTMLElement不仅继承了这些属性,还拥有五个wac规范中的五个标准特性:id、title、lang、dir、class和一个属性:attributes。

    每一个元素都有一个或多个特性,这些特性的用途是给出相应元素或其内容的附加信息。通过DOM元素直接操作特性的的方法有三个:

    • getAttribute(attrName)
    • setAttribute(attrName, value)
    • removeAttribute(name)

    这三个方法都可以操作自定义特性。但是只有公认的(非自定义)特性才会以属性的形式添加到DOM对象中,以属性方式操作这些特性会被同步到html标签中。HTMLElement的五个特性都有相应属性与其对待:id、title、lang、dir、className。在DOM中以属性方式操作这几个特性会同步到html标签中。

    不过,HTML5规范对自定义特性做了增强,只要自定义特性以”data-attrName”的形式写入到html标签中,在DOM属性中就可以通过element.dataset.attrName的形式来访问自定义特性,如:

    XHTML

    <input type=​"text" name=​"as_q" class=​"box" id=​"searched_content" title=​"在此输入搜索内容。" disabled=​"false" data-ff=​"fsdf">​ seh.dataset.ff

    1
    2
    <input type=​"text" name=​"as_q" class=​"box" id=​"searched_content" title=​"在此输入搜索内容。" disabled=​"false" data-ff=​"fsdf">​
    seh.dataset.ff

    元素的特性在DOM中以Attr类型来表示,Attr类型也实现了Node接口。Attr对象有三个属性:name、value、specified。其中,name是特性的名称,value是特性值,specified是一个布尔值,用来指示该特性是否被明确设置。

    document.createAttribute方法可以用来创建特性节点。例如,要为元素添加align特性可以使用如下方法:

    JavaScript

    ar attr = document.createAttribute('align') attr.value = 'left' seh.setAttributeNode(attr)

    1
    2
    3
    ar attr = document.createAttribute('align')
    attr.value = 'left'
    seh.setAttributeNode(attr)

    要将新创建的特性添加到元素上,必须使用元素的setAttributeNode方法。添加特性后,特性会反映在html标签上:

    图片 4

    注意,尽管特性节点也实现了Node接口,但特性却不被认为是DOM文档树的一部分。

    在所有的DOM节点中attributes属性是Element类型所独有的的属性。从技术角度来说,特性就是存在于元素的attributes属性中的节点。attributes属性属于NamedNodeMap类型的实例。元素的每一个特性节点都保存在NamedNodeMap对象中。NamedNodeMap类型拥有如下方法:

    • getNamedItem(name):返回特性名为name的特性节点
    • removeNamedItem(name):删除特性名为name的特性节点
    • setNamedItem(attr):像元素中添加一个特性节点
    • item(pos):返回位于数组pos处的节点

    获取、设置、删除元素节点可以如下方式:

    JavaScript

    element.attributes.getNamedItem('align') //获取 var attr = document.createAttribute('align'); attr.value = 'right'; element.attributes.setNamedItem(attr); //添加 element.attributes.removeNamedItem('align'); //删除

    1
    2
    3
    4
    5
    6
    7
    element.attributes.getNamedItem('align') //获取
     
    var attr = document.createAttribute('align');
    attr.value = 'right';
    element.attributes.setNamedItem(attr); //添加
     
    element.attributes.removeNamedItem('align'); //删除

    实际应用中并不建议使用特性节点的方式,而getAttribute、setAttribute、removeAttribute方法远比操作特性节点更方便。

    DOM、attributes、Attr三者关系应该这么画:

    图片 5

    应用总结

    基于以上DOM基础知识和实际工作经验,我将特性和属性的区别联系总结如下:

    1. 属性以及公认特性可以通过点语法访问;html5规范中,data-*形式的自定义特性可以通过element.dataset.*的形式来访问,否则用getAttribute
    2. 特性值只能是字符串,而属性值可以是任意JavaScript支持的类型
    3. 几个特殊特性:
      1. style,通过getAttrbute和setAttribute来操作这个特性只能得到或设置字符串;而已属性方式来操作就是在操作CSSStyleDeclaration对象
      2. 事件处理程序,通过特性方式得到和传递的都只是函数字符串;而已属性方式操作的是函数对象
      3. value,对于支持value的元素,最好通过属性方式操作,而且操作不会反映在html标签上
        XHTML
    
        seh.value = 10 &lt;input type="text" name="as_q" class="box"
        id="searched_content" title="在此输入搜索内容。"
        disabled="false" data-ff="fsdf" align="left"&gt;
    
        <table>
        <colgroup>
        <col style="width: 50%" />
        <col style="width: 50%" />
        </colgroup>
        <tbody>
        <tr class="odd">
        <td><div class="crayon-nums-content" style="font-size: 13px !important; line-height: 15px !important;">
        <div class="crayon-num" data-line="crayon-5b8f379c97d12396477911-1">
        1
        </div>
        <div class="crayon-num crayon-striped-num" data-line="crayon-5b8f379c97d12396477911-2">
        2
        </div>
        </div></td>
        <td><div class="crayon-pre" style="font-size: 13px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;">
        <div id="crayon-5b8f379c97d12396477911-1" class="crayon-line">
        seh.value = 10
        </div>
        <div id="crayon-5b8f379c97d12396477911-2" class="crayon-line crayon-striped-line">
        &lt;input type=&quot;text&quot; name=&quot;as_q&quot; class=&quot;box&quot; id=&quot;searched_content&quot; title=&quot;在此输入搜索内容。&quot; disabled=&quot;false&quot; data-ff=&quot;fsdf&quot; align=&quot;left&quot;&gt;
        </div>
        </div></td>
        </tr>
        </tbody>
        </table>
    
    4.  href,通过属性方式设置可以反映到html标签上,但用过点语法和getAttribute能够取到的值并不一定相同
    
    
        XHTML
    
        &lt;a href="/jsref/prop_checkbox_tabindex.asp"
        id="tabI"&gt;tabIndex&lt;/a&gt; link.getAttribute('href') //
        "/jsref/prop_checkbox_tabindex.asp" link.href //
        "http://www.w3school.com.cn/jsref/prop_checkbox_tabindex.asp"
    
        <table>
        <colgroup>
        <col style="width: 50%" />
        <col style="width: 50%" />
        </colgroup>
        <tbody>
        <tr class="odd">
        <td><div class="crayon-nums-content" style="font-size: 13px !important; line-height: 15px !important;">
        <div class="crayon-num" data-line="crayon-5b8f379c97d15903857159-1">
        1
        </div>
        <div class="crayon-num crayon-striped-num" data-line="crayon-5b8f379c97d15903857159-2">
        2
        </div>
        <div class="crayon-num" data-line="crayon-5b8f379c97d15903857159-3">
        3
        </div>
        <div class="crayon-num crayon-striped-num" data-line="crayon-5b8f379c97d15903857159-4">
        4
        </div>
        <div class="crayon-num" data-line="crayon-5b8f379c97d15903857159-5">
        5
        </div>
        </div></td>
        <td><div class="crayon-pre" style="font-size: 13px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;">
        <div id="crayon-5b8f379c97d15903857159-1" class="crayon-line">
        &lt;a href=&quot;/jsref/prop_checkbox_tabindex.asp&quot; id=&quot;tabI&quot;&gt;tabIndex&lt;/a&gt;
        </div>
        <div id="crayon-5b8f379c97d15903857159-2" class="crayon-line crayon-striped-line">
         
        </div>
        <div id="crayon-5b8f379c97d15903857159-3" class="crayon-line">
        link.getAttribute('href') // &quot;/jsref/prop_checkbox_tabindex.asp&quot;
        </div>
        <div id="crayon-5b8f379c97d15903857159-4" class="crayon-line crayon-striped-line">
         
        </div>
        <div id="crayon-5b8f379c97d15903857159-5" class="crayon-line">
        link.href // &quot;http://www.w3school.com.cn/jsref/prop_checkbox_tabindex.asp&quot;
        </div>
        </div></td>
        </tr>
        </tbody>
        </table>
    
    5.  disabled和checked,对于支持这两个特性的元素来说,他们在html标签中都是无状态的,只要有独立的标签属性在以点语法访问时就返回true,如果html标签属性不存在,则以点语法访问时就是false
    
    
        XHTML
    
        &lt;input type=​"text" name=​"as_q" class=​"box"
        id=​"searched_content" title=​"在此输入搜索内容。"
        disabled=​"false" data-ff=​"fsdf" align=​"left"&gt;​
        seh.disabled // true seh.disabled = false &lt;input type=​"text"
        name=​"as_q" class=​"box" id=​"searched_content"
        title=​"在此输入搜索内容。" data-ff=​"fsdf" align=​"left"&gt;​
    
        <table>
        <colgroup>
        <col style="width: 50%" />
        <col style="width: 50%" />
        </colgroup>
        <tbody>
        <tr class="odd">
        <td><div class="crayon-nums-content" style="font-size: 13px !important; line-height: 15px !important;">
        <div class="crayon-num" data-line="crayon-5b8f379c97d19172676562-1">
        1
        </div>
        <div class="crayon-num crayon-striped-num" data-line="crayon-5b8f379c97d19172676562-2">
        2
        </div>
        <div class="crayon-num" data-line="crayon-5b8f379c97d19172676562-3">
        3
        </div>
        <div class="crayon-num crayon-striped-num" data-line="crayon-5b8f379c97d19172676562-4">
        4
        </div>
        <div class="crayon-num" data-line="crayon-5b8f379c97d19172676562-5">
        5
        </div>
        <div class="crayon-num crayon-striped-num" data-line="crayon-5b8f379c97d19172676562-6">
        6
        </div>
        </div></td>
        <td><div class="crayon-pre" style="font-size: 13px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;">
        <div id="crayon-5b8f379c97d19172676562-1" class="crayon-line">
        &lt;input type=​&quot;text&quot; name=​&quot;as_q&quot; class=​&quot;box&quot; id=​&quot;searched_content&quot; title=​&quot;在此输入搜索内容。&quot; disabled=​&quot;false&quot; data-ff=​&quot;fsdf&quot; align=​&quot;left&quot;&gt;​
        </div>
        <div id="crayon-5b8f379c97d19172676562-2" class="crayon-line crayon-striped-line">
         
        </div>
        <div id="crayon-5b8f379c97d19172676562-3" class="crayon-line">
        seh.disabled // true
        </div>
        <div id="crayon-5b8f379c97d19172676562-4" class="crayon-line crayon-striped-line">
         
        </div>
        <div id="crayon-5b8f379c97d19172676562-5" class="crayon-line">
        seh.disabled = false
        </div>
        <div id="crayon-5b8f379c97d19172676562-6" class="crayon-line crayon-striped-line">
        &lt;input type=​&quot;text&quot; name=​&quot;as_q&quot; class=​&quot;box&quot; id=​&quot;searched_content&quot; title=​&quot;在此输入搜索内容。&quot; data-ff=​&quot;fsdf&quot; align=​&quot;left&quot;&gt;​
        </div>
        </div></td>
        </tr>
        </tbody>
        </table>
    

    1 赞 1 收藏 评论

    图片 6

    我也想来谈谈HTTPS

    2016/11/04 · 基础技术 · HTTPS

    本文作者: 伯乐在线 - ThoughtWorks 。未经作者许可,禁止转载!
    欢迎加入伯乐在线 专栏作者。

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

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

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

    安全越来越被重视

    2014年8月份Google在官博上发表《 HTTPS as a ranking signal 》。表示调整其搜索引擎算法,采用HTTPS加密的网站在搜索结果中的排名将会更高,鼓励全球网站采用安全度更高的HTTPS以保证访客安全。

    同一年(2014年),百度开始对外开放了HTTPS的访问,并于3月初正式对全网用户进行了HTTPS跳转。对百度自身来说,HTTPS能够保护用户体验,降低劫持/隐私泄露对用户的伤害。

    而2015年,百度开放收录HTTPS站点公告。全面支持HTTPS页面直接收录;百度搜索引擎认为在权值相同的站点中,采用HTTPS协议的页面更加安全,排名上会优先对待。

    一、什么是防盗链

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

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

    图片 7

    上图是一篇本站的博客网页呈现过程中的抓包截图。可以看到,大量的加载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标签可以看到每一个资源的加载过程,下面两个图分别是主页面和一个页面内资源的加载请求截图:

    图片 8

    图片 9

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

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

    1 赞 1 收藏 评论

    图片 10

    “HTTP = 不安全”,为什么说HTTP不安全?

    HTTP报文是由一行行简单字符串组成的,是纯文本,可以很方便地对其进行读写。一个简单事务所使用的报文:

    图片 11

    HTTP传输的内容是明文的,你上网浏览过、提交过的内容,所有在后台工作的实体,比如路由器的所有者、网线途径路线的不明意图者、省市运营商、运营商骨干网、跨运营商网关等都能够查看。举个不安全的例子:

    一个简单非HTTPS的登录采用POST方法提交包含用户名和密码的表单,会发生什么?

    图片 12

    POST表单发出去的信息,没有做任何的安全性信息置乱(加密编码),直接编码为下一层协议(TCP层)需要的内容,所有用户名和密码信息一览无余,任何拦截到报文信息的人都可以获取到你的用户名和密码,是不是想想都觉得恐怖?

    那么问题来了,怎么样才是安全的呢?

    本文由奥门新浦京网址发布于Wed前段,转载请注明出处:我也想来谈谈HTTPS,跨域访问和防盗链基本原理

    关键词:

上一篇:没有了

下一篇:没有了