浏览器安全——Web页面安全&浏览器网络安全(HTTPS)&浏览器系统安全

一、Web页面安全

同源和跨域:

什么是同源?如果两个页面拥有相同的协议(scheme)、域名(host)和端口(port)(http默认port80,https默认端口号443),那么这两个页面具有相同的源。
同源策略:是浏览器提供的一个安全策略。
同源策略主要表现在 DOM、Web 数据和网络这三个层面。
第一个,DOM 层面。同源策略限制了来自不同源的 JavaScript 脚本对当前 DOM 对象读和写的操作。(解决:跨文档消息机制:通过window.postMessage 的 JavaScript 接口来和不同源的 DOM 进行通信。)
第二个,数据层面。同源策略限制了不同源的站点读取当前站点的 Cookie、IndexDB、LocalStorage 等数据。
第三个,网络层面。同源策略限制了通过 XMLHttpRequest 等方式将站点的数据发送给不同源的站点。

什么是跨域?同源指的是两个url的协议(scheme)、域名(host name)、端口(port)一致,反之则是跨域。出现的根本原因:由浏览器的同源策略导致。
在这里插入图片描述
拦截是如何发生的
当xhr.send被调用时,即Ajax准备发送请求时,还只是在渲染进程中,浏览器给每个渲染进程装进了沙箱,在沙箱中的渲染进程是无法发送网络请求的,需通过IPC将数据传给浏览器主进程,由主进程发起网络请求。服务端处理完数据后将数据返回,主进程检查到跨域,且没有cors响应头,将响应体全部丢掉,并不会发送给渲染进程。达到了拦截数据的目的。
如何解决跨域
实现跨域数据请求有几种解决方案:JSONP、CORS、nginx反向代理(通过自家服务器访问别的服务器再响应回自家客户端)、websocket、iframe(诸多不便)。ranges’ 跨域解决方案
在这里插入图片描述
脚手架配置代理
在这里插入图片描述
JSONP:
注意JSONP和Ajax之间没有任何关系,不能把JSONP请求数据的方式叫做ajax,因为JSONP没有用到XMLHttpRequest这个对象。
JSONP的实现原理:JSONP是JSON的一种“使用模式”。
在这里插入图片描述
注意这里强调函数调用,从服务器返回一个函数的调用,在客户端执行回调,客户端决定调用哪个函数,通过查询字符串的形式(传入?callback=函数名)。
手写JSONP(封装JSONP)

function jsonp(url,params,callback){
   
    var script=document.createElement('script');
    var fnName='myJsonp'+Math.random().toString().replace('.','');//保证每次请求的方法都不会重复
    //window[fnName]=obj.callback.name;//.后面不能跟变量,只能跟属性,所以用中括号
    var params='';
    for(let key in params){
   
        params+='&'+key+'='+params
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值