在Ionic应用程序中一起使用CORS和CSRF [英] Using CORS and CSRF together in Ionic app

问题描述

我正在使用 Ionic Framework 开发一个android应用程序，该应用程序基于我使用Jhipster .由于我已经在Web应用程序中运行了服务器代码，因此我选择Ionic作为UI并在需要时调用服务器，但是我的开发环境存在一些问题.

I'm developing a android app using Ionic Framework based in a AngularJS web site I developed using Jhipster. As I already have server code running in my web application, I've choose Ionic to work as UI and call server when needed, but I'm having some issues in my development enviroment.

1. 当我使用Ionic服务运行应用程序时，我需要使用 CORS 向服务器发出请求.
li>
2. 我的Web应用程序是使用带有Spring Security的CSRF令牌开发的

我正在使用通过以下方式配置的 Apache CORS过滤器:

I'm using Apache CORS filter configured this way:

private void initCORSFilter(ServletContext servletContext, EnumSet<DispatcherType> disps) {
    FilterRegistration.Dynamic corsFilter = servletContext.addFilter("cors", new CorsFilter());
    Map<String, String> parameters = new HashMap<>();
    parameters.put("cors.allowed.origins", "http://localhost:3000");
    parameters.put("cors.allowed.headers", "x-auth-token, x-requested-with, Content-Type, Accept, cache-control, x-csrf-token, Origin, Access-Control-Request-Method, Access-Control-Request-Headers");
    parameters.put("cors.allowed.methods", "POST, PUT, GET, DELETE");
    parameters.put("cors.exposed.headers", "Access-Control-Allow-Origin, Access-Control-Allow-Credentials");
    parameters.put("cors.support.credentials", "true");
    corsFilter.setInitParameters(parameters);
    corsFilter.addMappingForUrlPatterns(disps, true, "/*");
}

然后我使用 angular-csrf-cross-domain 插件来帮助处理跨域的csrf请求:

then I used angular-csrf-cross-domain plugin to help with cross domain csrf requests:

.config(function ($urlRouterProvider,csrfCDProvider) {
    $urlRouterProvider.otherwise('/');
    //enable CSRF
    csrfCDProvider.setHeaderName('X-CSRF-TOKEN');
    csrfCDProvider.setCookieName('CSRF-TOKEN');
});

然后，我尝试将发布请求发送到本地服务器:

Then I try send a post request to my local server:

angular.module('consamiApp')
.factory('Register', function ($resource) {
    //globalURL is https://localhost:8080
    return $resource(globalURL+'api/register', {}, {
    });
});
.
.
.
createAccount: function (account, callback) {
    var cb = callback || angular.noop;

    return Register.save(account,
        function () {
            return cb(account);
        },
        function (err) {
            this.logout();
            return cb(err);
    }.bind(this)).$promise;
}

但是我在firefox控制台中收到此消息:

However I'm getting this message in firefox console:

跨源锁定请求:相同的源策略(相同的源策略)阻止读取 https://localhost:8080/中的远程资源api/register .(原因:CORS标题"Access-Control-Allow-Origin"不存在)

Cross-origin locked request: The same origin policy (Same Origin Policy) prevents reading the remote resource in https://localhost:8080/api/register. (Reason: CORS heading 'Access-Control-Allow-Origin' is not present)

新信息

当我提交我正在测试的表单时，AngularJs向服务器发出2个CORS请求:OPTIONS和POST，请求的结果为200 OK和403 Forbidden.这些是2个请求和响应的标头:

AngularJs make 2 CORS requests to the server when I submit the form I'm testing: OPTIONS and POST, the results of the requests are 200 OK and 403 Forbidden. These are the headers of the 2 requests and responses:

OPTIONS请求标头:

OPTIONS Request headers:

Host: localhost:8080
User-Agent: Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:38.0) Gecko/20100101 Firefox/38.0
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
Accept-Language: pt-BR,pt;q=0.8,en-US;q=0.5,en;q=0.3
Accept-Encoding: gzip, deflate
Origin: http://localhost:3000
Access-Control-Request-Method: POST
Access-Control-Request-Headers: content-type
Connection: keep-alive
Pragma: no-cache
Cache-Control: no-cache

OPTIONS答案标题:

OPTIONS Answer headers:

Access-Control-Allow-Origin: http://localhost:3000
Content-Length: 0
Date: Tue, 30 Jun 2015 22:07:58 GMT
Server: Apache-Coyote/1.1
Set-Cookie: JSESSIONID=485A653AEAC8B8756DD3057BBF7FB862; Path=/; Secure; HttpOnly
CSRF-TOKEN=e8b3396c-63b2-47bf-9ad6-c1454628eb3b; Path=/
X-Application-Context: application:dev:8080
access-control-allow-credentials: true
access-control-allow-headers: origin,access-control-request-headers,x-requested-with,x-csrf-token,content-type,access-control-request-method,cache-control,x-auth-token,accept
access-control-allow-methods: POST
access-control-max-age: 1800

POST请求标头:

Host: localhost:8080
User-Agent: Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:38.0) Gecko/20100101 Firefox/38.0
Accept: application/json, text/plain, */*
Accept-Language: pt-BR,pt;q=0.8,en-US;q=0.5,en;q=0.3
Accept-Encoding: gzip, deflate
Content-Type: application/json;charset=utf-8
Referer: http://localhost:3000/
Content-Length: 109
Origin: http://localhost:3000
Cookie: _ga=GA1.1.123103160.1428358695; connect.sid=s%3AwD4KP4WBfhGO0JpFND3LpCzW.augts9fos9NMaZw%2B7XrNuilgaM8ocwSxaEUeDlIaVJ4; JSESSIONID=93200F4F4AFCEB28F10B130841808621
Connection: keep-alive
Pragma: no-cache
Cache-Control: no-cache

POST答案标题:

Content-Type: application/json;charset=UTF-8
Date: Tue, 30 Jun 2015 22:07:58 GMT
Server: Apache-Coyote/1.1
Transfer-Encoding: chunked

有什么我没注意到的东西吗? Ionic的官方博客表示，在部署应用程序时，我不必担心CORS问题，但是在至少对于测试，我真的需要解决这个问题.你能给我任何选择吗?

Is there something I didn't noticed? The Ionic's official blog says I should not worry about CORS issue when deploying the app, however at least for tests, I really need solve this problems. Could you give me any options?

推荐答案

当我编辑问题并看到带有HttpOnly子句的OPTIONS响应标头时，我开始认为问题出在开发环境中使用的自签名证书

When I edited the question and saw the OPTIONS response header with HttpOnly clause, I started believe that the problem was with self signed certificate I'm using in development enviroment.

Set-Cookie:JSESSIONID = 485A653AEAC8B8756DD3057BBF7FB862;路径=/;安全的;HttpOnly

Set-Cookie: JSESSIONID=485A653AEAC8B8756DD3057BBF7FB862; Path=/; Secure; HttpOnly

因此，我决定在Web服务器中禁用https协议，它可以正常工作.感谢您的帮助.

So I've decided disable https protocol in the web server and it worked correctly. Thanks for your help.

这篇关于在Ionic应用程序中一起使用CORS和CSRF的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！