Utilizzo di CORS e CSRF insieme nell'applicazione ionica

Question

Sto sviluppando un'applicazione Android utilizzando Ionic Framework basata su un sito Web AngularJS che ho sviluppato utilizzando Jhipster. Dato che ho già un codice server in esecuzione nella mia applicazione web, ho scelto Ionic per funzionare come interfaccia utente e server di chiamata quando necessario, ma sto riscontrando alcuni problemi nel mio ambiente di sviluppo.

1. Mentre eseguo la mia applicazione utilizzando Ionic serve, è necessario utilizzare CORS per effettuare richieste al server.
2. mia applicazione web è stato sviluppato utilizzando token CSRF con Primavera di sicurezza

sto usando Apache CORS filter configurato in questo modo:

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, "/*"); 
} 

poi ho usato angular-csrf-cross-domain plugin per aiutare con le richieste del dominio CSRF trasversali:

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

Quindi provo a inviare una richiesta di posta al mio server locale:

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; 
} 

Comunque sto ottenendo questo messaggio nella console firefox:

Cross-origine richiesta bloccato: La stessa politica di origine (stessa politica di origine) impedisce la lettura della risorsa remota in https://localhost:8080/api/register. (Motivo: CORS dirigendo 'Access-Control-Allow-Origin' non è presente)

NUOVE INFORMAZIONI

AngularJs fanno 2 CORS richieste al server, quando presento la forma sto testando: OPZIONI e POST, i risultati delle richieste sono 200 OK e 403 Proibiti. Queste sono le intestazioni dei 2 richieste e risposte:

OPZIONI intestazioni di richiesta:

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 

opzioni di risposta intestazioni:

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 

Inserisci richiesta Testate:

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 Answer Intestazioni:

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

C'è qualcosa che non ho notato? Il Ionic's official blog dice che non dovrei preoccuparmi del problema CORS durante la distribuzione dell'app, tuttavia almeno per i test, ho davvero bisogno di risolvere questo problema. Potresti darmi qualche possibilità?

Answer 1

Quando ho modificato la domanda e ho visto l'intestazione di risposta OPTIONS con la clausola HttpOnly, ho iniziato a credere che il problema fosse con il certificato autofirmato che sto usando nell'ambiente di sviluppo.

Set-Cookie: JSESSIONID = 485A653AEAC8B8756DD3057BBF7FB862; Path = /; Sicuro; HttpSolo

Quindi ho deciso di disattivare il protocollo https nel server Web e ha funzionato correttamente. Grazie per l'aiuto.

Answer 2

La specifica CORS è tutto o niente. Supporta solo *, null o il dominio esatto: http://www.w3.org/TR/cors/#access-control-allow-origin-response-header

Non penso che sia possibile specificare i numeri di porta come valore.

Answer 3

Avete installato e configurato cordova plugin whitelist che è obbligatoria per la query CORS poiché Cordova 5.0.0

installarlo:

cordova plugin add cordova-plugin-whitelist 

configurare config.xml

È possibile mantenere la configurazione corrente con * o modifica per regole più restrittive

aggiungi un criterio html su index.html, devi aggiungere anche una politica. Autorizzare tutto, qui è:

<meta http-equiv="Content-Security-Policy" content="default-src *; 
style-src 'self' 'unsafe-inline'; script-src 'self' 'unsafe-inline' 
'unsafe-eval'" 

Per verificare di aver correttamente installato il plugin, il check nei plug-Cordova con il seguente comando:

cordova plugins 

Vedrai il cordova- plugin-whitelist in esso.

In secondo luogo, potrebbe essere necessario aggiungere withCredentials ai tuoi $ http (e quindi $ risorse) query:

.config(function($httpProvider) { 
     $httpProvider.defaults.withCredentials = true; 
    });