javascript - How to make a HTML 5 video tag, bearer authenticated with a WebAPI? - Stack Overflow

admin管理员组

文章数量:1356237

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 pliant:

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?

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 pliant:

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?

• javascript
• angular
• authentication
• asp-web-api
• cors

Share Improve this question Follow asked Sep 11, 2018 at 0:21 Natalie PerretNatalie Perret 9,0771313 gold badges7878 silver badges146146 bronze badges 9

• 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 Commented Sep 11, 2018 at 0:34
• @Kaiido cause in my other requests, there is a header to allow auth: Authorization: Bearer c66b36fe-fcc1-49da-9b42-dac783768a06 – Natalie Perret Commented Sep 11, 2018 at 0:35
• stackoverflow./questions/21484982/… not sure if it's gonna lead me somewhere – Natalie Perret Commented Sep 11, 2018 at 0:38
• @Kaiido says 401 unauthorized =/ – Natalie Perret Commented Sep 11, 2018 at 0:39
• @Kaiido the thing is that the <video> tag does not allow you to specify headers... =/ – Natalie Perret Commented Sep 11, 2018 at 0:41

 |  Show 4 more ments

1 Answer 1

Sorted by: Reset to default 6

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./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);
}

本文标签： javascriptHow to make a HTML 5 video tagbearer authenticated with a WebAPIStack Overflow