1.CORS & CSP

浏览器跨域相关的安全策略主要存在于两个方面:

  1. 浏览器是否发送ajax
  2. 浏览器是否加载返回数据

假设从a.com 向b.com发送ajax请求。此时浏览器当前页面为a.com,浏览器发送ajax,去获取b.com的资源。具体请求过程如下:

  1. a.com通过添加 Content-Security-Policy头设置CSP策略来限制请求是否发出。浏览器发送获取资源请求之前,先读取当前页面的Content-Security-Policy参数,检查请求目的地址b.com是否符合CSP策略,如果符合则发出该ajax请求,如果不符合,则丢弃该请求并报CSP 错误。

     * Content-Security-Policy: default-src 'self' 仅仅允许访问当前域名,无法发送
    * Content-Security-Policy: *.b.com 允许发送
  2. b.com通过设置跨域资源共享CORS策略来限制浏览器是否加载b.com返回的数据。 浏览器成功发送ajax给b.com后,b.com收到请求并返回带有Access-Control-Allow-Origin头的数据包,浏览器先检查a.com是否在Access-Control-Allow-Origin允许范围之内,如果不在,则报CORS错误并不在当前页面加载这次返回的数据。实际上,不管b.com是否配置CORS头,浏览器此时都收到了完整的数据包,浏览器只是通过CORS策略来决定是否呈现返回的数据。

     * Access-Control-Allow-Origin * 允许加载任意来源请求,请求成功
    * Access-Control-Allow-Origin http://c.com 只允许来自c.com的请求,请求失败

Origin header注意点:

Origin header是浏览器添加的。如果一个request中,有origin header,并不一定是一次跨域请求,但是所有跨域请求都 会包含origin header.

Refer: https://stackoverflow.com/questions/15988323/cors-and-origin-header

IE10以下不支持CORS

2.JSONP

html原生的带有src属性的标签,比如CSS IMG SCRIPT标签不存在跨域问题,jsonp正是利用script标签来实现跨域。 script标签引入一个js文件,这个js文件载入成功后会执行我们在url参数中指定的函数,并且会把我们需要的json数据作为参数传入。

JSONP只支持GET请求。

3. 同域代理

同域代理就是使用ajax先发送数据到中间代理,代理通过后端逻辑来向目标站发送请求。

CORS & CSP笔记的更多相关文章

  1. 你不可不知的WEB安全知识(第一部分:HTTPS, TLS, SSL, CORS, CSP)

    译   原文地址:https://dev.to/ahmedatefae/web-security-knowledge-you-must-understand-it-part-i-https-tls-s ...

  2. django上课笔记7-jQuery Ajax 和 原生Ajax-伪造的Ajax-三种Ajax上传文件方法-JSONP和CORS跨域资源共享

    一.jQuery Ajax 和 原生Ajax from django.conf.urls import url from django.contrib import admin from app01 ...

  3. vue—你必须知道的 js数据类型 前端学习 CSS 居中 事件委托和this 让js调试更简单—console AMD && CMD 模式识别课程笔记(一) web攻击 web安全之XSS JSONP && CORS css 定位 react小结

    vue—你必须知道的   目录 更多总结 猛戳这里 属性与方法 语法 计算属性 特殊属性 vue 样式绑定 vue事件处理器 表单控件绑定 父子组件通信 过渡效果 vue经验总结 javascript ...

  4. CSP & CORS

    CSP & CORS 内容安全策略 跨域资源共享 CSP https://developers.google.com/web/fundamentals/security/csp google ...

  5. AJAX学习笔记2:XHR实现跨域资源共享(CORS)以及和JSONP的对比----转载

    1 前言: 首先对参考文章作者表示感谢,你们的经验总结给我们这些新手提供了太多资源.本文致力于解决AJAX的CORS问题,我在逻辑上进行了梳理:首先,系统的总结了CORS问题的起源-同源策略:其次,介 ...

  6. 跨域学习笔记2--WebApi 跨域问题解决方案:CORS

    自己并不懂,在此先记录下来,留待以后学习... 正文 前言:上篇总结了下WebApi的接口测试工具的使用,这篇接着来看看WebAPI的另一个常见问题:跨域问题.本篇主要从实例的角度分享下CORS解决跨 ...

  7. SpringBoot学习笔记(7)-----CORS支持解决跨域问题

    在实际应用开发中,跨域是一个比较常见的问题,解决方法可以用jsonp,frame,cors等, 这里示例的是SpringBoot对CORS的支持的三种实现方式 第一种:配置一种全局的支持,这种方式需要 ...

  8. CORS(跨域资源共享)笔记

    0.前言 CORS(Cross-Origin Resource Sharing)是一个用于处理跨域问题的W3C标准,本文将介绍什么是跨域,引起跨域的同源策略,什么是CORS,CORS的工作过程,请求方 ...

  9. Node.js 【CORS(cross origin resource sharing) on ExpressJS之笔记】

    app.use(function(req, res, next) { res.header("Access-Control-Allow-Origin", "*" ...

随机推荐

  1. Protobuf的上手使用

    这里不赘述Json和Protobuf的比较和区别,只谈谈简单的使用 1.在Client-Server交互的过程中,都是以二进制数据传输,所以Json和Protobuf在使用的过程中,都存在序列化和反序 ...

  2. Python学习日记(九) 装饰器函数

    1.import time a.time.time() 获取到当前的时间,返回值为浮点型 import time print(time.time()) #1565422783.6497557 b.ti ...

  3. CRM-Q模糊查询

    Q查询-模糊查询 示例一 q=Q() # 实例化一个Q的对象q,我们可以给它加条件 q.children.append(("name","xxx")) # 添加 ...

  4. docker-compose设置mysql初始化数据库的字符集

    version: '3' services: mysql: image: mysql:5.7.24# volumes:# - ./mysqld.cnf:/etc/mysql/mysql.conf.d/ ...

  5. 使用gdb调试应用程序

    目录 一.gdb基本使用 1. 启动gdb 2. gdb交互式命令 一.gdb基本使用 ​ GDB是一个由GNU开源组织发布的.UNIX/LINUX操作系统下的.基于命令行的.功能强大的程序调试工具. ...

  6. SQL SERVER-日期按时区转换

    SELECT SWITCHOFFSET('2019-07-19 08:35:06.637','+08:00')

  7. Access、Trunk和Hybrid三种端口模式

    网络交换机(英语:Network switch)是一个扩大网络的器材,能为子网中提供更多的连接端口,以便连接更多的电脑. 通俗来说其起到的作用就是把一个网络端口分成多个网络端口 交换机和路由器的区别 ...

  8. 解决pycharm新建项目后按钮灰色问题

    解决pycharm新建项目后按钮灰色问题 出现过多次该问题了, 在此记录一下 同样适用于导入别人的新项目后无法运行问题 原因一: pycharm没有设置系统解析器 解决方法一: 打开pycharm-& ...

  9. Linux 逻辑卷扩容

    Linux 逻辑卷扩容 关键词:pv(物理卷).vg(卷组) .lv(逻辑卷) 今天在用linux过程中,根分区容量不够了,突然想起来好久没更新博客,就来说说逻辑卷扩容的问题吧. 1.扩容前的检查 记 ...

  10. 51nod 2499 不降的数字

    小b有一个非负整数 N,她想请你找出 ≤N≤N 的最大整数x,满足x各个位数上的数字是不降的.也就是说,设x的十进制表示为 a1,a2,…,ama1,a2,…,am,则对于任意 1≤i<m1≤i ...