Mixed Content: The page at [frontend-url] was loaded over HTTPS, but requested an insecure XMLHttpRequest endpoint [backend-url]

Mixed Content: The page at [frontend-url] was loaded over HTTPS, but requested an insecure XMLHttpRequest endpoint [backend-url]. This request has been blocked; the content must be served over HTTPS.

 

" If you load a page in your browser using HTTPS, the browser will refuse to load any resources over HTTP. As you've tried, changing the API URL to have HTTPS instead of HTTP typically resolves this issue. However, your API must not allow for HTTPS connections. Because of this, you must either force HTTP on the main page or request that they allow HTTPS connections. "

" Note on this: The request will still work if you go to the API URL instead of attempting to load it with AJAX. This is because the browser is not loading a resource from within a secured page, instead it's loading an insecure page and it's accepting that. In order for it to be available through AJAX, though, the protocols should match. "

 

HTTPS를 사용하여 브라우저에 페이지를로드하면 브라우저는 HTTP를 통한 리소스로드를 거부합니다. 시도한 것처럼 HTTP 대신 HTTPS를 사용하도록 API URL을 변경하면 일반적으로이 문제가 해결 됩니다. 그러나 API는 HTTPS 연결을 허용하지 않아야합니다. 이 때문에 기본 페이지에서 HTTP를 강제 실행하거나 HTTPS 연결을 허용하도록 요청해야합니다.

참고 사항 : AJAX로로드하지 않고 API URL로 이동하면 요청이 계속 작동합니다. 이는 브라우저가 보안 페이지 내에서 리소스를로드하지 않고 대신 안전하지 않은 페이지를로드하고이를 수락하기 때문입니다. 그러나 AJAX를 통해 사용할 수 있으려면 프로토콜이 일치해야합니다.

 

프론트엔트 서버를 HTTPS 형식으로 바꾼다음 접속하니 해당 에러가 뜬다.
백엔드는 HTTP 형식이어서 생기는 오류라고 한다.

HTTP -> HTTPS 로의 요청은 가능하지만 HTTPS -> HTTP 로의 요청은 불가능하다고 함

요청받는 백엔드 서버도 HTTPS 방식으로 바꿔주면 해결된다.

 

/etc/apache2/sites-available/000-default.conf

<VirtualHost *:80>
        ServerName nukeolaf.ga

        ServerAdmin webmaster@localhost
        DocumentRoot /var/www/olaf-front
        <Directory /var/www/olaf-front>
             Options FollowSymLinks
             Allow from all
             AllowOverride all
             Require all granted
        </Directory>

        ErrorLog ${APACHE_LOG_DIR}/error.log
        CustomLog ${APACHE_LOG_DIR}/access.log combined

        RewriteEngine On
        RewriteCond %{HTTPS} off
        RewriteRule .* https://%{HTTP_HOST}%{REQUEST_URI} [R=301,L]
</VirtualHost>

<VirtualHost *:80>
        ServerName nukeolaf-back.ga

        ServerAdmin webmaster@localhost
        DocumentRoot /var/www/olaf-back
        <Directory /var/www/olaf-back>
             Options FollowSymLinks
             Allow from all
             AllowOverride all
             Require all granted
             Header set Access-Control-Allow-Origin "*"
        </Directory>

        ErrorLog ${APACHE_LOG_DIR}/error-back.log
        CustomLog ${APACHE_LOG_DIR}/access-back.log combined

        RewriteEngine On
        RewriteCond %{HTTPS} off
        RewriteRule .* https://%{HTTP_HOST}%{REQUEST_URI} [R=301,L]
</VirtualHost>


<VirtualHost *:443>
        ServerName nukeolaf.ga

        ServerAdmin webmaster@localhost
        DocumentRoot /var/www/olaf-front

        <Directory /var/www/olaf-front>
             Options FollowSymLinks
             Allow from all
             AllowOverride all
             Require all granted
        </Directory>

        ErrorLog ${APACHE_LOG_DIR}/error.log
        CustomLog ${APACHE_LOG_DIR}/access.log combined

        SSLEngine on
        SSLCertificateFile /etc/letsencrypt/live/nukeolaf.ga/cert.pem
        SSLCertificateKeyFile /etc/letsencrypt/live/nukeolaf.ga/privkey.pem
        SSLCertificateChainFile /etc/letsencrypt/live/nukeolaf.ga/fullchain.pem
</VirtualHost>

<VirtualHost *:443>
        ServerName nukeolaf-back.ga

        ServerAdmin webmaster@localhost
        DocumentRoot /var/www/olaf-back

        <Directory /var/www/olaf-back>
             Options FollowSymLinks
             Allow from all
             AllowOverride all
             Require all granted
             Header set Access-Control-Allow-Origin "*"
        </Directory>

        ErrorLog ${APACHE_LOG_DIR}/error-back.log
        CustomLog ${APACHE_LOG_DIR}/access-back.log combined

        SSLEngine on
        SSLCertificateFile /etc/letsencrypt/live/nukeolaf-back.ga/cert.pem
        SSLCertificateKeyFile /etc/letsencrypt/live/nukeolaf-back.ga/privkey.pem
        SSLCertificateChainFile /etc/letsencrypt/live/nukeolaf-back.ga/fullchain.pem
</VirtualHost>

같은 포트로 들어오더라도 어떤 도메인으로 들어오느냐에 따라 다른 document root 를 사용하도록 설정했다

 

 

참고 사이트 >>>

https://rsec.kr/?p=137

https://stackoverflow.com/questions/33507566/mixed-content-blocked-when-running-an-http-ajax-operation-in-an-https-page

https://okky.kr/article/352079