https기반의 사이트에서 http video, iframe 사용할 때 나타나는 오류

 

 

제가 https 기반 웹사이트에서 m3u8 영상링크를 불러와 재생시키기 위해서 video.js 자바스크립트를 사용했는데요,

동적으로 움직이지 않을 때는 정상작동하지만,

비동기적으로 팝업창처럼 껐다켰다하는 화면에서는 재생이 되지 않더라구요!!

그래서 처음에는 video를 iframe으로 변경해서,

따로 /video 페이지를 만들어서 m3u8영상을 불러와 video로 보여주고

메인페이지에서 iframe으로 src에 /video를 넣어 출력했습니다.

근데 이때 발생한 오류...

 

1. 영상 URL이 http라서 block처리 당함

https 기반의 사이트에서 iframe에는 무조건 https만 가능하고, http는 불가능한 것을 알았습니다.

이 문제를 해결하기 위해 아래 티스토리를 참고했어요.

https://dololak.tistory.com/611

[HTTP] HTTPS 사용시 혼합 콘텐츠(Mixed Content) 및 안전하지 않은 콘텐츠에 대한 설명

 

수동적(Passive) 혼합 콘텐츠 - 이미지(사진, 그림 등)나 비디오 오디오같은 콘텐츠를 HTTP로 요청하는 것

능동적(Active) 혼합 콘텐츠 - 브라우저가 실행하게 되는 스크립트, CSS, iframe, 플래시 등의 콘텐츠를 HTTP로 요청하는 것

 

능동적 혼합 콘텐츠는 에러를 불러일으키지만,

수동적 혼합 콘텐츠는 warning 메세지를 띄워준다는 것!!!

==> 그래서 iframe을 video로 바꾸는 작업을 진행했습니다.

 

iframe -> video로 변경 후, m3u8 영상은 잘 불러와졌지만, 또 생긴 에러...

2. Mixed Content: The page at '' was loaded over HTTPS, but requested an insecure XMLHttpRequest endpoint ''. This request has been blocked; the content must be served over HTTPS.

 

모바일에서는 m3u8 영상이 정상 재생 되었지만, PC에서는 에러가 발생했습니다.

현재 페이지는 https인데, http를 왜 호출하냐며 블락당했습니다

iframe은 원천적으로 https->http호출이 안된다고 해서 video로 바꿨는데 video도 차단을 당하네요 ...!!!!

호출당하는쪽(http)에서 https로 SSL적용해서 변경해주기만 하면 아주 손쉽게 해결되는 문제이지만 

호출하는 입장(https)이므로 아래 사이트를 참고하여 html 파일 헤더에 메타 태그를 추가해주었습니다

<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests" />

 

https://wellsw.tistory.com/34

Mixed content 문제 해결(https 사이트에서 http 사이트 요청 시 발생하는 보안 문제)

 

메타태그를 추가하면 대부분 정상적으로 호출된다고 하시더라고요. (stackoverflow에서)

저는 메타태그를 추가했더니 오류는 없어졌으나 영상은 여전히 뜨지 않았어요...

다른 m3u8영상을 보여주는 사이트들을 참고해보려고 여러 사이트들에 들어가서 개발자도구를 열어보니 모두 "https"로 된 영상URL을 호출하여 보여주고 있더라고요....ㅎㅎㅎ

rtsp(실시간 스트리밍 프로토콜)라는 것을 사용하는 곳도 있었는데 rtsp에 대해서는 추후에 자세히 공부하여 작성하도록 하겠습니다 😭😭😭😭😭흑

 

저는 결국 서버단에서 http로 시작하는 m3u8영상파일을 저장해서,

저장한 영상파일을 보여주는 페이지를 새로 만들고,

그 페이지를 iframe으로 불러와 보여주도록 수정해놓았습니다....

이 문제에 대해 잘 아시는 분 댓글남겨주세요 😭😭😭😭😭😭😭😭😭😭😭😭😭😭😭😭😭😭😭😭

(제발)

 

 

끝입니다