Refused to get unsafe header "age" error in Chrome dev tools console

[radiantmediaplayer]

What version of Hls.js are you using?

v1.0.0-rc.5.0.canary.7018

What browser and OS (including versions) are you using?

Chrome Version 89.0.4389.90 (Official Build) (64-bit) Windows 10

Test stream:

https://hls-js-dev.netlify.app/demo/?src=https%3A%2F%2F5b44cf20b0388.streamlock.net%3A8443%2Flive%2Fngrp%3Alive_all%2Fplaylist.m3u8&demoConfig=eyJlbmFibGVTdHJlYW1pbmciOnRydWUsImF1dG9SZWNvdmVyRXJyb3IiOnRydWUsInN0b3BPblN0YWxsIjpmYWxzZSwiZHVtcGZNUDQiOmZhbHNlLCJsZXZlbENhcHBpbmciOi0xLCJsaW1pdE1ldHJpY3MiOi0xfQ==

Checklist

• The issue observed is not already reported by searching on Github under https://github.com/video-dev/hls.js/issues
• The issue occurs in the stable client on https://hls-js.netlify.com/demo and not just on my page

• The issue occurs in the latest client on https://hls-js-dev.netlify.com/demo and not just on my page

• The stream has correct Access-Control-Allow-Origin headers (CORS)
• There are no network errors such as 404s in the browser console when trying to play the stream

Steps to reproduce

Open link above and see Chrome dev tools console

xhr-loader.ts:255 Refused to get unsafe header "age"

Expected behavior

No error log

Actual behavior

Error log. I can see it is supposed to be handled at

hls.js/src/loader/playlist-loader.ts

Line 689 in 25db4d7

// Avoid repeated browser error log `Refused to get unsafe header "age"` when unnecessary or past attempts failed

but it seems there is a loophole where this is still happening. This only happens for live stream, not VOD streams.

[robwalch]

@radiantmediaplayer hls.js now attempts to read the "age" header from m3u8 playlist responses of live streams to determine how long streams have been cached on the edge. This is described as "CDN Tune-In" in the spec: https://tools.ietf.org/html/draft-pantos-hls-rfc8216bis-08#appendix-C

The comment points out that we want to avoid repeating the header request if it errors once. If you see the console error more than once per stream let me know. You can expect to see this error until you add an Access-Control-Expose-Headers: age header to playlist responses to prevent this CORS error.

What I can do is put this check behind the lowLatencyMode option. It's enabled by default in new releases, but you can set it to false in the hls.js config, and in the next release we'll skip CDN Tune-In the "age" header check.

[robwalch]

What I can do is put this check behind the lowLatencyMode option. It's enabled by default in new releases, but you can set it to false in the hls.js config, and in the next release we'll skip CDN Tune-In the "age" header check.

#3685

[radiantmediaplayer]

I do not seem to have write access to video-dev/hls.js to update your PR so I have created a new PR to propose my fix for this issue: #3686.
One may want to read https://trackjs.com/blog/refused-unsafe-header/ for information on the fix in the new PR.

FYI
Allright so in Wowza Streaming Engine, adding CORS Access-Control-Expose-Headers: age can be done with:

/Root/Application/HTTPStreamer cupertinoCORSHeadersEnableAge Boolean true
/Root/Application/HTTPStreamer cupertinoCORSHeadersSetMain String Access-Control-Expose-Headers: Date, Server, Content-Type, Content-Length, Age
/Root/Application/HTTPStreamer cupertinoCORSHeadersRemoveMain String Access-Control-Expose-Headers: Date, Server, Content-Type, Content-Length

Either my PR or the above CORS tuning fix the issue.

[morpig]

Hi,

Can we reopen this issue again? I'm experiencing this exact issue running hls.js on top of jwplayer's v8.20.1.

Exact version or configuration of hls.js is unknown, as I'm using jwplayer's api directly.

I added "access-control-allow-headers: age" to response headers in both playlist & segment download, still showing the error.

During playlist & segment download, when content is raw (fetched directly to origin), there is no age header present. But if response is cached by CDN, then there is the age header.

No public page is available, sorry. But if you need screenshot request/response headers, more than happy to provide it.

[morpig]

Oops, my fault.

It should be access-control-expose-headers instead of access-control-allow-headers. 🤦

[robwalch]

Thanks @morpig,

Prior to #3686 we'd only try to get the age header once and give up if unsuccessful to limit these error logs to just one per stream. The changes were merged because they appeared to prevent this error, but that's not always the case. You can always file a new issue or submit a support request to JWP if you want to make a formal request and get progress updates.

When reporting issues in this project please include reproduction steps using the demo page whenever possible (https://hls-js.netlify.app/demo/).

[robwalch]

Hi @morpig,

I just found that the suggested fix which we implemented detects "age" anywhere in the headers string (so Cache-control: max-age= for example will pass and we'll try to read the age header). This will be fixed in v1.0.1.