Używanie CORS i CSRF razem w aplikacji jonowej

Question

Zajmuję się tworzeniem aplikacji na Androida za pomocą Ionic Framework opartej na stronie internetowej AngularJS, którą opracowałem przy użyciu Jhipster. Ponieważ mam już uruchomiony kod serwera w mojej aplikacji internetowej, wybrałem Ionic, aby działał jako interfejs użytkownika i dzwonił do serwera w razie potrzeby, ale mam pewne problemy w moim środowisku programistycznym.

1. Po uruchomieniu aplikacji za pomocą usługi Ionic, potrzebuję użyć CORS, aby przesłać żądania do serwera.
2. Moja aplikacja internetowa została stworzona przy użyciu tokena CSRF z wiosennym Bezpieczeństwa

Używam Apache CORS filter skonfigurowany w ten sposób:

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

następnie użyłem angular-csrf-cross-domain wtyczki do pomocy z krzyżem wniosków CSRF domeny:

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

Potem próbuję wysłać żądanie POST do mojego lokalnego serwera:

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

Jednak dostaję ten komunikat w konsoli Firefox:

Cross-pochodzenie zablokowane żądanie: tę samą politykę pochodzenia (sama polityka Origin) uniemożliwia odczyt zdalny zasób w https://localhost:8080/api/register. (Powód: CORS pozycji 'Access-Control-Allow-Origin' nie jest obecny)

NOWE INFORMACJE

angularjs zrobić 2 Cors żądań do serwera, kiedy przesłać formularz jestem testowania: OPCJE i POST, wyniki żądań wynoszą 200 OK i 403 Zabronione. Są to nagłówki 2 żądań i odpowiedzi:

OPCJE Żądanie nagłówki:

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 

opcji odpowiedzi nagłówki:

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 

ofertę kupna nagłówkami:

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 odpowiedzi Nagłówki:

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

Czy jest coś, czego nie zauważyłem? Ionic's official blog mówi, że nie powinienem martwić się o problem CORS podczas wdrażania aplikacji, ale przynajmniej do testów, naprawdę potrzebuję rozwiązać ten problem. Czy możesz dać mi jakieś opcje?

Answer 1

Kiedy edytowałem pytanie i zobaczyłem nagłówek odpowiedzi OPCJE z klauzulą ​​HttpOnly, zacząłem wierzyć, że problem dotyczył samopodpisanego certyfikatu, którego używam w środowisku programistycznym.

Zestaw plików cookie: JSESSIONID = 485A653AEAC8B8756DD3057BBF7FB862; Ścieżka = /; Bezpieczne; HttpOnly

Zdecydowałem się więc wyłączyć protokół https na serwerze sieciowym i działało poprawnie. Dzięki za pomoc.

Answer 2

Specyfikacja CORS to wszystko lub nic. Obsługuje tylko *, null lub dokładną domenę: http://www.w3.org/TR/cors/#access-control-allow-origin-response-header

Nie sądzę, że możesz podać numery portów jako ich wartość.

Answer 3

Czy zainstalowany i skonfigurowany cordova plugin whitelist, który jest obowiązkowy dla Cors zapytania od Cordova 5.0.0

zainstalować go:

cordova plugin add cordova-plugin-whitelist 

configure config.xml

Można zachować bieżąca konfiguracja z * lub zmiana dla bardziej restrykcyjnych reguł

dodać politykę html na index.html, należy również dodać zasadę. Aby autoryzować wszystko, to jest tutaj:

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

Aby sprawdzić, czy masz poprawnie zainstalowane wtyczki, sprawdź ją w swoich wtyczek Cordova za pomocą następującego polecenia:

cordova plugins 

ujrzycie cordova- wtyczka-biała lista w nim.

Po drugie, może trzeba dodać withCredentials do zapytań $ http (a więc $ zasobów):

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