How to make a HTML 5 video tag, bearer authenticated with a WebAPI?

Question

I have a HTML 5 video tag pointing to my ASP.NET WebAPI which requires bearer authentication, most of my requests towards my API look like that:

GET http://localhost:29080/api/v1/users/me HTTP/1.1
Host: localhost:29080
Connection: keep-alive
Accept: application/json, text/plain, */*
Origin: http://localhost:4200
Authorization: Bearer c66b36fe-fcc1-49da-9b42-dac783768a06
User-Agent: Mozilla/5.0 (Windows NT 6.1; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/65.0.3325.181 Safari/537.36
Referer: http://localhost:4200/
Accept-Encoding: gzip, deflate, br
Accept-Language: en-US,en;q=0.9,fr;q=0.8

Since the application is hosted on a different port (and eventually a different address) it is subject to CORS. I've already setup my WebAPI to be compliant:

config.EnableCors(new EnableCorsAttribute("*", "*", "*"));

Sadly my HTML 5 video tag does not seem work out with that setup.

<video 
      crossorigin="use-credentials"
      src="http://localhost:29080/api/v1/entities/470/presentation-video">

I end up with:

Failed to load http://localhost:29080/api/v1/entities/470/presentation-video: 
The value of the 'Access-Control-Allow-Origin' header in the response must 
not be the wildcard '*' when the request's credentials mode is 'include'. 
Origin 'http://localhost:4200' is therefore not allowed access.

In addition to the:

GET http://localhost:29080/api/v1/entities/470/presentation-video 401 (Unauthorized)

I really don't know what to think of, I've read somewhere that the bearer could be passed as query string like

But I could not manage to make it work...

Any idea?

The error says that since you ask crossOrigin credentials, allow wildcard header in the response is invalid. Maybe you'd get luckier with anonymous, but I don't know how it relates to your bearer thing. — Kaiido, Sep 11 '18 at 00:34
@Kaiido cause in my other requests, there is a header to allow auth: Authorization: Bearer c66b36fe-fcc1-49da-9b42-dac783768a06 — Natalie Perret, Sep 11 '18 at 00:35
https://stackoverflow.com/questions/21484982/asp-net-web-api-how-to-pass-an-access-token-oauth-2-0-using-url-parameter not sure if it's gonna lead me somewhere — Natalie Perret, Sep 11 '18 at 00:38
No, I have to admit I am not entirely certain how to do it, but from my understanding, you'd have to request the credentials separately, in the form of a cookie, then `use-credentials` should take care of providing these credentials along the requests. How it is done exactly, I'm not sure. — Kaiido, Sep 11 '18 at 00:43
that's what I thought to, actually another trickery is to pass as a query string and modify the webapi to transform the query string into the appropriate header in the begin request handler in the global.asax... — Natalie Perret, Sep 11 '18 at 00:44
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/179778/discussion-between-kaiido-and-ehouarn-perret). — Kaiido, Sep 11 '18 at 00:45
Follow-up: https://chat.stackoverflow.com/rooms/179778/discussion-between-kaiido-and-ehouarn-perret — Natalie Perret, Sep 11 '18 at 00:51

score 6 · Accepted Answer · answered Sep 11 '18 at 01:14

Alright so the solution for me was:

In my front-end app:

<video controls crossorigin="anonymous" src="..." </video>

and setup the src of my video such as (example): http://localhost:29080/api/v1/entities/470/presentation-video?access_token=c66b36fe-fcc1-49da-9b42-dac783768a06

Since the WebAPI does not really check query parameters (even though they should...) we need a way to convert the access_token to a header when receiving it such as described in that answer here: https://stackoverflow.com/a/25525470/4636721

public void ConfigureAuth(IAppBuilder app)
{
    app.Use(async (context, next) =>
    {
        if (context.Request.QueryString.HasValue)
        {
            if (string.IsNullOrWhiteSpace(context.Request.Headers.Get("Authorization")))
            {
                var queryString = HttpUtility.ParseQueryString(context.Request.QueryString.Value);
                string token = queryString.Get("access_token");

                if (!string.IsNullOrWhiteSpace(token))
                {
                    context.Request.Headers.Add("Authorization", new[] { string.Format("Bearer {0}", token) });
                }
            }
        }

        await next.Invoke();
    });
    // Enable the application to use bearer tokens to authenticate users
    app.UseOAuthBearerTokens(OAuthOptions);
}

How to make a HTML 5 video tag, bearer authenticated with a WebAPI?

1 Answers1