Embed Visualizations with authentication: CORS and preflight

[apiras (Andrea)]

Hi all,
I read numerous post on authenticating in iframe-embedded Kibana dashboard but I did not found the solution of my problem.

I'm using ES and Kibana 7.2.0.
I set server.cors: true in config/kibana.yml.

On the HTML page embedding the iframe, I set the JS:

fetch("https://local._a_site_.com:5601/api/security/v1/login", {
      body: {
        username: "username",
        password: "password",
      },
      credentials: 'include',
      headers: {
        "kbn-version": "7.2.0",
        "kbn-xsrf": "7.2.0",
        'Content-Type': 'application/json'
      },
      method: "POST",
    }).then(function () {
       document.getElementById("place_iframe").innerHTML =
        `my iframe`;
    })
    .catch(function (err) {
      console.log(err);
    });

When the browser loads that page, the OPTIONS preflight request returns a HTTP Status 200 but does not perform the POST

Another indication. If I perform
curl -XPOST -H "Content-Type: application/json" -H "kbn-xsrf: hello" https://local._a_site_.com:5601/api/security/v1/login --data '{"username":"username","password":"password"}' -D -
I get the set-cookie header in the response.

What's my wrong point? Any help?
Thanks in advance

[christophilus (Chris Davies)]

When you say it doesn't perform the POST, what do you mean? Is the .catch firing? What's the error / status code?

[apiras (Andrea)]

When you say it doesn't perform the POST, what do you mean? Is the .catch firing? What's the error / status code?

No POST request is sent to server after this OPTIONS response:

HTTP/1.1 200 OK
content-type: application/json; charset=utf-8
cache-control: no-cache
content-length: 54
Date: Wed, 07 Aug 2019 08:19:16 GMT
Connection: keep-alive

Should it include an access-control-allow-origin: * ?

On Firefox, .catch() gives TypeError: "NetworkError when attempting to fetch resource."
The full console output is:

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://local._a_site_.com:5601/api/security/v1/login. Preformatted text(Reason: CORS header ‘Access-Control-Allow-Origin’ missing).
Error: TypeError: "NetworkError when attempting to fetch resource."
Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://local._a_site_.com:5601/api/security/v1/login. (Reason: CORS request did not succeed)

Ok Chrome, the console output is:

Access to fetch at 'https://local._a_site_.com:5601/api/security/v1/login' from origin 
'http://localhost' has been blocked by CORS policy: Response to preflight request doesn't pass 
access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.
 If an opaque  response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

If I add mode: 'no-cors' to the fetch(), the OPTIONS is not performed and I get this response on POST https://local._ a_site _.com:5601/api/security/v1/login

HTTP/1.1 400 Bad Request
kbn-name: kibana
kbn-xpack-sig: 08589ac9c....
content-type: application/json; charset=utf-8
vary: origin
access-control-allow-origin: http://localhost
access-control-expose-headers: WWW-Authenticate,Server-Authorization
cache-control: no-cache
content-length: 92
connection: close
Date: Wed, 07 Aug 2019 08:35:53 GMT

And it is corrected: the access-control-allow-origin is limited to the origin on localhost.

[apiras (Andrea)]

Again, I added server.cors.origin: ['*'] in kibana.yml but it doesn't solve.

The solution in Login API CORS issue with localhost is not fine for Kibana 7.2.0. Probably now the file to modify could be /usr/share/kibana/src/core/server/http/http_config.js ...

[apiras (Andrea)]

@christophilus, any idea?