403 Error on Upload


#1

I keep getting 403 error due to lack of CSP headers (which I’ve set in the Worker) when uploading a video.

I’ve set the CSP headers, and the OPTIONS and HEAD request are working, but not the PATCH. Would you be able to point us to the right direction?


Cloudflare Stream Beta Feedback
#2

Hello @user3213,

More information would be appreciated for us to reproduce and guide you in the right direction, like an upload path, zone name etc…

Let us know,


#3

Thanks for your reply.

We are using the following worker (which we got from the beta topic for Cloudflare Stream and added CSP headers):

addEventListener('fetch', event => {
  event.respondWith(proxyMediaRequest(event.request))
})

const myZoneAPI = "videos.geteducation.link/upload";
const cfAPI = "api.cloudflare.com/client/v4/zones/561118e78d5827283e688973c9035823";

function translateResponseLocation(headers) {
  const newHeaders = new Headers(headers);
  if (headers.has("location")) {
       newHeaders.set("X-Original-Location", headers.get("location"));
       let location = headers.get("location");
       let newLocation = location.replace(cfAPI, myZoneAPI);
       newHeaders.set("location", newLocation);
  }
  
  newHeaders.set("Access-Control-Allow-Credentials", "true")
  return newHeaders;
}

async function proxyMediaRequest(request) {
  var re = new RegExp("/media/(.*)$");
  const init = {
    method: request.method,
    headers: new Headers(request.headers),
  };

  if (request.method != "GET" && request.method != "HEAD") {
    init.body = request.body;
  }

  init.headers.set("X-Auth-Key","XXX");
  init.headers.set("X-Auth-Email", "XXX");
  var response;
  try {
    var matchArr = re.exec(request.url);
    var subPath = "";
    if (matchArr) {
        subPath = matchArr[1];
    }

    var newURL = "https://api.cloudflare.com/client/v4/zones/561118e78d5827283e688973c9035823/media/" + subPath;
    response = await fetch(newURL, init);

    const options = {
        status: response.status,
        statusText: response.statusText,
        headers: translateResponseLocation(response.headers)
    }

    const referer = init.headers.get('Referer');
if (referer && referer.indexOf('geteducation.link') !== -1) {
  const match = referer.match(/^(?:https?:\/\/)?(?:[^@\n][email protected])?(?:www\.)?([^:\/\n?]+)/);

      options.headers.set("Access-Control-Allow-Origin", match);
    } else { // ELSE is here for tests purposes only
      options.headers.set("Access-Control-Allow-Origin", "*");
    }

    options.headers.set("Access-Control-Allow-Headers", "X-HTTP-Method-Override, Cache-Control, X-Requested-With, Content-Type, tus-resumable, upload-length, upload-metadata, Upload-Offset, Location, Upload-Length, Tus-Version, Tus-Resumable, Tus-Max-Size, Tus-Extension, Upload-Metadata")

    return new Response(
    response.body,
        options,
    )
  }
  catch (e) {
    if (e.response) {
      return e.response
    }
    return new Response("Error", { "status": 500 });
  }
}

The upload starts normally, but keeps retrying because at some point we are getting an error. When we use directly the Cloudflare endpoint, it works.

I’m not sure what is going on, as we are not familiar with Cloudflare Stream and Workers.


#4

I believe it’s because WAF.