[HTTPS] https + ie11 에서 fontawesome가 표시 안되는 현상

http에서 잘 나오던 폰트 어썸 글꼴이 https로 설정을 한 이후 크롬, 파이어폭스 등에서는 잘 표시되지만 ie11에서만 표시가 되지 않았다.

테스트를 위해서 로컬에 https 환경을 구성 [APACHE] 로컬에서 https 테스트 환경

사용한 버전

Apache 2.4
Tomcat 8.5.x
fontawesome 4.4.0

원인은 IE11 버그라는데 SSL 환경에서 폰트에 Cache를 사용하지 않게 되면 정상적으로 표시를 못해 캐시를 사용하도록 설정을 하면 된다.

head의 Pragma 속성 no-cache 설정

Apache WEB 서버를 사용하고 있었기 때문에 httpd.conf 설정을 통하여 폰트 확장자에 한해서 캐시 설정을 변경

# 주석 해제
LoadModule headers_module modules/mod_headers.so

# 캐시 설정 추가
<LocationMatch "\.(eot|otf|woff|ttf)$">
   Header set Access-Control-Allow-Origin "*"
   Header set Cache-Control "max-age=3600" 
   Header set Pragma "none"
</LocationMatch>

Access-Control-Allow-Origin: 교차 출처 리소스 공유(CORS)를 허용하기 위한 head값으로 모든 도메인에서 접근 사용 가능
Cache-Control: 해당 리소스의 캐시 설정
Pragma: HTTP 1.1 버전의 Cache-Control이 생기기 전 HTTP 1.0에서 사용하던 유사 기능, 캐시 사용하지 않도록 설정하는 기능, none로 no-cache 설정 해제

- 캐시 설정 전

캐시 설정 전

- 캐시 설정 후

캐시 설정 후

그 외 해결 방안

캐시 외에도 다른 방법을 설명한 것이 있었으나 적용을 해도 정상적으로 표시되지 않았다.
하지만 X-UA-Compatible는 이 경우가 아니더라도 가장 첫 번째로 오는 것이 좋다.

신뢰할 수 있는 사이트로 설정

IE11 -> 인터넷 옵션 -> 보안 -> 신뢰할 수 있는 사이트 -> 사이트
메뉴에서 해당 사이트를 신뢰할 수 있는 사이트로 등록하는 경우 정상적으로 표시

가장 먼저 "X-UA-Compatible" meta tag 설정

head 아래 처음 시작을 "X-UA-Compatible"으로 할 경우 폰트가 정상적으로 나타는 경우도 있다고 함

<head>
  <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
  <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
</head>

참고

저작자표시

'FullStack > 10. WeB' 카테고리의 다른 글

폐쇄망에서 HTTPS 접속 시 IE 페이지 표시 안 되는 현상 (0)	2021.11.23
Apache Proxy 설정 (0)	2021.03.12
[APACHE] 로컬에서 https 테스트 환경 (0)	2020.12.18
[HTML] Iframe 사이즈에 따른 Frame 조절 (0)	2020.11.16
[WindFly] 한글 파라미터 처리 (0)	2020.11.11

기억 창고

[HTTPS] https + ie11 에서 fontawesome가 표시 안되는 현상