'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.
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 |
