HTML5 Application Cache Manifest - index fallback without catchall - html

I'm delivering a manifest for my app that looks something like this
CACHE MANIFEST
#1359542586541
NETWORK:
*
FALLBACK:
/ /index.offline
When offline, it works correctly by returning index.offline on the index path, however it has the side-effect of returning index.offline for every other resource as well. i.e. The / pattern is acting as a catchall.
Is there any way of matching the index page without everything else so only the homepage uses the fallback?
One irritation this causes is that it seems to return index.offline whenever a request returns a 500 status

No, the first URL in a FALLBACK is a prefix match. The only way is to always use the explicit index page rather than rely on default documents:
FALLBACK:
/index.html /index.offline
There was a discussion of the behaviour for 500 errors on HTML5 Help mailing list last February including several responses by the spec editor, this message specifically talks about FALLBACK sections.

Related

ERR_HTTP2_PROTOCOL_ERROR in Chrome. Works in Firefox [duplicate]

I'm currently working on a website, which triggers a net::ERR_HTTP2_PROTOCOL_ERROR 200 error on Google Chrome. I'm not sure exactly what can provoke this error, I just noticed it pops out only when accessing the website in HTTPS. I can't be 100% sure it is related, but it looks like it prevents JavaScript to be executed properly.
For instance, the following scenario happens :
I'm accessing the website in HTTPS
My Twitter feed integrated via https://publish.twitter.com isn't loaded at all
I can notice in the console the ERR_HTTP2_PROTOCOL_ERROR
If I remove the code to load the Twitter feed, the error remains
If I access the website in HTTP, the Twitter feed appears and the error disappears
Google Chrome is the only web browser triggering the error: it works well on both Edge and Firefox.
(NB: I tried with Safari, and I have a similar kcferrordomaincfnetwork 303 error)
I was wondering if it could be related to the header returned by the server since there is this '200' mention in the error, and a 404 / 500 page isn't triggering anything.
Thing is the error isn't documented at all. Google search gives me very few results. Moreover, I noticed it appears on very recent Google Chrome releases; the error doesn't pop on v.64.X, but it does on v.75+ (regardless of the OS; I'm working on Mac tho).
Might be related to Website OK on Firefox but not on Safari (kCFErrorDomainCFNetwork error 303) neither Chrome (net::ERR_SPDY_PROTOCOL_ERROR)
Findings from further investigations are the following:
error doesn't pop on the exact same page if server returns 404 instead of 2XX
error doesn't pop on local with a HTTPS certificate
error pops on a different server (both are OVH's), which uses a different certificate
error pops no matter what PHP version is used, from 5.6 to 7.3 (framework used : Cakephp 2.10)
As requested, below is the returned header for the failing ressource, which is the whole web page. Even if the error is triggering on each page having a HTTP header 200, those pages are always loading on client's browser, but sometimes an element is missing (in my exemple, the external Twitter feed). Every other asset on the Network tab has a success return, except the whole document itself.
Google Chrome header (with error):
Firefox header (without error):
A curl --head --http2 request in console returns the following success:
HTTP/2 200
date: Fri, 04 Oct 2019 08:04:51 GMT
content-type: text/html; charset=UTF-8
content-length: 127089
set-cookie: SERVERID31396=2341116; path=/; max-age=900
server: Apache
x-powered-by: PHP/7.2
set-cookie: xxxxx=0919c5563fc87d601ab99e2f85d4217d; expires=Fri, 04-Oct-2019 12:04:51 GMT; Max-Age=14400; path=/; secure; HttpOnly
vary: Accept-Encoding
Trying to go deeper with the chrome://net-export/ and https://netlog-viewer.appspot.com tools is telling me the request ends with a RST_STREAM :
t=123354 [st=5170] HTTP2_SESSION_RECV_RST_STREAM
--> error_code = "2 (INTERNAL_ERROR)"
--> stream_id = 1
For what I read in this other post, "In HTTP/2, if the client wants to abort the request, it sends a RST_STREAM. When the server receives a RST_STREAM, it will stop sending DATA frames to the client, thereby stopping the response (or the download). The connection is still usable for other requests, and requests/responses that were concurrent with the one that has been aborted may continue to progress.
[...]
It is possible that by the time the RST_STREAM travels from the client to the server, the whole content of the request is in transit and will arrive to the client, which will discard it. However, for large response contents, sending a RST_STREAM may have a good chance to arrive to the server before the whole response content is sent, and therefore will save bandwidth."
The described behavior is the same as the one I can observe. But that would mean the browser is the culprit, and then I wouldn't understand why it happens on two identical pages with one having a 200 header and the other a 404 (same goes if I disable JS).
In my case it was - no disk space left on the web server.
For several weeks I was also annoyed by this "bug":
net :: ERR_HTTP2_PROTOCOL_ERROR 200
In my case, it occurred on images generated by PHP.
It was at header() level, and on this one in particular:
header ('Content-Length:'. Filesize($cache_file));
It did obviously not return the exact size, so I deleted it and everything works fine now.
So Chrome checks the accuracy of the data transmitted via the headers, and if it does not correspond, it fails.
EDIT
I found why content-length via filesize was being miscalculated: the GZIP compression is active on the PHP files, so excluding the file in question will fix the problem. Put this code in the .htaccess:
SetEnvIfNoCase Request_URI ^ / thumb.php no-gzip -vary
It works and we keep the header Content-length.
I am finally able to solve this error after researching some things I thought is causing the error for 24 errors. I visited all the pages across the web. And I am happy to say that I have found the solution.
If you are using NGINX, then set gzip to off and add proxy_max_temp_file_size 0; in the server block like I have shown below.
server {
...
...
gzip off;
proxy_max_temp_file_size 0;
location / {
proxy_pass http://127.0.0.1:3000/;
....
Why? Because what actually happening was all the contents were being compressed twice and we don't want that, right?!
The fix for me was setting minBytesPerSecond in IIS to 0. This setting can be found in system.applicationHost/webLimits in IIS's Configuration Editor. By default it's set to 240.
It turns out that some web servers will cut the connection to a client if the server's data throughput to the client passes below a certain limit. This is to protect against "slow drip" denial of service attacks. However, this limit can also be triggered in cases where an innocent user requests many resources all at once (such as lots of images on a single page), and the server is forced to ration the bandwidth for each request so much that it causes one or more requests to drop below the throughput limit, which causes the server to cut the connection and shows up as net::ERR_HTTP2_PROTOCOL_ERROR in Chrome.
For example, if you request 11 GIF images all at once, and each individual GIF is 10 megabytes (11 * 10 = 110 megabytes total), and the server is only able to serve at 100 megabytes per second (per thread), the server will have to slow the throughput on the last GIF image until the first 10 are finished. If the throughput on that last GIF is slowed so much that it drops below the minBytesPerSecond limit, it will cut the connection.
I was able to resolve this by following these steps:
I used Chrome's Network Log Export tool at chrome://net-export/ to see exactly what was behind the ERR_HTTP2_PROTOCOL_ERROR error. I started the log, reproduced the error, and stopped the log.
I imported the log into the log viewer at https://netlog-viewer.appspot.com/#import, and saw an interesting event titled HTTP2_SESSION_RECV_RST_STREAM, with error code 8 (CANCEL).
I did some Googling on the term "RST_STREAM" (which appears to be an abbreviated form of "reset stream") and found a discussion between some people talking about an IIS setting called minBytesPerSecond (discussion here: https://social.msdn.microsoft.com/Forums/en-US/aeb01c46-bcdf-40ed-a417-8a3558221137). I also found another discussion where there was some debate about whether minBytesPerSecond was intended to protect against slow HTTP DoS (slow drip) attacks (discussion here: IIS 8.5 low minBytesPerSecond not working against slow HTTP POST). In any case, I learned that IIS uses minBytesPerSecond to determine whether to cancel a connection if it cannot sustain the minimum throughput. This is relevant in cases where a single user makes many requests to a large resource, and each new connection ends up starving all the other unfinished ones, to the point where some may fall below the minBytesPerSecond threshold.
To confirm that the server was canceling requests due to a minBytesPerSecond error, I checked my server's HTTPERR log at c:\windows\system32\logfiles\httperr. Sure enough, I opened the file and did a text search for "MinBytesPerSecond" and there were tons of entries for it.
So after I changed the minBytesPerSecond to 0, I was no longer able to reproduce the ERR_HTTP2_PROTOCOL_ERROR error. So, it appears that the ERR_HTTP2_PROTOCOL_ERROR error was being caused by my server (IIS) canceling the request because the throughput rate from my server fell below the minBytesPerSecond threshold.
So for all you reading this right now, if you're not using IIS, maybe there is a similar setting related to minimum throughput rate you can play with to see if it gets rid of the ERR_HTTP2_PROTOCOL_ERROR error.
I experienced a similar problem, I was getting ERR_HTTP2_PROTOCOL_ERROR on one of the HTTP GET requests.
I noticed that the Chrome update was pending, so I updated the Chrome browser to the latest version and the error was gone next time when I relaunched the browser.
I encountered this because the http2 server closed the connection when sending a big response to the Chrome.
Why?
Because it is just a setting of the http2 server, named WriteTimeout.
I had this problem when having a Nginx server that exposing the node-js application to the external world. The Nginx made the file (css, js, ...) compressed with gzip and with Chrome it looked like the same.
The problem solved when we found that the node-js server is also compressed the content with gzip. In someway, this double compressing leading to this problem. Canceling node-js compression solved the issue.
I didn't figure out what exactly was happening, but I found a solution.
The CDN feature of OVH was the culprit. I had it installed on my host service but disabled for my domain because I didn't need it.
Somehow, when I enable it, everything works.
I think it forces Apache to use the HTTP2 protocol, but what I don't understand is that there indeed was an HTTP2 mention in each of my headers, which I presume means the server was answering using the right protocol.
So the solution for my very particular case was to enable the CDN option on all concerned domains.
If anyone understands better what could have happened here, feel free to share explanations.
I faced this error several times and, it was due to transferring large resources(larger than 3MB) from server to client.
This error is currently being fixed: https://chromium-review.googlesource.com/c/chromium/src/+/2001234
But it helped me, changing nginx settings:
turning on gzip;
add_header 'Cache-Control' 'no-store, no-cache, must-revalidate, proxy-revalidate, max-age=0';
expires off;
In my case, Nginx acts as a reverse proxy for Node.js application.
We experienced this problem on pages with long Base64 strings. The problem occurs because we use CloudFlare.
Details: https://community.cloudflare.com/t/err-http2-protocol-error/119619.
Key section from the forum post:
After further testing on Incognito tabs on multiple browsers, then
doing the changes on the code from a BASE64 to a real .png image, the
issue never happened again, in ANY browser. The .png had around 500kb
before becoming a base64,so CloudFlare has issues with huge lines of
text on same line (since base64 is a long string) as a proxy between
the domain and the heroku. As mentioned before, directly hitting
Heroku url also never happened the issue.
The temporary hack is to disable HTTP/2 on CloudFlare.
Hope someone else can produce a better solution that doesn't require disabling HTTP/2 on CloudFlare.
In our case, the reason was invalid header.
As mentioned in Edit 4:
take the logs
in the viewer choose Events
chose HTTP2_SESSION
Look for something similar:
HTTP2_SESSION_RECV_INVALID_HEADER
--> error = "Invalid character in header name."
--> header_name = "charset=utf-8"
By default nginx limits upload size to 1MB.
With client_max_body_size you can set your own limit, as in
location /uploads {
...
client_max_body_size 100M;
}
You can set this setting also on the http or server block instead (See here).
This fixed my issue with net::ERR_HTTP2_PROTOCOL_ERROR
Just posting here to let people know that ERR_HTTP2_PROTOCOL_ERROR in Chrome can also be caused by an unexpected response to a CORS request.
In our case, the OPTIONS request was successful, but the following PUT that should upload an image to our infrastructure was denied with a 410 (because of a missing configuration allowing uploads) resulting in Chrome issuing a ERR_HTTP2_PROTOCOL_ERROR.
When checking in Firefox, the error message was much more helpful:
Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://www.[...] (Reason: CORS header ‘Access-Control-Allow-Origin’ missing). Status code: 410.
My recommendation would be to check an alternative browser in this case.
I'm not convinced this was the issue but through cPanel I'd noticed the PHP version was on 5.6 and changing it to 7.3 seemed to fix it. This was for a WordPress site. I noticed I could access images and generic PHP files but loading WordPress itself caused the error.
Seems like many issues may cause ERR_HTTP2_PROTOCOL_ERROR: in my case it was a minor syntax error in a php-generated header, Content-Type : text/plain . You might notice the space before the colon... that was it. Works no problem when the colon is right next to the header name like Content-Type: text/plain. Only took a million hours to figure out... The error happens with Chrome only, Firefox loaded the object without complaint.
If simply restarting e.g., Chrome Canary, with a fresh profile fixes the problem, then one surely
is the "victim" of a failed Chrome Variation! Yes, there are ways to opt out of being a Guinea pig in Chrome's field testing.
In my case
header params can not set null or empty string
{
'Authorization': Authorization //Authorization can't use null or ''
}
I got the same issue (asp, c# - HttpPostedFileBase) when posting a file that was larger than 1MB (even though application doesn't have any limitation for file size), for me the simplification of model class helped. If you got this issue, try to remove some parts of the model, and see if it will help in any way. Sounds strange, but worked for me.
I have been experiencing this problem for the last week now as I've been trying to send DELETE requests to my PHP server through AJAX. I recently upgraded my hosting plan where I now have an SSL Certificate on my host which stores the PHP and JS files. Since adding an SSL Certificate I no longer experience this issue. Hoping this helps with this strange error.
I also faced this error and I believe there can be multiple reasons behind it. Mine was, ARR was getting timed-out.
In my case, browser was making a request to a reverse proxy site where I have set my redirection rules and that proxy site is eventually requesting the actual site. Now for huge data it was taking more than 2 minutes 5 seconds and Application Request Routing timeout for my server was set to 2 minutes. I fixed this by increasing the ARR timeout by below steps:
1. Go to IIS
2. Click on server name
3. Click on Application Request Routing Cache in the middle pane
4. Click Server Proxy settings in right pane
5. Increase the timeout
6. Click Apply
My team saw this on a single javascript file we were serving up. Every other file worked fine. We switched from http2 back to http1.1 and then either net::ERR_INCOMPLETE_CHUNKED_ENCODING or ERR_CONTENT_LENGTH_MISMATCH. We ultimately discovered that there was a corporate filter (Trustwave) that was erroneously detecting an "infoleak" (we suspect it detected something in our file/filename that resembled a social security number). Getting corporate to tweak this filter resolved our issues.
For my situation this error was caused by having circular references in json sent from the server when using an ORM for parent/child relationships. So the quick and easy solution was
JsonConvert.SerializeObject(myObject, new JsonSerializerSettings { ReferenceLoopHandling = ReferenceLoopHandling.Ignore })
The better solution is to create DTOs that do not contain the references on both sides (parent/child).
I had another case that caused an ERR_HTTP2_PROTOCOL_ERROR that hasn't been mentioned here yet. I had created a cross reference in IOC (Unity), where I had class A referencing class B (through a couple of layers), and class B referencing class A. Bad design on my part really. But I created a new interface/class for the method in class A that I was calling from class B, and that cleared it up.
I hit this issue working with Server Sent Events. The problem was solved when I noticed that the domain name I used to initiate the connection included a trailing slash, e.g. https://foo.bar.bam/ failed with ERR_HTTP_PROTOCOL_ERROR while https://foo.bar.bam worked.
In my case (nginx on windows proxying an app while serving static assets on its own) page was showing multiple assets including 14 bigger pictures; those errors were shown for about 5 of those images exactly after 60 seconds; in my case it was a default send_timeout of 60s making those image requests fail; increasing the send_timeout made it work
I am not sure what is causing nginx on windows to serve those files so slow - it is only 11.5MB of resources which takes nginx almost 2 minutes to serve but I guess it is subject for another thread
In my case, the problem was that Bitdefender provided me with a local ssl certificate, when the website was still without a certificate.
When I disabled Bitdefender and reloaded the page, the actual valid server ssl certificate was loaded, and the ERR_HTTP2_PROTOCOL_ERROR was gone.
In my case, it was WordPress that now requires PHP 7.4 and I was running 7.2.
As soon as I updated, the errors disappeared.
Happened again and this time it was the ad-blocker that didn't like the name of my images (yt.png, ig.png, url.png). I added a prefix and all loaded ok.
In my case, the time on my computer (browser client) was out of date, synced it using settings in windows, and then the error got away
I had line breaks in my Content-Security-Policy in my nginx.conf that produced this error when used in an docker container running in Kube in GCP (serving angular but I doubt that matters).
Putting them all back on the same line and the problem went away.
A curl -v helped diagnose.
http2 error: Invalid HTTP header field was received: frame type: 1, stream: 1, name: [content-security-policy], value: [script-src 'unsafe-inline' 'self....
It was much easier to edit on separate lines but never again!

Displaying content of 302 Redirect - or HTTP-compliant waiting screen

I'd like to have a waiting screen in HTML drawn before user enters the site because of some long-running auth processes that are out of my control. I'd like that screen to be fully HTTP-compliant, i.e.:
it should not respond with 200 OK if there's no actual content yet available (which eliminates an option to display an empty page placeholder with loading indicator and load the content using AJAX call in the background)
it should respond with 302 Redirect if there is actually any redirection (that eliminates HTML's Meta Refresh feature).
The only "third way" I can see is to rely on standard 302 redirections. But I'll need the actual content of the request that resulted in 302 response to be rendered to the user for the time of waiting for the second request (with "please wait" info or something). In most (all?) cases, browsers do not draw the content of those requests, just go and wait for the data from redirection.
The questions are:
in what cases the content of 302 Redirect request is rendered? is it possible to force browsers to render it before redirecting?
is there another way to approach the problem without breaking the HTTP protocol? or is 200 OK status for the page without any content initially not breaking the protocol?
Short answer to your question might be "not practically possible".
But you might be lucky.
Displaying content of 302 - not possible
Specification requires that client immediately goes to the new url, specified in the 302 response. No way to wait, now notion of a response to be rendered.
Someone must be waiting - server side option
You are expecting that some process shall wait until the lengthy authentication process is finished.
Such a process must be able to
1) initiate the authentication process
2) render some "waiting" page
3) check result of the authentication process
4) after the authentication succeeds, redirect you there
Step 1 - initiating the authentication process from server side can be real problem as you will not have access to cookies and other authentication resources for target site. You are serving another domain, so you will not have a chance to read this security related stuff, which only your browser knows. But I will assume, you will manage somehow (asking your user to tell you this sort of information earlier).
Then your web server would start authentication process for your client. This is rather strange, but you might try to do so by initiating an http request to the target site from your server. This must be done asynchronously as we need to do also some other things like providing your user something to render.
Step 2 - rendering some "waiting page.
To render something on browser side, you may return a page with 200 status code. I do not think, this is breaking http. You would return some nice "wait a moment" content plus add "Refresh" header to initiate page refresh within short time (like in 2 seconds or so).
Step 3 - check status of authentication process: your server will get another request resulting from Refresh form previous step. Your server must know context of this activity , probably by session id. In this context, it will find, that there is a process of authentication running. If authentication is not yet completed, repeat Step 2.
Step 4 - (still being on your server) If authentication is complete, gather needed information needed for your client to connect as authenticated user to target server, and return 302 with a link leading to target server. This assumes, the link allows to connect in "authenticated" manner.
This approach is likely to fail in steps 1 and/or 4. But there might be situations it would work (depends on target server).
Waiting process running within your client browser
Another option for the process waiting for complete authentication is within your browser. Using AJAX process is not breaking HTTP, it is just another process running in parallel.
You could render some "waiting" content and then try to connect by AJAX to the target server.
However, here you are trying to do sort of cross-site scripting, so unless the target server does not allow you to make such a request (search for CORS, your web browser is running in context of another domain), web browser will reject such a request.
Assuming you succeed, your AJAX process will try to connect, and as soon as it succeeds, it will manage redirecting the page to the target one.
Your server in role of proxy
You might modify the first proposed solution - "server side option", by taking over all the communication with target server and providing similar content to to your client.
Conclusions
Clarify roles of browser, your server and target server
It would be great, if you draw Sequence diagram with lifelines "Browser", "MyServer", "TargetServer".
All the proposed solutions are dangerous
The biggest problem is, that if you want to get authenticated for other domain, than the one you serve, you are asking your user to share with you very private information. Browsers will do their best to prevent such a behaviour, your user might be willing to share such information with your app, but such behaviour is very tricky.
Trying to solve a problem out of your reach is very tricky
To me it sounds, you are trying somehow resolving a slow authentication process on a domain, you do not have control of. This often leads to very desperate situation "I do not have enough power to do it, but I have to". Good arguments for rejecting such a requirement could be "It would require breaking few security related standards."
The easiest solution would be to use a multipart/x-mixed-replace content type response with the first part served being the temporary waiting page and the secondary part the actual final content.
This content can be correctly served with a 200 OK.
The initial response should look like this and should be flushed as soon as possible to the user
while keeping the HTTP connection open
HTTP/1.1 200 OK
Content-Type: multipart/x-mixed-replace;boundary=MYBOUNDARYSTRING
--MYBOUNDARYSTRING
Content-Type: text/html
<html><body><!-- your waiting page content here --></body></html>
--MYBOUNDARYSTRING
when your final page is ready, you just have to serve a second HTML part that will be displayed
instead of the first one
Content-Type: text/html
<html><body><!-- your final page here --></body></html>
--MYBOUNDARYSTRING
--
The final '--' indicates to the browser that the content is complete and that there are no additional parts.
Most modern browsers will correctly replace the first content part with the second when it's available but this is user agent specific and older versions of Internet Explorer are known not to handle this MIME type correctly
Alternate solution
You can implement the same technique of chunked response with a single HTML document and rely on Javascript and/or CSS to visually substitute content for the user.
For example:
The initial response is flushed immediately:
HTTP/1.1 200 OK
Content-Type: text/html
Transfer-Encoding: chunked
6E
<html><head><!-- load my CSS and JS files --></head><body>
<div id="waiting"><!-- my waiting content --></div>
when your final content is ready, send a new chunk:
3E
<div id="final"><!-- my final content --></div></body></html>
0
To ensure that your #final div is displayed instead of #waiting, you can either:
add something like <script>$("#waiting").hide();</script> just before your closing </body> tag
or use CSS positioning to ensure that #final is displayed above #waiting, something like
<style>
body { position: relative; margin: 0; padding: 0 }
body > div { position: absolute; top: 0; left: 0; width: 100% }
#waiting { z-index: 0 }
#final { z-index: 1 }
</style>

Chrome extension to listen and capture streaming audio

Is it possible for a Chrome extension to listen for streaming audio from any of the browser's tabs? I would like to capture the streaming audio data and then analyse it.
Thanks
You could try 3 ways, neither one does provide 100% guarantee to meet your needs.
Before going into more detailed descriptions, I must note that Chrome extensions do not provide convenient tools for working on per connection level - sufficiently low level, required for stream capturing. This is by design. This is why the 1-st way is:
To look at other browsers, for example Firefox, which provides low-level APIs for connections. They are already known to be used by similar extensions. You may have a look at MediaStealer. If you do not have a specific requirement to build your system on Chrome, you should possibly move to Firefox.
You can develop a Chrome extension, which intercepts HTTP-requests by means of webRequest API, analyses their headers and extracts media urls (such as containing audio/mpeg MIME-type, for example, in HTTP-headers). Just for a quick example of code you make look at the following SO question - How to change response header in Chrome. Having the url you may force appropriate media download as a file. It will land in default downloads folder and may have unfriendly name. (I made such an extension, but I do not have requirements for further processing). If you need to further process such files, it can be a challenge to monitor them in the folder, and run additional analysis in a separate program.
You may have a look at NPAPI plugins in general, and their streaming APIs in particular. I can imagine that you create a plugin registered for, again, audio/mpeg MIME-type, and receives the data via NPP_NewStream, NPP_WriteReady and NPP_Write methods. The plugin can be wrapped into a Chrome extension. Though I made NPAPI plugins, I never used this API, and I'm not sure it will work as expected. Nethertheless, I'm mentioning this possibility here for completenees. This method requires some coding other than web-coding, meaning C/C++. NB. NPAPI plugins are deprecated and not supported in Chrome since September 2015.
Taking into account that you have some external (to the extension) "fingerprinting service" in mind, which sounds like an intelligent data processing, you may be interested in building all the system out of a browser. For example, you could, possibly, involve a HTTP-proxy, saving media from passing traffic.
If you're writing a Chrome extension, you can use the Chrome tabCapture API to record audio.
chrome.tabCapture.capture({audio: true}, function(stream) {
var recorder = new MediaRecorder(stream);
[...]
});
The rest is left as an exercise to the reader; MDN has more documentation on how to use MediaRecorder.
When this question was asked in 2013, neither chrome.tabCapture nor MediaRecorder existed.
Mac OSX solution using soundflower: http://rogueamoeba.com/freebies/soundflower/
After installing soundflower it should appear as a separate audio device in the sound preferences (apple > system preferences > sound). Divert the computer's audio to the 2ch option (stereo, 16ch is surround), then inside a DAW, such as 'audacity', set the audio input as soundflower. Now the sound should be channeled to your DAW ready for recording.
Note: having diverted the audio from the internal speakers to soundflower you will only be able to hear the audio if the 'soundflowerbed' app is actually open. You know it's open if there's a 8 legged blob in the top right task bar. Clicking this icon gives you the sound flower options.
My privoxy has the following log:
2013-08-28 18:25:27.953 00002f44 Request: api.audioaddict.com/v1/di/listener_sessions.jsonp?_method=POST&callback=_AudioAddict_WP_ListenerSession_create&listener_session%5Bid%5D=null&listener_session%5Bis_premium%5D=false&listener_session%5Bmember_id%5D=null&listener_session%5Bdevice_id%5D=6&listener_session%5Bchannel_id%5D=178&listener_session%5Bstream_set_key%5D=webplayer&_=1377699927926
2013-08-28 18:25:27.969 0000268c Request: api.audioaddict.com/v1/ping.jsonp?callback=_AudioAddict_WP_Ping__ping&_=1377699927928
2013-08-28 18:25:27.985 00002d48 Request: api.audioaddict.com/v1/di/track_history/channel/178.jsonp?callback=_AudioAddict_TrackHistory_Channel&_=1377699927942
2013-08-28 18:25:54.080 00003360 Request: pub7.di.fm/di_progressivepsy_aac?type=.flv
So I got the stream url and record it:
D:\Profiles\user\temp>wget pub7.di.fm/di_progressivepsy_aac?type=.flv
--18:26:32-- http://pub7.di.fm/di_progressivepsy_aac?type=.flv
=> `di_progressivepsy_aac#type=.flv'
Resolving pub7.di.fm... done.
Connecting to pub7.di.fm[67.221.255.50]:80... connected.
HTTP request sent, awaiting response... 200 OK
Length: unspecified [video/x-flv]
[ <=> ] 1,234,151 8.96K/s
I got the file that can be reproduced in any multimedia pleer.

application cache: don't serve file from appcache on 404

I'm using the application cache to make my website also work offline.
My manifest looks something like this and is embedded using an <iframe>:
CACHE:
favicon.ico
assets/css/style.css
assets/js/libs/zepto.js
assets/js/app.js
NETWORK:
*
FALLBACK:
/ offline.html
it works as expected when I cut the internet connection -> everything is served via the offline.html page.
but just now I found out that every 404 (e.g. an URL that never existed on the server) also uses the FALLBACK section in the manifest on displays the offline.html.
is there a way to distinguish between being offline (in which case the offline.html is the right choice) and the server returning a 404 (in which case I just want to display the 404 error)?
Appcache will FALLBACK if the original request...
...results in a redirect to a resource with another origin (indicative of a captive portal), or a 4xx or 5xx status code or equivalent, or if there were network errors
(from http://www.whatwg.org/specs/web-apps/current-work/multipage/offline.html#changesToNetworkingModel)
Unfortunately, when a fallback occurs, there's no why to find out why. You can't differentiate between a 500, 404, redirect or failed connection.
Here's a hacky workaround:
FALLBACK:
/connection-test.js connection-failed.js
/ offline.html
You could embed connection-test.js in your offline.html page. connection-test.js loading would indicate the user has a connection, connection-failed.js would indicate there's no connection.
I came across your post while searching for a solution to this same problem.
What I ended up doing was checking the value of navigator.onLine in my fallback page (which, in your case, would be offline.html). If navigator.onLine is true, then the user is supposedly online/connected to the internet (caveats apply), and were sent to the fallback page because the file they requested was not found. So, then I change the content of the page to that of a 404.
Example:
<script>
header=document.getElementById('header');
error_message=document.getElementById('error_message');
if(navigator.onLine){
header.innerHTML='Page not found';
error_message.innerHTML='The page you requested could not be found. Please check the URL and try again.';
}
</script>
It would certainly be great if the application cache spec included some other way of handling 40x's and 50x's. While this solution is certainly not ideal, it's the best one I could come up with.
I hope it helps.

What kind of example url I can use that will immediately cause a request to fail?

What is the "official" url I should use if I want to indicate just a resource that fails as soon as possible?
I don't want to use www.example.com since its an actual site that accepts and responds requests and I don't want something that takes forever and fails from a timeout (like typing using a random, private IP address can lead to).
I thought about writing an invalid address or just some random text but I figured it wouldn't look as nice and clear as "www.example.com" is.
If you want an invalid IP, trying using 0.0.0.0.
The first octet of an IP cannot be 0, so 0.0.0.0 to 0.255.255.255 will be invalid.
For more info, see this question: what is a good invalid IP address to use for unit tests?
https://www.rfc-editor.org/rfc/rfc5735:
192.0.2.0/24 - This block is assigned as "TEST-NET-1" for use in documentation and example code. It is often used in conjunction with domain names example.com or example.net in vendor and protocol documentation. As described in [RFC5737], addresses within this block do not legitimately appear on the public Internet and can be used without any coordination with IANA or an Internet registry. See[RFC1166].
Use .invalid, as per RFC 6761:
The domain "invalid." and any names falling within ".invalid." are special [...] Users MAY assume that queries for "invalid" names will always return NXDOMAIN responses.
So a request for https://foo.invalid/bar will always fail, assuming well-behaved DNS.
Related question: What is a guaranteed-unresolvable (but valid) URL?
if it's in a browser then about: is fairly useless - but it would be better if your service returned the correct HTTP status code - e.g. 200 = good, 404 = not found, etc.
http://en.wikipedia.org/wiki/List_of_HTTP_status_codes