Firefox 보안 오류: "localhost:xxxx"의 콘텐츠는 "blob:localhost:xxxx/..."로부터 데이터를 로드할 수 없음

2024-07-27

Firefox에서 "blob:localhost:xxxx/..." URL로부터 데이터를 MediaSource에 할당하려고 할 때 다음과 같은 오류 메시지가 나타날 수 있습니다.

Firefox Security Error: Content at http://localhost:xxxx/ may not load data from blob:http://localhost:xxxx/...

원인:

이 오류는 Firefox의 콘텐츠 보안 정책(Content Security Policy, CSP)으로 인해 발생합니다. CSP는 웹 사이트가 악의적인 스크립트, 이미지 또는 기타 콘텐츠로부터 보호되도록 하는 데 도움이 되는 보안 기능입니다. CSP 헤더는 웹 사이트가 허용하는 리소스의 출처를 명시적으로 지정합니다.

이 경우 CSP 헤더는 "blob:localhost:xxxx/..." URL로부터 데이터를 로드하는 것을 허용하지 않도록 구성되어 있습니다. 이는 악의적인 스크립트가 웹 사이트에 악성 코드를 삽입하는 데 사용될 수 있기 때문입니다.

해결 방법:

이 문제를 해결하려면 다음 방법 중 하나를 사용할 수 있습니다.

CSP 헤더를 업데이트합니다.

CSP 헤더를 업데이트하여 "blob:localhost:xxxx/..." URL로부터 데이터 로드를 허용하도록 구성할 수 있습니다. 이를 수행하려면 다음 단계를 따르십시오.

  1. 웹 사이트의 .htaccess 파일을 엽니다.
  2. 다음 행을 추가합니다.
Header always set Content-Security-Policy "default-src 'self'; script-src 'self' 'unsafe-inline' blob:http://localhost:xxxx/; object-src 'none'; connect-src 'self'; img-src 'self' data:; style-src 'self' 'unsafe-inline'; font-src 'self' data:; media-src 'self' blob:http://localhost:xxxx/;";
  1. 웹 서버를 다시 시작합니다.

MediaSource를 사용하지 않습니다.

MediaSource 대신 다른 방법을 사용하여 미디어 콘텐츠를 재생할 수 있습니다. 예를 들어, <video> 태그의 src 속성을 사용하여 미디어 파일을 직접 참조할 수 있습니다.

Web Worker를 사용합니다.

Web Worker를 사용하여 MediaSource를 별도의 스레드에서 실행할 수 있습니다. 이렇게 하면 CSP 헤더에 영향을 미치지 않고 MediaSource를 사용할 수 있습니다.

주의:

CSP 헤더를 업데이트하기 전에 웹 사이트의 보안 영향을 신중하게 평가해야 합니다. CSP는 웹 사이트를 보호하는 데 중요한 역할을 하므로 CSP 헤더를 변경하면 웹 사이트가 취약해질 수 있습니다.



예제 코드

const videoElement = document.getElementById('video');
const mediaSource = new MediaSource();

videoElement.srcObject = mediaSource;

mediaSource.addEventListener('sourceopen', function() {
  const sourceBuffer = mediaSource.addSourceBuffer('video/webm');

  fetch('blob:localhost:xxxx/...')
    .then(response => response.arrayBuffer())
    .then(arrayBuffer => {
      sourceBuffer.appendBuffer(arrayBuffer);
    });
});

이 코드는 다음과 같이 작동합니다.

  1. videoElement 요소를 가져옵니다.
  2. MediaSource 인스턴스를 만듭니다.
  3. videoElement의 srcObject 속성을 mediaSource로 설정합니다.
  4. mediaSource의 sourceopen 이벤트에 이벤트 리스너를 추가합니다.
  5. 이벤트 리스너는 sourceBuffer를 만들고 video/webm 형식으로 설정합니다.
  6. 이벤트 리스너는 blob:localhost:xxxx/... URL로부터 데이터를 가져옵니다.
  7. 데이터가 로드되면 sourceBuffer에 추가됩니다.

참고

  • 이 코드는 예시일 뿐이며 사용자의 특정 요구 사항에 따라 수정해야 할 수도 있습니다.
  • CSP 헤더를 업데이트하기 전에 웹 사이트의 보안 영향을 신중하게 평가해야 합니다.
  • MediaSource API는 복잡할 수 있으므로 사용하기 전에 API 문서를 숙지하는 것이 좋습니다.

추가 정보



대체 방법

CSP 헤더를 업데이트하여 "blob:localhost:xxxx/..." URL로부터 데이터 로드를 허용하도록 구성하는 것이 가장 일반적인 방법입니다. 하지만 이 방법은 웹 사이트의 보안을 약화시킬 수 있으므로 주의해야 합니다.

MediaSource 대체:

MediaSource 대신 다른 방법을 사용하여 미디어 콘텐츠를 재생할 수 있습니다. 예를 들어:

  • <video> 태그의 src 속성을 사용하여 미디어 파일을 직접 참조합니다. 이 방법은 가장 간단하지만 모든 상황에 적합하지는 않습니다.
  • HTMLMediaElement의 play() 메서드를 사용하여 미디어 파일을 재생합니다. 이 방법은 더 많은 제어 기능을 제공하지만 MediaSource만큼 유연하지는 않습니다.

Web Worker를 사용하여 MediaSource를 별도의 스레드에서 실행할 수 있습니다. 이렇게 하면 CSP 헤더에 영향을 미치지 않고 MediaSource를 사용할 수 있습니다. 하지만 Web Worker는 복잡할 수 있으므로 사용하기 전에 API 문서를 숙지하는 것이 좋습니다.

서버 측 처리:

서버 측에서 미디어 콘텐츠를 처리하고 클라이언트에 적절한 형식으로 제공하는 방법을 고려할 수도 있습니다. 이 방법은 보안을 향상시킬 수 있지만 추가적인 개발 작업이 필요합니다.

선택하는 방법은 특정 요구 사항과 개발자의 기술 수준에 따라 달라집니다.

  • 서버 측 처리를 선택하는 경우 추가적인 개발 작업이 필요합니다.

추가 정보


firefox content-security-policy web-worker

firefox content security policy web worker