[04-05] https에서의 iframe (군대 사지방)

[코드캠프] 부트캠프에서 만든 '완벽한' 프론트엔드 코스

[04-05] 싸이월드 만들기 2탄

해결된 질문

작성

현재 군대 사지방에서 공부를 하고 있는 군인입니다.

여기서 깃허브 코드스페이스로 개발 공부를 하고 있습니다.

iframe을 사용했을 때, live server로 포트를 열어 html을 열면 https 주소로 이동되고 iframe은 작동되지 않습니다.

vscode 다운로드가 불가능해 로컬 환경에서 돌릴 수가 없는 상황인데 해결방법이 있을까요?

react react-native 하이브리드-앱 graphql next.js

답변 3

노원두

지식공유자

안녕하세요! WHOM12님!

군에서 공부를 하고 계시는군요!
WHOM12님의 열정에 감동했습니다!^^

깃허브 코드스페이스에서는 자동으로 https로 배포된 결과를 직접 받아보실 수 있는데요!
따라서, 아래와 같이 상대경로로 입력을 하시게 되면 자동으로 만들어지는 상대경로의 https 주소도 확인해 보실 수 있답니다!

<< 실제 코드 >>

<< 변환된 결과 >>

이렇게 한 번 시도해 보시고, 그래도 안된다면 실패 결과 화면을 함께 제공해 주시면 더 도움을 드려볼게요!

ohwm

질문자

선생님 일단은
이런식으로 프레임 역할을 하는 div를 만들어서 그 안에 요소를 자바스크립트로 바꾸는 형식으로 계속 공부해나가 보겠습니다.

<div class="right__body_frame">

인프런 AI 인턴

안녕하세요, 인프런 AI 인턴입니다. WHOM12님, 군대에서 학습하기 또한 많은 제약이 있을 것 같아요.

현재적인 상황으론, HTTPS 환경에서 Iframe이 제대로 작동하지 않는 문제를 겪고 계신 것 같습니다. 이 경우 몇 가지 고려해볼 수 있는 사항들이 있습니다:

HTTPS에 대한 이해: HTTPS 환경에서는 HTTP로 제공되는 콘텐츠의 Mixed Content 문제로 인해 Iframe이 동작하지 않는 경우가 많습니다. 모든 리소스를 HTTPS로 제공하도록 설정해야 합니다.
CORS 설정: 특히, 외부 도메인 콘텐츠를 Iframe에 추가하려면, Iframe의 CORS 정책을 확인해봐야 할 수 있습니다. 각 서버는 CORS 정책을 통해 콘텐츠 제공을 제어합니다.
CodeSandbox나 기타 웹 IDE 활용: 로컬 환경에서의 작업이 어려운 경우, CodeSandbox나 StackBlitz와 같은 웹 기반의 IDE를 활용하여 개발 환경을 만들 수 있습니다. 이러한 도구들은 웹 상에서 모든 것을 제공하므로 로컬 설정의 제약 없이 사용할 수 있습니다.
코드 문제 또는 설정 문제 확인: 코드 자체에서의 이슈가 아닌지 확인해보는 것도 중요합니다. HTML 코드와 Iframe의 src URL 설정을 다시 한번 점검해주세요.

관련된 상황으로 인해 제가 이전에 봤던 접속이 안되네요 게시글을 참고하실 수 있습니다. 이 게시글에서는 다른 서버나 외부 URL에 대한 접속 이슈에 대해 다루고 있습니다. 어떤 서버 설정 문제를 인지하는 데 유용할 수 있습니다.

저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다. 현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏 추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.

인프런 커뮤니티 질문&답변

[04-05] https에서의 iframe (군대 사지방)