From c9fd6359aaa3e9c6c9a788c322d10afd5e3e3502 Mon Sep 17 00:00:00 2001
From: Ente <ducksource@duckpond.ch>
Date: Tue, 13 Apr 2021 22:55:40 +0200
Subject: [PATCH] Send HTTP credentials when fetching blobs

With this change media-tag now sends HTTP credentials when fetching
blobs. Also changed the example nginx config to send
Access-Control-Allow-Credentials CORS headers. For this to work, we can
no longer use '*' for Access-Control-Allow-Origin [1][2]: Therefore the
example config was changed to set Access-Control-Allow-Origin to the
sandbox domain only.

Fixes:
- #705: Blob fetch fails with 401 Unauthorized when HTTP basic auth is enabled [3]

Referenes:
[1]: https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Access-Control-Allow-Origin
[2]: https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS/Errors/CORSNotSupportingCredentials
[3]: https://github.com/xwiki-labs/cryptpad/issues/705
---
 docs/example.nginx.conf | 3 +++
 www/common/media-tag.js | 4 ++++
 2 files changed, 7 insertions(+)

diff --git a/docs/example.nginx.conf b/docs/example.nginx.conf
index 1f71fc8b7..94d228c30 100644
--- a/docs/example.nginx.conf
+++ b/docs/example.nginx.conf
@@ -69,6 +69,7 @@ server {
     add_header X-XSS-Protection "1; mode=block";
     add_header X-Content-Type-Options nosniff;
     add_header Access-Control-Allow-Origin "${allowed_origins}";
+    add_header Access-Control-Allow-Credentials true;
     # add_header X-Frame-Options "SAMEORIGIN";
 
     # Opt out of Google's FLoC Network
@@ -201,6 +202,7 @@ server {
     location ^~ /blob/ {
         if ($request_method = 'OPTIONS') {
             add_header 'Access-Control-Allow-Origin' "${allowed_origins}";
+            add_header 'Access-Control-Allow-Credentials' true;
             add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
             add_header 'Access-Control-Allow-Headers' 'DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Content-Range,Range';
             add_header 'Access-Control-Max-Age' 1728000;
@@ -211,6 +213,7 @@ server {
         add_header X-Content-Type-Options nosniff;
         add_header Cache-Control max-age=31536000;
         add_header 'Access-Control-Allow-Origin' "${allowed_origins}";
+        add_header 'Access-Control-Allow-Credentials' true;
         add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
         add_header 'Access-Control-Allow-Headers' 'DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Content-Range,Range,Content-Length';
         add_header 'Access-Control-Expose-Headers' 'DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Content-Range,Range,Content-Length';
diff --git a/www/common/media-tag.js b/www/common/media-tag.js
index 264fbb462..f05b39d9a 100644
--- a/www/common/media-tag.js
+++ b/www/common/media-tag.js
@@ -244,6 +244,7 @@ var factory = function () {
         var check = function () {
             var xhr = new XMLHttpRequest();
             xhr.open("HEAD", src);
+            xhr.withCredentials = true;
             xhr.onerror = function () { return void cb("XHR_ERROR"); };
             xhr.onreadystatechange = function() {
                 if (this.readyState === this.DONE) {
@@ -276,6 +277,7 @@ var factory = function () {
         var fetch = function () {
             var xhr = new XMLHttpRequest();
             xhr.open('GET', src, true);
+            xhr.withCredentials = true;
             xhr.responseType = 'arraybuffer';
 
             var progress = function (offset) {
@@ -387,6 +389,7 @@ var factory = function () {
         var fetch = function () {
             var xhr = new XMLHttpRequest();
             xhr.open('GET', src, true);
+            xhr.withCredentials = true;
             xhr.setRequestHeader('Range', 'bytes=0-1');
             xhr.responseType = 'arraybuffer';
 
@@ -399,6 +402,7 @@ var factory = function () {
                 var xhr2 = new XMLHttpRequest();
 
                 xhr2.open("GET", src, true);
+                xhr2.withCredentials = true;
                 xhr2.setRequestHeader('Range', 'bytes=2-' + (size + 2));
                 xhr2.responseType = 'arraybuffer';
                 xhr2.onload = function () {