1

I use Docker & Traefik to manage a ReactJS app calling an ElasticSearch API.

Here is my elasticsearch.yml config :

cluster.name: "docker-cluster"
network.host: 0.0.0.0
http.cors.enabled : true
http.cors.allow-origin: "*"
http.cors.allow-methods: OPTIONS, HEAD, GET, POST, PUT, DELETE
http.cors.allow-headers: X-Requested-With,X-Auth-Token,Content-Type,Content-Length
http.cors.allow-credentials: true
xpack.security.enabled: true
xpack.security.authc.api_key.enabled: true

And here the entry in docker-compose for my Elasticsearch service :

elasticsearch:
    image: docker.elastic.co/elasticsearch/elasticsearch:7.12.0
    restart: always
    volumes:
      - ${DATA_FOLDER_ELASTICHSEARCH}:/usr/share/elasticsearch/data
      - ./infra/elasticsearch/elasticsearch.yml:/usr/share/elasticsearch/config/elasticsearch.yml
    environment:
      - discovery.type=single-node      
    labels:
      - "traefik.enable=true"
      - "traefik.http.routers.elasticsearch.rule=Host(`myElastic.domain.com`)"
      - "traefik.http.routers.elasticsearch.entrypoints=websecure"
      - "traefik.http.routers.elasticsearch.middlewares=testHeader"   
      - "traefik.http.middlewares.testHeader.headers.accesscontrolallowmethods=GET,OPTIONS,POST"
      - "traefik.http.middlewares.testHeader.headers.accesscontrolalloworiginlist=*"
      - "traefik.http.middlewares.testHeader.headers.accesscontrolmaxage=100"
      - "traefik.http.middlewares.testHeader.headers.addvaryheader=true"
    networks:
      - myNetwork

If I call my ElasticSearch API (like a simple POST on /myIndex/_search using Postman for example, I have my response headers :

Access-Control-Allow-Origin : *
Vary : Origin

But I still have the CORS issue on my React app using fetch (for now I use directly the ElasticSearch API from my react).

Do I need to change anything from the fetch api ?

EDIT

Looking at CORS: Cannot use wildcard in Access-Control-Allow-Origin when credentials flag is true, it seems I can't use * to define my allowed domains, so I put :

- "traefik.http.middlewares.testHeader.headers.accesscontrolalloworiginlist=https://reactApp.domain.com"

But no success ... in my Chrome console, I have this message :

preflight wildcard origin not allowed
Vincent Decaux
  • 9,857
  • 6
  • 56
  • 84
  • Assuming your react app is exposed to http credentials because of `http.cors.allow-credentials: true`, did you check that requests send by the the app [allow for cross site access control](https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/withCredentials)? – Jeroen van der Laan Mar 24 '21 at 20:25
  • Doesn't change unfortunatly :( – Vincent Decaux Mar 24 '21 at 21:34

1 Answers1

0

@vincent-decaux

A few months late but if you, or anyone, needs to get this working, I was able to get Traefik2 + authorization headers working with a "wildcard" for allowed origin by including this label:

traefik.http.middlewares.cors-headers.headers.accessControlAllowOriginListRegex=(.*?)

See: https://doc.traefik.io/traefik/middlewares/headers/#accesscontrolalloworiginlistregex

Instead of using the accessControlAllowOrigin="hostname", it allows a regex expression for evaluating a valid origin. Not a good idea for a production environment, if you can avoid it, but great for our development environment where the developers might be tinkering with our UI locally against our dev/test environment "public" API. For production I have a regex that restricts allowed origins to a small set of acceptable domains/hosts.

Blastomatic
  • 130
  • 6
  • Why this is not good for production? – Yacine Lazaar Sep 28 '21 at 19:31
  • @YacineLazaar I should have qualified that "not a good idea...". It depends on the use-case. In my implementation, we're serving a microservice API back-end that's only intended to be accessed by our client front-end and uses cookies for auth. With a wildcard CORS allowed origin and Allow-Credentials true, a party could do man in the middle exploits to steal creds and such. [This article](https://portswigger.net/research/exploiting-cors-misconfigurations-for-bitcoins-and-bounties) helps explain a variety of CORS exploits. Your average website is fine with the wildcard origin. – Blastomatic Nov 18 '21 at 02:08