admin管理员组

文章数量:1530085

一、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

本文标签： 浏览器网络安全系统安全页面amp

版权声明：本文标题：浏览器安全——Web页面安全&浏览器网络安全(HTTPS)&浏览器系统安全 内容由热心网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：https://m.elefans.com/dongtai/1726624524a1078617.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。