XMLHttpRequest的withCredentials属性
最近对接第三方网站出现一下错误:
Access to XMLHttpRequest at 'https://third.site.com/request_url' from origin 'https://main.site.com' has been blocked by CORS policy: The value of the 'Access-Control-Allow-Origin' header in the response must not be the wildcard '*' when the request's credentials mode is 'include'. The credentials mode of requests initiated by the XMLHttpRequest is controlled by the withCredentials attribute.
根据错误线索查资料:
1.什么是 credentials
credentials,即用户凭证,是指 cookie、HTTP身份验证和TLS客户端证书。
XMLHttpRequest 的 withCredentials 属性:
默认值为false。在获取同域资源时设置 withCredentials 没有影响。
true:在跨域请求时,会携带用户凭证
false:在跨域请求时,不会携带用户凭证;返回的 response 里也会忽略 cookie
2.模拟:
$.ajax({
type: "POST",
url: 'https://third.site.com/request_url',
data: {'userid': '1112233', 'data': 'hello third'},
success: function(data){console.log(data)},
dataType: 'json',
xhrFields: {
withCredentials: true
}
});
Response headers:
Access-Control-Allow-Headers: origin, token
Access-Control-Allow-Methods: POST, GET, OPTIONS, DELETE
Access-Control-Allow-Origin: *
Access-Control-Max-Age: 3600
Content-Type: application/json;charset=UTF-8
Date: Fri, 08 Mar 2019 10:11:21 GMT
Transfer-Encoding: chunked
查看console,提示文章开头的报错。
3.解决方法:
服务端返回的respoonse上加上:
response.setHeader("Access-Control-Allow-Origin", "https://main.site.com");
response.setHeader("Access-Control-Allow-Credentials", "true");
修改后,返回的请求头如下,浏览器不在报错:
Access-Control-Allow-Credentials: true
Access-Control-Allow-Headers: origin, token
Access-Control-Allow-Methods: POST, GET, OPTIONS, DELETE
Access-Control-Allow-Origin: https://main.site.com
Access-Control-Max-Age: 3600
Content-Type: application/json;charset=UTF-8
Date: Sat, 09 Mar 2019 06:22:19 GMT
Transfer-Encoding: chunked
4.想法: 从这个过程发现,如果可以将main.site.com站点的页面中注入类似的ajax请求,就可以将main.site.com的cookie发送到你想要的站点,完成用户凭证盗取,也就是CORS攻击。
XMLHttpRequest的withCredentials属性的更多相关文章
- 使用Typescript重构axios(二十三)——添加withCredentials属性
0. 系列文章 1.使用Typescript重构axios(一)--写在最前面 2.使用Typescript重构axios(二)--项目起手,跑通流程 3.使用Typescript重构axios(三) ...
- Ajax技术之XMLHttpRequest(二)【XMLHttpRequest常用方法和属性】
一.XMLHttpRequest中常用的方法: (1)open()方法:用于设置进行异步请求目标的URL.请求方法以及其他参数信息. 函数原型:open("method",&quo ...
- 关于xmlhttprequest的readystate属性的五个状态
http://www.cnblogs.com/jerry01/archive/2009/09/03/1559624.html 昨天做了一个利用 ajax实现页面无刷新的从服务器端获得时间的例子,当时对 ...
- Ajax的XMLHttpRequest对象的属性和方法总结
1.redayState属性: 当一个XMLHttpRequest对象被创建后,readyState属性别哦是当前对象正处于什么状态:0:未初始化状态:已经建立:1:准备发送状态:此时XMLHttpR ...
- XMLHttpRequest对象的属性与方法
XMLHttpRequest对象是Ajax的核心,它有很多属性和方法.1,readyState属性当一个XMLHttpRequest对象被创立后,readyState属性标示了当前对象处于什么状态,可 ...
- 一些XMLHttpRequest的例子代码
以下例子摘录自:javascript权威指南 //异步请求(事件监听请求是否返回) function getText(url,callback){ var request = new XMLHttpR ...
- CORS详解[译]
介绍 由于同源策略的缘故,以往我们跨域请求,会使用诸如JSON-P(不安全)或者代理(设置代理和维护繁琐)的方式.而跨源资源共享(Cross-Origin Resource Sharing)是一个W3 ...
- CORS详解
介绍 由于同源策略的缘故,以往我们跨域请求,会使用诸如JSON-P(不安全)或者代理(设置代理和维护繁琐)的方式.而跨源资源共享(Cross-Origin Resource Sharing)是一个W3 ...
- 关于ajax跨域请求(cross Domain)
Cross Domain AJAX主要就是A.com网站的页面发出一个XMLHttpRequest,这个Request的url是B.com,这样的请求是被禁止的,浏览器处于安全考虑不允许进行跨域访问, ...
随机推荐
- angular中使用promise
promise是一种用异步的方式处理值的方法,promise是对象,代表了一个函数最终可能的返回值或者抛出的异常,在与远程对象打交道时我们可以把他看作是远程对象的一个代理. 如果说是promise也是 ...
- draw call 理解和优化
draw call是openGL的描绘次数(directX没怎么研究,但原理应该差不多)一个简单的openGL的绘图次序是:设置颜色→绘图方式→顶点座标→绘制→结束.每帧都会重复以上的步骤.这就是一次 ...
- taro + taro-ui + dva
taro的安装及使用 安装 Taro 开发工具 @tarojs/cli 使用 npm 或者 yarn 全局安装,或者直接使用npx $ npm install -g @tarojs/cli $ yar ...
- Maven的镜像设置
文件位置 国内的阿里云 <mirrors> <mirror> <id>alimaven</id> <name>aliyun maven< ...
- 用Fiddler 发送post请求
在调试web api的时候,若是get 请求,可以直接在浏览器里查看结果,如果是put,或者post请求在浏览器地址栏里就没有办法了. 下面介绍一下,如何利用fiddler模拟post请求. 也可以用 ...
- FtpHelper类匿名获取FTP文件
using System; using System.Collections.Generic; using System.IO; using System.Linq; using System.Net ...
- 几种适配器&观察者&ListView之间的那点事
android中的几种适配器&观察者&ListView 1.我们知道Android中的Adapter类是处于ListView和数据源之间的数据总线,它负责为ListView提供数据. ...
- pandas所占内存释放
df = pd.read_csv('....') 要调用循环处理多个文件时,内存占用情况严重,如果互相之间不需要调用,可以直接del df 释放内存
- php漏洞修复 禁用函数
别人利用此PHP函数可以对系统进行相关操作 1.打开php.ini找到 ; http://php.net/disable-functions 2.修改添加内容如下 disable_functions ...
- 任务调度Cron表达式及Quartz代码详解
在线Cron表达式生成器 http://cron.qqe2.com/ cron表达式详解 http://www.cnblogs.com/linjiqin/archive/2013/07/08/3178 ...