질문있습니다~!

const xhr = new XMLHttpRequest();

xhr.responseType = 'blob';

xhr.onload = () => {
    const url = window.URL.createObjectURL(xhr.response);

    /* blob:http://localhost:63342/6737c626-231f-4158-8d46-ac1c207f2e99 */
    console.log(xhr.responseURL);

    /* http://localhost:63342/13/file/video.mp4 */
    console.log(url);

    const video = document.createElement('video');
    video.onload = () => {
        /* 영상이 정상적으로 실행되면 revoke */
        /* 해당 URL 에 대해 더이상의 접근을 못하게 하는것인가요? */
        window.URL.revokeObjectURL(url);
    };

    video.src = url;

    /* video Element 에 대한 부가기능 설정 */
    video.autoplay = true;
    video.loop = true;

    document.querySelector('#show')
        .appendChild(video);
};


xhr.open('get', '../file/video.mp4');
xhr.send();

이번 영상 보면서 비동기로 BLOB 객체를 받는 방법을 배운 후 여러가지 시도를 해 보았습니다!

video 타입도 문제없이 잘 재생되구요!

여기서 한가지 의문이 생겼습니다. 

xhr.responseURL 과 window.URL.createObjectURL 로 만든 url 은 기능은 같은 것 같더라구요.

다만 둘 다 로그를 찍어서 확인해보니, responseURL 쪽은 서버 쪽의 파일 Path 가 확연히 들어나는 반면에, createObjectURL 쪽은 새로고침 할 때마다 랜덤한 숫자들과 문자들로 이루어진 고유한 url을 가지고 있는것이 확인되었습니다.

이는 파일의 경로를 감춤으로서 해킹을 막고자 하기 위해 이렇게 createObjectURL을 쓰는 것인가요?

또 하나, video.onload 이벤트에서 window.URL.revokeObjectURL(url) 를 해서 그런지, 해당 URL 로 다시 접근 할 시에 NotFound가 떴습니다.

이 또한 역시 보안을 위해 해당 이벤트를 수행하는 것인가요?

그렇다면 blob 객체를 받아서 HTML에 뿌리고자 할 때는 위 두가지 사항은 필수조건처럼 생각해도 될런지요.

이런 의문을 가지게 된 배경은 

그냥 document.createElement 한 후에 바로 src 만 설정해줘도 웹 페이지에서 정상적으로 보이는데,

이렇게까지 수고스럽게 코드를 작성하는 이유가 뭘까 개발자의 입장에서 한번 생각해보면서 자연스럽게 의문이 생기게 되었습니다.

항상 좋은 강의 감사합니다. 정말 많은 도움이 되고있습니다.