'Oracle WebLogic Server video Blob object not playing from API response

I have an API which returns a video Blob object which is supposed to play a video after receiving the response from the API. I am able to play the .mp4 file when I am using localhost however when I deployed the project to the Oracle WebLogic Server I can see that the API response returns HTTP 200 OK success status response code however the video is not playing and I can see this error in the console.

Refused to load media from 'blob:https://10.250.65.68:8013/7c150b7f-dedc-42a7-b164-851eab08252a' because it violates the following Content Security Policy directive: "default-src 'self'". Note that 'media-src' was not explicitly set, so 'default-src' is used as a fallback.

Would seek assistance on understanding where do I have to do the configuration on the Oracle WebLogic Server to resolve this violation on the Content Security Policy directive?

const options = createRequestOption(this.request);
this.http.get(this.viewVideoFileAPI, { params: options, observe: 'response', responseType: 'blob' })
  .subscribe(((res: HttpResponse<Blob>) => {
    this.resultBody = res.body!
    this.videoUrl = window.URL.createObjectURL(this.resultBody);
     
    let video = document.getElementsByTagName("video")[0];
    video.src = this.videoUrl;
    video.controls = true;
    video.height = 1920;
    video.width = 1080;
    video.load();
    video.onloadeddata = () => {
      this.isVideoLoading = false
      video.play();
    }

I have added a <meta> tag into my HTML.

<meta http-equiv="Content-Security-Policy" content="default-src * blob:; media-src * blob:;">

However, on the console it is still showing that my Content-Security-Policy only include the following.

default-src 'self'; frame-src 'self' data:; script-src 'self' 'unsafe-inline' 'unsafe-eval' https://storage.googleapis.com; style-src 'self' 'unsafe-inline'; img-src 'self' data:; font-src 'self' data:



Solution 1:[1]

I am able to resolve the problem by adding media-src 'self' data: blob: to my Content Security Policy configuration as the createObjectURL method is producing a Blob object that requires the use of a blob URI scheme instead of a data URI scheme.

Below are more information regarding the blob URI scheme.

https://en.wikipedia.org/wiki/Blob_URI_scheme

https://developer.mozilla.org/en-US/docs/Web/API/Blob

The comparison between a blob URI scheme and a data URI scheme.

https://javascript.info/blob

https://yaz.in/p/blobs-files-and-data-uris/

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Nic