2019-09-28——浏览器安全之同源策略

同源策略

概述

书面表述：js脚本可以访问所在页面的所有元素。通过ajax技术，js也可以访问同一协议，同一个domain(ip)，同一端口的服务器上的其他页面，请求到浏览器端之后，利用js就可以进行任意的访问。但是对于协议不同，或者domain不同或者端口不同的服务器上的页面就无能为力了，完全不能进行请求。

如何跨域访问资源的——Jsonp

通常允许跨域写操作（Cross-origin writes）。例如链接（links），重定向以及表单提交。

通常允许跨域资源嵌入（Cross-origin embedding）。仅加载，不能读（read）、写（write）。

标签嵌入CSS。由于CSS的松散语法规则，CSS的跨域需要一个设置正确的Content-Type 消息头。

<img>嵌入图片。支持的图片格式包括PNG,JPEG,GIF,BMP,SVG,...

@font-face引入的字体。一些浏览器允许跨域字体（ cross-origin fonts），一些需要同源字体（same-origin fonts）。

<frame>和<iframe>载入的任何资源。站点可以使用X-Frame_Options消息头来阻止这种形式的跨域交互。

jsonp就是利用了<script>标签可以链接到不同源的js脚本，来到达跨域目的。当链接的资源到达浏览器时，浏览器会根据他们的类型来采取不同的处理方式，比如，如果是css文件，则会进行对页面 repaint，如果是img 则会将图片渲染出来，如果是script 脚本，则会进行执行。

当这些带‘src'属性的标签每次加载时，实际上是浏览器发起一个GET请求。

通常不允许跨域读操作（Cross-origin reads）。但常可以通过内嵌资源来巧妙的进行读取访问。例如可以读取嵌入图片的高度和宽度，调用内嵌脚本的方法。

XMLHttpRequest的跨域请求——CORS

跨域资源共享（CORS）是一种机制，它使用附加的HTTP标头来告知浏览器以使Web应用程序在一个来源运行，并从另一个来源访问选定的资源。Web应用程序请求其来源（域，协议或端口）不同的资源时，将执行跨域HTTP请求。

通过目标域返回的http头来授权是否允许跨域访问。一个跨来源请求的例子：在前端JavaScript代码从提供https://domain-a.com的用途XMLHttpRequest，以使一个请求https://domain-b.com/data.json。

跨域漏洞

Jsonp劫持

先简述一下sonp的执行过程如下：

首先在客户端注册一个callback (如:'jsoncallback'), 然后把callback的名字(如:jsonp1236827957501)传给服务器。注意：服务端得到callback的数值后，要用jsonp1236827957501(......)把将要输出的json内容包括起来，此时，服务器生成 json 数据才能被客户端正确接收。

然后以 javascript 语法的方式，生成一个function， function 名字就是传递上来的参数 'jsoncallback'的值 jsonp1236827957501 .

最后将 json 数据直接以入参的方式，放置到 function 中，这样就生成了一段 js 语法的文档，返回给客户端。

客户端浏览器，解析script标签，并执行返回的 javascript 文档，此时javascript文档数据，作为参数，传入到了客户端预先定义好的 callback 函数(如上例中jquery $.ajax()方法封装的的success: function (json))里。

可以说jsonp的方式原理上和<script src="http://跨域/...xx.js"></script>是一致的。

JSONP是一种脚本注入(Script Injection)行为，所以有一定的安全隐患，属于CSRF的一种。

我们可以构造出一个恶意的jsonp调用页面，然后诱使用户访问我们的页面，从而达到一个截取用户信息的目的。