JS(HTTP页面)发送HTTPS请求、同源策略
今天遇到一个必须在前端HTTP页面发送HTTPS请求的功能,有点小尴尬,这个跨域问题,也没啥好的解决方式,我网上查了一下,也没啥好的方式!
后来总结了一下,有两种方式:
1、a标签
<a href="https://aaa.com"> </a>
2、location.href
<script>
var url = "https://aaa.com";
location.href = url;
</script>
说实在的,这两种方式比较狗屎,但正好可以满足我的需求,所以就用了!
各位有啥好的方式可以留言。。。。。。。谢谢!
后来仔细看了下,这个主要是受浏览器同源策略所限制:
1、先来说说什么是源
• 源(origin)就是协议、域名和端口号。
以上url中的源就是:http://www.company.com:80
若地址里面的协议、域名和端口号均相同则属于同源。
以下是相对于 http://www.a.com/test/index.html 的同源检测
• http://www.a.com/dir/page.html ----成功
• http://www.child.a.com/test/index.html ----失败,域名不同
• https://www.a.com/test/index.html ----失败,协议不同
• http://www.a.com:8080/test/index.html ----失败,端口号不同
2.什么是同源策略?
同源策略是浏览器的一个安全功能,不同源的客户端脚本在没有明确授权的情况下,不能读写对方资源。所以a.com下的js脚本采用ajax读取b.com里面的文件数据是会报错的。
• 不受同源策略限制的:
1、页面中的链接,重定向以及表单提交是不会受到同源策略限制的。
2、跨域资源的引入是可以的。但是js不能读写加载的内容。如嵌入到页面中的<script src="..."></script>,<img>,<link>,<iframe>等。
二、跨域
1、什么是跨域
受前面所讲的浏览器同源策略的影响,不是同源的脚本不能操作其他源下面的对象。想要操作另一个源下的对象是就需要跨域。
2、跨域的实现形式
• 降域 document.domain
同源策略认为域和子域属于不同的域,如:
child1.a.com 与 a.com,
child1.a.com 与 child2.a.com,
xxx.child1.a.com 与 child1.a.com
两两不同源,可以通过设置 document.damain='a.com',浏览器就会认为它们都是同一个源。想要实现以上任意两个页面之间的通信,两个页面必须都设置documen.damain='a.com'。
此方式的特点:
1. 只能在父域名与子域名之间使用,且将 xxx.child1.a.com域名设置为a.com后,不能再设置成child1.a.com。
2. 存在安全性问题,当一个站点被攻击后,另一个站点会引起安全漏洞。
3. 这种方法只适用于 Cookie 和 iframe 窗口。
• JSONP跨域
JSONP和JSON并没有什么关系!
JSONP的原理:(举例:a.com/jsonp.html想得到b.com/main.js中的数据)在a.com的jsonp.html里创建一个回调函数xxx,动态添加<script>元素,向服务器发送请求,请求地址后面加上查询字符串,通过callback参数指定回调函数的名字。请求地址为http://b.com/main.js?callback=xxx。在main.js中调用这个回调函数xxx,并且以JSON数据形式作为参数传递,完成回调。我们来看看代码:
• // a.com/jsonp.html中的代码
•
function addScriptTag(src) { var script = document.createElement('script'); script.setAttribute("type","text/javascript"); script.src = src; document.body.appendChild(script);}window.onload = function () { addScriptTag('http://b.com/main.js?callback=foo');} //window.onload是为了让页面加载完成后再执行function foo(data) { console.log(data.name+"欢迎您");
};
//b.com/main.js中的代码
foo({name:"hl"})
这样便实现了跨域的参数传递。
采用jsonp跨域也存在问题:
1. 使用这种方法,只要是个网站都可以拿到b.com里的数据,存在安全性问题。需要网站双方商议基础token的身份验证,这里不详述。
2. 只能是GET,不能POST。
3. 可能被注入恶意代码,篡改页面内容,可以采用字符串过滤来规避此问题。
• CORS
CORS是一个W3C标准,全称是"跨域资源共享"(Cross-origin resource sharing)。
它允许浏览器向跨源服务器,发出XMLHttpRequest请求,从而克服了AJAX只能同源使用的限制。
刚才的例子中,在b.com里面添加响应头声明允许a.com的访问,代码:
Access-Control-Allow-Origin: http://a.com
然后a.com就可以用ajax获取b.com里的数据了。
注意:此方法IE8以下完全不支持,IE8-10部分支持。详见caniuse-CORS
详细内容请参考:跨域资源共享 CORS 详解
• 其它方法
1. HTML5的postMessage方法
2. window.name
3. location.hash
同源策略摘自:https://www.cnblogs.com/rockmadman/p/6836834.html
JS(HTTP页面)发送HTTPS请求、同源策略相关推荐
- js发送https请求问题处理总结
问题1 1.浏览器端无法发送https请求的时候 使用nginx进行转发,具体配置比较简单 问题2: 构建表单传送数据,提示缺失必要的参数. { "error" : "i ...
- 原声ajax发送post请求,原生JS实现ajax 发送post请求
1. [代码]原生JS实现ajax 发送post请求 var oStr = ''; var postData = {}; var oAjax = null; //post提交的数据 postData ...
- VS2015编译Poco+openssl,使用Poco发送HTTPS请求
下载源码.安装Openssl 下载Poco源码 git clone https://github.com/pocoproject/poco.git openssl下载安装: 下载地址:http://s ...
- RestTemplate 发送 Https 请求调用
RestTemplate 发送 Https 请求调用 个人博客:https://jacob.org.cn import org.apache.http.conn.ssl.NoopHostnameVer ...
- 【Spring】Feign客户端发送HTTPS请求绕过认证
1.概述 转载:https://www.jianshu.com/p/ea627708ab52 一个Spring Boot项目,为了使用Harbor仓库,起初通过Spring RestTemplate完 ...
- springboot 使用restTemplate 发送https请求 忽略ssl证书
最近在写接口的时候给对方回推数据,发送https请求的时候遇到这么个报错:javax.net.ssl.SSLHandshakeException: sun.security.validator.Val ...
- 原生html如何发送网络请求,原生JS向服务器发送GET请求
原生JS向服务器发送GET请求 使用Jquery可以很方便的进行GET与POST请求,但是在开发由于一些特殊原因只能使用原生JS进行开发,向服务器发送请求经常会遇见的些问题,本文主要讲解如何使用原生J ...
- C程序|实现使用OPENSSL库 发送HTTPS请求,并接收数据|例如请求12306获取高铁、动车、火车车次信息的方法
C程序|实现使用OPENSSL库 发送HTTPS请求,并接收数据|例如请求12306获取高铁.动车.火车车次信息的方法 1 HTTPS请求 1.1 研究浏览器发送的请求数据 1.2 代码实现 2 分析 ...
- HttpClient发送Https请求报 : unable to find valid certification path to requested target
一.场景 近期在对接第三方接口时,通过HttpClient发送Https请求报 : unable to find valid certification path to requested tar ...
最新文章
- python postmessage_解惑:Postmessage函数模拟鼠标单击指定坐标
- java中顺式和链式_Java单链表顺序和链式实现(数据结构五)
- IM推送保障及网络优化详解(一):如何实现不影响用户体验的后台保活
- Restive.js – 轻松让网站变成响应式和自适应
- Python3 与 C# 并发编程之~ 进程篇
- linux的idle命令,DBA 常用Linux命令
- php 打乱数组的顺序,php数组打乱顺序
- ieee trans pami latex模板
- 用python计算偏导数
- matlab 自制闹钟程序,原生JS写的一个简单闹钟程序
- 不锈钢水处理过滤器在食品领域中的运用
- Deformable Convolutional Networks论文翻译——中文版
- 错误隐藏学习手记(五)
- 剑指政企数智办公市场,通信厂商融云有何看家本领?
- 一句话木马的工作原理
- 电子签名工具 SignatureTool
- nn.Conv1d 理解
- 【一起学UniGUI】--UniGUI的特殊对象(10)
- 【ZZ】Discuz论坛验证码破解
- 用nginx 转发22端口