[devflix] Mixed content 문제 발생(feat.http && https)

오랜만에 넷플릭스 클론사이트 업데이트를 하다가 문제가 생겼다.

 

다름이 아니구.. themoviedb api 에서 detail 화면에 예고편을 뿌려주려고 컴포넌트를 하나 만들었는데~

 

mixed content error가 발생하면서 비디오를 받아오지 못하는 것이다.

 

수정은 해놔서 스크린샷은 없다. 아무튼 에러 코드를 읽었을때 https: http 어쩌고 한다. https 에서 http를 써서 그런다는 듯 했다

 

코드를 보니 유튭 영상을 가져와 뿌려줄 때 http로 적었다. 요걸 https로 수정하니

자알 나온다... 흠 그럼 도대체 어떤 문제일까 검색해보니

https 사이트에서 ajax를 사용해 비동기로 http로 연결되어 있는 다른 컨텐츠(이미지, 비디오, 파일)을 이용해서 화면에 출력하려고 했을때 발생한다. 이 에러메세지는 사용자가 웹 사이트 중 https 와 http가 혼합된 사이트를 접속했을 때 자주 볼 수 있는 메시지이다.

 

브라우저에서 이러한 에러를 발생시키는 이유는, https 가 가진 속성 때문이다. https 는 자신의 프로토콜을 통해 사용자의 브라우저와 웹 서버간을 암호화된 채널을 만든 후 그채널을 거친 안전한 컨텐츠들만을 페이지에 띄워서 사용자에게 보여주려고 한다.

그런데 페이지에 암호화된 채널이 아닌 http로 가져오는 컨텐츠가 포함되어 있다면 그 순간 안전하지 않은 컨텐츠를 가져와 버리는 셈이다.

따라서 브라우저는 이럴때 http로 가져오는 컨텐츠가 있는데 이건 안전하지 않으니 안띄울게~ 하고 띄우지 않고 에러만 뽑아낸다.

 

일단 필자의 해결법은 간단히 https 해당 링크의 프로토콜을 변경해서 해결이 되었다.

 

그럼 http와 https의 차이를 간단히 살펴보자

 

http는 잘 알고 있듯이 하이퍼 텍스트 전송 프로토콜의 약자이다.

서로 다른 시스템들 사이에서 통신을 주고받게 해주는 가장 기초적인 프로토콜.

그럼 여기에 secure하나만 붙이면 https이다.

 

일반 http 프로토콜은 서버에서부터 브라우저로 전송되는 정보가 암호화 되지 않는다는 문제점이 있었다.

https 는 SSL(보안 소켓 계층)을 사용함으로써 이 문제를 해결했다.

SSL은 서버와 브라우저 사이에 안전하게 암호화된 연결을 만들 수 있게 도와주고, 서버 브라우저가 민감한 정보를 주고 받을 때

이것이 도난 당하는 것을 막아준다.

 

SSL & TSL

SSL(Secure Socket Layer) 이란 간단하게 말해 들어오고 나가는 데이터를 암호화 하는 보안 기능을 가지고 있는 "보안 인증서"이다.

TSL(Transport Layer Security) 는 SSL의 업그레이드 버전이다.

 

이렇게 http와 https 는 보안성에서 차이가 있다.

그럼 그 차이 뿐인가?

바로 seo(search engine optimization) 검색엔진 최적화 에도 차이가 있다.

https가 seo가 더 낫다고 한다. 음 일단 오늘 스케쥴이 있으니 작성은 저녁에  마져 하겠다.