现代浏览器在网络安全领域面临诸多挑战,XSS攻击等攻击方式层出不穷,为了应对这种情况,浏览器默认引入了同源策略(Same Origin Policy)。意思是在浏览器中页面的资源访问受限在同一个域中,跨域访问默认是禁止的。
如何定义一个域? 由三部分组成:协议、域名、端口号。其中任一一个不同都认为是不同的域,包含各自独立的存储空间:localStorage,sessionStorage等。
但在实际情况中,浏览器跨域访问资源的需求同样是非常强烈的,不能因噎废食。因此标准组织同样推出了几种跨域访问资源的方案:
-
CORS(Cross Origin Resource Sharing),翻译过来就是跨域资源访问。这是属于服务端配置允许哪些站点访问本站资源的方式,方式是通过在header中设置特定键值对来实现,字段如下:
-
Cross Document Message ,俗称postMessage,跨文本消息传递。这种方式类似于订阅监听模式,给其他域发送一则message,然后其他域监听后执行相关回调。典型的例子如下:
说完了跨域,继续之前的安全专题,还剩下两个重要的安全策略。一是CSP内容安全策略,二是HTTPS。前者有前端代码层面规定了本站允许访问的源,后者在协议层面保证了通信的安全。
CSP全名Content Security Policy,翻译过来就是内容安全策略。那如何实现呢?它的实现类似于CORS的header定义,也是规定了一些header头部字段,在于服务端通信的时候在接口中带上。具体字段如下:
那怎么用呢?需要将上面的字段统一拼接成字符串,用分号;分割,然后统一放在对应的字段后面,字段名称因为兼容性共3个。
- Content-Security-Policy:这是标准的名称,chrome和firefox都支持
- X-Webkit-CSP:主要给webkit的浏览器用
- X-Content-Security-Policy: Firefox用
最终呈现的接口效果示例如下:
最后说到HTTPS,这块内容非常多,有协议,有加密算法,后面会有专题讨论下。这里简单介绍下HTTPS的特点,该协议基于SSL技术,构建在TCP协议之上,应用层HTTP协议之下。