혼합 콘텐츠 차단이란 무엇이며 프록시 서버를 생성하려면 어떻게 해야 합니까?

안녕하세요 여러분, 최근 반응 프로젝트에서 작업할 때 문제가 발생했습니다. 기본 로그인과 대시보드 페이지로 프로젝트를 생성했습니다. Heroku에 배포했으며 이제 브라우저에서 URL을 방문하고 로그인 자격 증명을 입력하면 로그인 화면에 오류 경고가 표시되고 개발자 도구로 이동하여 네트워크 탭에서 오류가 무엇인지 확인하기 시작했습니다.

혼합 콘텐츠 차단 제한이라는 개발 도구에서 이 두 가지 오류가 발생했습니다.

네트워크 탭 오류

브라우저 콘솔 오류

이제 혼합 콘텐츠 블록이 무엇인지 궁금해지기 시작했습니다. 지금까지 본 적이 없었기 때문에 웹 응용 프로그램과 관련된 모든 문제에 대한 답변을 찾을 수 있는 가장 좋은 위치인 MDN에 무엇이 있는지 검색하기 시작했습니다. . 지금부터 그 요지를 설명하겠습니다.

혼합 콘텐츠 차단이란 무엇입니까?

When a user visits a page served over HTTPS, their connection with the webserver is encrypted with TLS and is therefore safeguarded from most sniffers and man-in-the-middle attacks. An HTTPS page that includes content fetched using cleartext HTTP is called a mixed content page. Pages like this are only partially encrypted, leaving the unencrypted content accessible to sniffers and man-in-the-middle attackers. That leaves the pages unsafe.

여기에 두 가지 유형의 혼합 콘텐츠 블록이 있습니다.

1. 혼합 수동/디스플레이 콘텐츠:

혼합 수동/디스플레이 콘텐츠는 HTTPS 웹페이지에 포함되어 있지만 웹페이지의 다른 부분을 변경할 수 없는 HTTP를 통해 제공되는 콘텐츠입니다.

수동 콘텐츠 목록

이 섹션에는 수동 콘텐츠로 간주되는 모든 유형의 HTTP 요청이 나열되어 있습니다.

<img> (src 속성)

<audio> (src 속성)

<video> (src 속성)

<object> 하위 리소스(HTTP 요청을 수행할 때)

2. 혼합 활성 콘텐츠:

혼합 활성 콘텐츠는 HTTPS 페이지의 문서 개체 모델 전체 또는 일부에 액세스할 수 있는 콘텐츠입니다. 이러한 유형의 혼합 콘텐츠는 HTTPS 페이지의 동작을 변경하고 잠재적으로 사용자의 중요한 데이터를 도용할 수 있습니다. 따라서 위에서 혼합 디스플레이 콘텐츠에 대해 설명한 위험 외에도 혼합 활성 콘텐츠는 몇 가지 다른 공격 벡터에 취약합니다.

활성 콘텐츠 예

이 섹션에는 활성 콘텐츠로 간주되는 몇 가지 유형의 HTTP 요청이 나열되어 있습니다.

<script> (src 속성)

<link> (href 속성)(여기에는 CSS 스타일시트가 포함됨)

<iframe> (src 속성)

XMLHttpRequest 요청

fetch() 요청

<url> 값이 사용되는 CSS의 모든 경우( @font-face , cursor , background-image 등).

<object> (데이터 속성)

Navigator.sendBeacon (URL 속성)

여기서 주로 백엔드 서버에 HTTP IP 주소가 있고 브라우저가 혼합 콘텐츠로 인해 HTTP 호출을 차단하기 때문에 문제가 발생했습니다.

이러한 유형의 오류에 대해 IP 주소에 대한 프록시를 만들 수 있습니다. 이제 일어나는 일은 HTTP 주소를 호출하는 HTTPS 프록시 주소를 호출하는 브라우저에서 요청을 하는 것입니다. 브라우저는 우리가 HTTPS에서 HTTPS로 호출하고 있다는 사실만 알 뿐 프록시 서버에서 만드는 다른 HTTP 호출은 알지 못하기 때문에 완벽하게 작동합니다.

이제 다음을 사용하여 간단한 프록시 서버를 생성할 수 있습니다

.

package.json 명령

을 사용하여 npm init 만들기

이제 http-proxy npm package이라는 npm 패키지를 설치합니다.

다음 코드를 작성하는 server.js 파일을 만듭니다.

const http = require("http");
const httpProxy = require("http-proxy");

const PORT = process.env.PORT || 8080;
httpProxy.createProxyServer({ target: "http://139.XX.0.96:XXX" }).listen(PORT);

이제 node server.js를 사용하여 서버를 실행합니다.

이제 프록시 서버가 준비되었습니다. 우리는 로컬에서 서버로 HTTP 서버로 모든 유형의 요청을 요청할 수 있습니다.

AWS나 Heroku 또는 다른 플랫폼에 배포할 수 있습니다. 해당 서버 IP를 사용하여 HTTP 주소를 호출할 수 있습니다.

참조

MDN 문서 링크:

https://developer.mozilla.org/en-US/docs/Web/Security/Mixed_content/How_to_fix_website_with_mixed_content

https://developer.mozilla.org/en-US/docs/Web/Security/Mixed_content

NPM 패키지 링크:

https://www.npmjs.com/package/http-proxy

If you have any doubts related to this article or anything related to tech or software-engineering in general, drop a comment here or you can message me on twitter .