-
Mixed Content 오류카테고리 없음 2023. 11. 19. 12:31
Mixed Content: The page at '<URL>' was loaded over HTTPS, but requested an insecure stylesheet '<URL>'. This request has been blocked; the content must be served over HTTPS.
HTTPS로 연결된 서버에서 HTTP 로 요청하면 보안상의 문제가 발생할 수 있기 때문에 Mixed Content 에러를 띄운다.
// 백엔드로 연결되는 부분의 경우 HTTP ( 일반적으로 80 포트를 이용하는 경우도 있다. )
나는 워드프레스 홈페이지를 로컬에서 실행시키는 도중 CSS와 API 호출 과정에서 위의 에러를 발견했는데,
define('SCHEME', (isset($_SERVER['HTTP_X_FORWARDED_PROTO']) && $_SERVER['HTTPS'] == "on") ? "https" : "http");
http 와 https 를 구분하는 부분의 조건 중 $_SERVER['HTTP_X_FORWARDED_PROTO'] 에 저장된 값이 없어서 http로 저장되고 있었다.
$_SERVER['HTTP_X_FORWARDED_PROTO'] 의 경우, 로드밸런서와 같이 proxy 서버에서 저장되는 값인데,
로컬에서는 해당값을 저장하지 않았기 때문에 SCHEME에 항상 http로 저장되고 있었다.
이를 해결하기 위해서 SCHEME 를 https로 저장하여 해결했다.
다만 위의 해결 방법을 찾는 과정에서 로컬이 아닌 proxy 서버에서 mixed content 오류가 발생할 경우
http요청을 https로 변경하는 방법 2 가지를 발견했다.
https://repost.aws/ko/knowledge-center/redirect-http-https-elb
1. Virtual Host 설정 변경 ( 가상 호스트 파일 메서드 사용 )
<VirtualHost *:80> ServerName DOMAIN ServerAlias www.DOMAIN DocumentRoot "C:\Project Path" RewriteEngine On RewriteCond %{HTTP:X-Forwarded-Proto} =http RewriteRule .* https://%{HTTP:Host}%{REQUEST_URL} [L,R=permanent] </VirtualHost> <VirtualHost *:443> ServerName DOMAIN ServerAlias www.DOMAIN DocumentRoot "C:\Project Path" SSLEngine on SSLCertificateFile "pem Path" SSLCertificateKeyFile "Key Path" </VirtualHost>
보통 80포트에 http 서버를 두고 백엔드와 연동하고 443 포트에 SSL 인증을 통해 https 서버를 설정한다.
이 때, 80 포트로 http 요청이 온 경우 이를 https 경로로 변경하는 방법이다.
2. .htaccess ( 기본 Apache 구성 파일에 대한 액세스 권한이 없는 경우 )
<Directory "/var/www/html"> Options Indexes FollowSymLinks AllowOverride All Require all granted </Directory>
또는
<Directory /> Options FollowSymLinks AllowOverride none Require all denied </Directory>
로 URL뒤에 나타날 Directory 또는 파일 명을 임의로 변경할 수 있게 httpd.conf를 변경하고
RewriteEngine On RewriteCond %{HTTP:X-Forwarded-Proto} =http RewriteRule .* https://%{HTTP:Host}%{REQUEST_URI} [L,R=permanent]
.htaccess 파일에 위와 같이 Rewrite 규칙을 설정한다.