[HTML] 다른 페이지의 스타일, 스크립트 삽입 에러

 현재 kigui 라는 프로젝트를 만들고 내가 만드는 웹 페이지의 대부분이 해당 규격에 맞추어 디자인을 하고 있다.

그래서 같은 스타일이랑 자바스크립트를 여러번 복사하면서 관리하는 것은 다소 비효율적이라고 판단이 되어서 깃 허브에 올린 후 깃 허브 페이지로 한 다음 불러오려고 했으나, 오류가 발생 하였다.

로컬에서 실행시에는 이렇게 나와야하는데.

하지만, 막상 깃헙에 올리고나서 실행해보면

이렇게 나온다.

불러오는 스타일과 스크립트 들이 깨지는 것인데.

개발자 도구를 보게 되면 다음과 같이 출력이 된다.

Mixed Content: The page at '현재 페이지 주소' was loaded over HTTPS, but requested an nsecure stylesheet '스타일 시트 주소'

. This request has been lbocked; the content must be served over HTTPS.

Mixed Content: The page at '현재 페이지 주소' was loaded over HTTPS, but requested an nsecure script '스크립트 주소'

. This request has been lbocked; the content must be served over HTTPS.

원인은 다음과 같다.

HTTPS를 사용하는 페이지에서 보호되지 않은 HTTP 형식을 불러올 수 없다.

HTTPS로 메인페이지 실컷 암호화해서 가져왔는데. HTTP 환경의 것을 가져오게 되면 보안상에 좋지 않나보다.

물론 사용자가 다음처럼 직접 보안되지 않는 스크립트/스타일시트를 수동으로 불러오면 되긴 되더라.

하지만, 일반적인 사용자가 그럴리 없으므로 개발자가 해결을 하여야 한다. 해결 법은 2가지이다.

1. 불러오는 사이트도 HTTPS를 지원시킨다.

2. 지금 메인 사이트를 HTTP로 만든다.

두 가지 방법인데. github page를 사용하는 나는 커스텀 도메인을 사용하려면 어짜피 HTTP를 해야하기 때문에 커스텀 도메인을 사용하면서 HTTP를 사용시켜서 해결을 하였다.