`

使用JSONP完成HTTPS跨域请求

阅读更多
使用JSONP完成HTTPS跨域请求
前提条件
1. 已配置本机java环境
2. 已安装tomcat6.0

第一步   使用HTTPS协议前期准备
进入命令提示符窗口(cmd) 输入以下命令
1. 为服务器生成安全证书   
命令:
Keytool -genkey -v -alias tomcat -keyalg  RSA  -keystore server.keystore
输入新密码:123456
您的名字与姓氏是什么?
  [Unknown]:这里填写服务器所在的域名(如:www.baidu.com 本机为localhost)
您的组织单位名称是什么?
[Unknown]:  ysb
您的组织名称是什么?
[Unknown]:  portal
您所在的城市或区域名称是什么?
[Unknown]:  nj
您所在的州或省份名称是什么?
[Unknown]:  js
该单位的两字母国家代码是什么
[Unknown]:  en
N=localhost, OU=ysb, O=portal, L=js, ST=nj, C=en 正确吗?
  [否]:如果跟你填写的信息一致  则输入 “Y“ 反之则为“N”。

说明: tomcat:别名
RSA:使用的加密方式
server.keystore:生成的服务器证书名(必须以’.keystore’为后缀名)

注意:这样服务器证书就生成了如果使用单向认证,那么下面生成客户端证书的步骤就不用了。如果使用单向认证下面2,3,4步就不用了。

2. 为客户端生成安全证书     
命令:
Keytool -genkey -v -alias mykey  -keyalg RSA  -storetype PKCS12 -keystore client.p12
输入keystore密码:设置密码 如:123456
再次输入新密码:123456
您的名字与姓氏是什么?
  [Unknown]:  localhost
您的组织单位名称是什么?
  [Unknown]:  ysb
您的组织名称是什么?
  [Unknown]:  ysb
您所在的城市或区域名称是什么?
  [Unknown]:  nj
您所在的州或省份名称是什么?
  [Unknown]:  js
该单位的两字母国家代码是什么
  [Unknown]:  en
CN=localhost, OU=ysb, O=ysb, L=nj, ST=js, C=en 正确吗?
  [否]:如果跟你填写的信息一致  则输入 “Y“ 反之则为“N”。

说明:mykey:别名
PKCS12:以PKCS121格式生成文件
client.p12:生成的客户端证书文件
localhost:这里填本地IP或者localhost

3. 将证书导出到证书文件。
命令:
Keytool -export -v -alias mykey -keystore client.p12 -storetype PKCS12 -storepass password -rfc -file client.cer

说明: password:为客户端生成证书的证书密码。
client.cer:导出后缀名为‘.cer’的证书文件(方便将客户端证书导入到服务器添加信任)

4. 通过以上命令,客户端证书就被我们导出到“client.cer”文件了。下一步,是将该文件导入到服务器的证书库,添加为一个信任证书:
Keytool import -v -file client.cer -keystore server.keystore
输入keystore密码:客户端证书密码
再次输入新密码:重复
所有者:CN=localhost, OU=ysb, O=ysb, L=nj, ST=js, C=en
签发人:CN=localhost, OU=ysb, O=ysb, L=nj, ST=js, C=en
序列号:4d9d7980
有效期: Thu Apr 07 16:44:48 CST 2011 至Wed Jul 06 16:44:48 CST 2011
证书指纹:
        MD5:72:2D:DD:20:2A:CA:3B:D0:E8:E3:5E:BF:90:FE:D0:83
        SHA1:77:9E:35:98:83:C8:F4:64:7E:ED:A2:91:C7:4A:27:0A:C0:18:BE:4D
        签名算法名称:SHA1withRSA
        版本: 3
信任这个认证? [否]:  y
认证已添加至keystore中
正在存储 server.keystore]

说明:
client.cer:导出后缀名为‘.cer’的证书文件(方便将客户端证书导入到服务器添加信任)
client.cer:转换后的客户端证书文件
server.keystore:服务器证书文件

注意:如果是单向认证则只需生成服务器证书即可

5. 打开Tomcat根目录下的/conf/server.xml,找到如下配置段
<Connector port="8443" protocol="HTTP/1.1" SSLEnabled="true"
    maxThreads="150" scheme="https" secure="true"
    clientAuth="false" sslProtocol="TLS"
/>

注意:属性clientAuth的属性值 如果是双向认证则为true如果是单向认证则我false 默认为false

添加属性
  单向认证:
      keystoreFile="tomcat.keystore" keystorePass="password"
      双向认证:
keystoreFile="tomcat.keystore" keystorePass="password"
  truststoreFile="tomcat.keystore" truststorePass="password"

注意:双向认证双击client.p12文件按提示将证书导入浏览器

完成以上步骤就可以使用HTTPS协议了
测试:将访问项目的地址的协议手动改成HTTPS,端口改成8443。

说明:8443:在tomcat里https默认端口是8443( 可以自己修改)
  tomcat.keystore:生成的服务器证书存放路径
  password:为服务器证书的密码

第二步   使用JSONP完成跨域访问

使用Jquery的jQuery.getJSON(url, [data], [callback])函数发送跨域请求

例:
使用http协议时 请求为:
$.post("http://localhost:8080/rcs/userAction!login.action",{account:cfg.account,password:cfg.password},cfg.callback,"json");

使用jsonp发送https协议请求
$.getJSON("https://localhost:8443/rcs/userAction!login.action?callback=?",{account:cfg.account,password:cfg.password},cfg.callback);

注意:使用jQuery.getJSON(url, [data], [callback])发送跨域请求后,在返回json数据时必须以callback({“result”:”result”})这样的格式才能被解析,所以必须在后台手动编码将数据组装成这样的格式
如:
response.setContentType("application/json;charset=UTF-8");
String callback = request.getparmeter(“callback”);
               PrintWriter out1 = response.getWriter();
           out1.print(callback + "({\"result\":\"" + result + "\"})");
格式为:jsonp1302167636138({"result":"0"})

说明:jQuery.getJSON(url, [data], [callback]):在 jQuery  中,您可以通过使用JSONP形式的回调函数来加载其他网域的JSON数据,如 "myurl?callback=?"。jQuery 将自动替换 ? 为正确的函数名,以执行回调函数。
Callback:为请求时jsonp的名如:callback=?
jsonp1302167636138:为jsonp自动生成的用于替换“?”的。


第三步   自动将证书导入浏览器

在第一次使用jsonp发送HTTPS协议请求时IE浏览器会提示导入证书,但是火狐和其它浏览器会直接请求失败不会给予提示,所以需要在第一次发送请求之前就将证书导入到浏览器。

参考实现方式:
在第一次访问项目时在请求入口(如:struts2的拦截器)将该请求重定向为HTTPS协议请求,这样在第一次访问时就会提示导入证书,重定向为HTTPS请求后浏览器会一直使用这协议发送请求,这样会影响系统的运行效率,所以我们在完成证书导入后还需要将请求协议重定向回HTTP。
如:
String reqUrl = request.getRequestURL();
If(reqUrl.indexOf(“http”)>=0 && requrl.indexOf(“index.action”)>=0){
response.sendRedirect(“https://localhost:8443/rcs/index.action”);
}else{
If(reqUrl.indexOf(“https”)>=0 && requrl.indexOf(“login.action”)>=0){
response.sendRedirect(“http://localhost:8080/rcs/login.action”);
}
}
注意:重定向时的请求不能是ajax的(如:userAction!login.action)。

这样在第一次访问项目时浏览器就会提示添加信任。
步骤如下:
火狐浏览器:
   不能贴图片,请查看附件
IE浏览器:
   不能贴图片,请查看附件
   

分享到:
评论

相关推荐

    使用JSONP完成HTTP和HTTPS之间的跨域访问

    知识点三: 使用 JSONP 完成 HTTPS 跨域请求的前提条件 使用 JSONP 完成 HTTPS 跨域请求需要满足以下前提条件: 1. 已配置本机 Java 环境 2. 已安装 Tomcat 6.0 知识点四: 生成服务器证书 使用 Keytool 工具生成...

    利用JQuery jsonp实现Ajax跨域请求json数据

    本篇文章将详细讲解如何利用jQuery的jsonp方法实现Ajax跨域请求,以及如何在服务器端使用.Net的*.handler和WebService来返回JSON数据。 首先,理解JSONP的基本原理。JSONP是一种非官方的协议,通过动态创建`...

    PHP AJAX JSONP实现跨域请求使用范例_ajax如何解决跨域请求

    在实际应用中,我们可以使用 JSONP 来实现跨域请求,以便从其他域名下的服务器获取数据。但是,我们需要注意的是,使用 JSONP 会存在安全风险,因为它可以被恶意攻击所利用。 在使用 JSONP 时,我们需要注意以下几...

    html通过 ajax jsonp跨域请求接收和传送数据

    **AJAX和JSONP跨域请求的实现过程** 1. **AJAX跨域**: 通常,AJAX请求受到同源策略限制。为实现跨域,我们可以使用CORS(Cross-Origin Resource Sharing)机制。服务器需要在响应头中添加`Access-Control-Allow-...

    jsonpajax跨域请求

    "jsonp跨域请求"可能是服务器返回的示例数据,模拟了JSONP的跨域请求过程。 总结,JSONP和CORS是解决JavaScript跨域问题的两种主要方法,它们各有优缺点,适用于不同的场景。JSONP简单易用,但安全性较低;CORS则更...

    ajax跨域请求jsonp前后台代码

    基于ajax方式的跨域请求jsonp的前后台代码

    Ajax跨域请求解决方案-JSONP

    然而,Ajax技术在实现动态网页交互时常常需要跨越这个限制,这时就引入了JSONP(JSON with Padding)作为跨域请求的一种解决方案。本文将详细介绍JSONP的工作原理以及如何在ASP.NET网站开发中应用JSONP解决Ajax跨域...

    使用Jsonp方式跨域获取json

    JSONP(JSON with Padding)是一种跨域数据交互协议,它利用了`&lt;script&gt;`标签可以跨域请求资源的特性来实现数据的交换。在Web开发中,由于浏览器的同源策略限制,JavaScript通常无法直接访问不同源的资源,但JSONP...

    JSONP解决跨域问题

    JSONP(JSON with Padding)是一种跨域数据交互协议,它利用了`&lt;script&gt;`标签可以跨域请求资源的特性,为了解决JavaScript在浏览器端由于同源策略限制无法直接访问不同源的HTTP请求的问题。在本场景中,前端使用...

    jsonp跨域请求数据实现手机号码查询实例分析.docx

    - **发起请求**:使用jQuery的`$.ajax`方法发送GET请求,并设置`dataType`为`"jsonp"`以支持JSONP方式的跨域请求。 - **参数设置**:URL中包含待查询的电话号码,并指定`jsonp`参数为`callback`,这是服务器端期望...

    跨域访问解决方法-jsonp

    由于浏览器允许不同源的`&lt;script&gt;`标签加载和执行,开发者可以利用这一点来实现跨域请求。 ### JSONP工作原理 1. **客户端(浏览器)**:在JavaScript中,我们创建一个`&lt;script&gt;`元素,并设置其`src`属性为服务器...

    jsonp解决跨域.docx

    jsonp解决跨域 JsonP(JSON with Padding)是一种常用的解决跨域请求的技术。在本文中,我们将详细介绍 JsonP 的原理、作用、优缺点和使用场景。...JsonP 的使用场景非常广泛,例如跨域请求数据、实时更新数据等。

    ajax跨域CORS方案 JSONP跨域请求方案.zip

    在Web开发中,跨域(Cross-Origin)是一个常见的问题,特别是在使用Ajax进行异步数据交互时。跨域限制是浏览器为了安全原因而设置的一种机制,防止恶意网站通过脚本访问其他站点的数据。本文将深入探讨两种主要的...

    跨域访问禁止以及使用JSONP实现跨域的示例

    在两个Tomcat服务器之间进行跨域访问演示,我们可以设置CORS(Cross-Origin Resource Sharing)头信息,允许特定的跨域请求。在Tomcat的配置文件(如server.xml)中,我们可以通过添加过滤器或在Servlet中设置响应头...

    js跨域解决方案

    同时,还可以设置`Access-Control-Allow-Methods`、`Access-Control-Allow-Headers`等头信息,以控制跨域请求的类型和额外头信息。 3. **代理服务器**:在客户端和目标服务器之间设置一个代理服务器,所有跨域请求...

    ajax跨域请求

    同时,通过获取`jsonpCallback`参数并将其与JSON数据一起包装成一个函数调用的形式返回给客户端,从而实现JSONP的跨域请求。 ```java @RequestMapping("/selectApplyPeoples") public void insertScore...

    jsonp跨域请求

    JSONP(JSON with Padding)是一种常见的解决JavaScript跨域问题的技术。由于浏览器的同源策略限制,JavaScript通常不能向不同源的服务器...了解和掌握JSONP有助于理解跨域请求的原理,为解决实际问题提供更多的选择。

    jsonp json ajax跨域调用

    **JSONP**(JSON with Padding)是在解决跨域问题中出现的一种技术手段,尽管它并不属于官方标准,但由于其简单易用,仍然被广泛采用。JSONP的工作原理是利用`&lt;script&gt;`标签不受同源策略限制的特点,通过动态创建并...

Global site tag (gtag.js) - Google Analytics