Mit CORS und CSRF zusammen in Ionic App

Question

Ich entwickle eine Android-App mit Ionic Framework basierend auf einer AngularJS-Website, die ich mit Jhipster entwickelt. Da ich bereits Servercode in meiner Webanwendung ausgeführt habe, habe ich Ionic gewählt, um als Benutzeroberfläche zu arbeiten und den Server bei Bedarf aufzurufen, aber ich habe einige Probleme in meiner Entwicklungsumgebung.

1. Da ich meine Anwendung mit Ionic dienen, brauche ich CORS, um Anfragen an den Server zu stellen. mit CSRF-Token mit Spring Security
2. wurde meine Web-Anwendung

entwickelt

ich Apache CORS filter mit dieser Art und Weise konfiguriert:

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

dann habe ich angular-csrf-cross-domain Plugin mit Cross-Domain-csrf Anfragen zu helfen:

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

Dann versuche ich eine Post-Anfrage an meinen lokalen Server zu senden:

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

Allerdings erhalte ich diese Meldung in firefox Konsole:

Quer Herkunft gesperrt Anfrage: Die Same Origin Policy (Same Origin Policy) verhindert in https://localhost:8080/api/register die Remote-Ressource zu lesen. (Grund: CORS Überschrift 'Access-Control-Allow-Origin' ist nicht vorhanden)

NEUE INFORMATIONEN

AngularJS macht 2 CORS Anfragen an den Server, wenn ich das Formular I-Tests sind: OPTIONEN und POST, die Ergebnisse der Anfragen sind 200 OK und 403 verboten. Dies sind die Köpfe der zwei Anfragen und Antworten:

OPTIONS Anfrage Header:

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 Antwort-Header:

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 Anfrage Header:

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 Antwort Kopfzeilen:

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

Gibt es etwas, das ich nicht bemerkt habe? Die Ionic's official blog sagt, dass ich mich nicht um CORS Problem bei der Bereitstellung der App kümmern sollte, aber zumindest für Tests, muss ich wirklich diese Probleme lösen. Könnten Sie mir irgendwelche Optionen geben?

Answer 1

Als ich die Frage redigierte und den OPTIONS Antwortheader mit HttpOnly Klausel sah, fing ich an zu glauben, dass das Problem mit selbst signiertem Zertifikat war, das ich in der Entwicklungsumgebung verwende.

Satz-Cookie: JSESSIONID = 485A653AEAC8B8756DD3057BBF7FB862; Pfad = /; Sichern; HttpOnly

Also habe ich beschlossen, deaktivieren Sie https-Protokoll in den Webserver und es hat richtig funktioniert. Danke für Ihre Hilfe.

Answer 2

Die CORS-Spezifikation ist alles oder nichts. Es unterstützt nur *, null oder die genaue Domäne: http://www.w3.org/TR/cors/#access-control-allow-origin-response-header

Ich glaube nicht, dass Sie Portnummern als Wert angeben können.

Answer 3

Haben Sie installiert und konfiguriert cordova plugin whitelist, die für CORS Abfrage obligatorisch ist, da Cordova 5.0.0

installieren:

cordova plugin add cordova-plugin-whitelist 

configure config.xml

Sie halten Ihr aktuelles Setup mit * oder ändern Sie für restriktivere Regeln

fügen Sie eine HTML-Richtlinie auf index.html, Sie sollten auch eine Richtlinie hinzufügen. alles zu autorisieren, hier ist sie:

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

Um sicherzustellen, dass Sie richtig das Plugin installiert haben, überprüfen Sie ihn auf Ihrer cordova Plugins mit dem folgenden Befehl:

cordova plugins 

Sie die cordova- sehen werden Plugin-Whitelist drin.

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