Mixed Content 오류

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

ELB를 사용하여 HTTPS로 HTTP 트래픽 리디렉션

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 규칙을 설정한다.