Reputation: 9057
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?
Upvotes: 7
Views: 8143
Reputation: 9057
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);
}
Upvotes: 6