길찾기 iframe 관련 문의

카카오맵 API (지도/로컬)
1

[FAQ] 지도/로컬 API 문의 전 꼭 읽어 주세요.
https://devtalk.kakao.com/t/faq-api/125610

나주시버스정보시스템 유지보수업체입니다

부산버스정보시스템에서 사용하고 있는 길찾기 기능을 나주시에도 적용하고 싶어서 문의드립니다.
https://m.map.daum.net/actions/routeView

나주시는 현재 모바일 페이지가 없어 신규 개발중이며
현 개발중인 모바일 페이지에서
위 url을 iframe 사용시 아래와 같은 에러가 발생하고 있습니다

Access to script at ‘https://t1.daumcdn.net/kakaomapweb/cssjs/sentry.min.5.27.4.js’ from origin ‘https://m.map.kakao.com’ has been blocked by CORS policy: The ‘Access-Control-Allow-Origin’ header has a value ‘https://map.kakao.com’ that is not equal to the supplied origin.
sentry.min.5.27.4.js:1

Failed to load resource: net::ERR_FAILED
newmmap.min.202403261310173.js:55 Uncaught DOMException: Failed to set the ‘domain’ property on ‘Document’: Assignment is forbidden for sandboxed iframes.
at https://t1.daumcdn.net/mmapweb/jscss_kakaomap/newmmap.min.202403261310173.js:55:64747

특이 사항은 플러터로 웹개발을 진행중이며
해당 화면은 나오지만 기능이 동작을 안하고 있습니다.

2

@k1024dorothy

안녕하세요~
우선 Flutter의 웹기반 빌드시 어떠한 방식으로 빌드되어 실행되는지 알 수 없고, 제가 flutter를 잘 몰라서 이 부분은 제외하고 답변드리겠습니다.

위 오류들은 iframe에 제약사항이 걸려서 발생하는 문제로 보입니다.
일단 m.map.kakao.com 의 routeView페이지에는 아무 문제가 없습니다.

위 페이지를 동작시키는 코드에서는 내부적으로 document.domain값도 설정해서 이용해야하는 모듈들도 있기에; 이를 설정하는 코드가 내부에 들어가 있습니다.

즉 이 부분때문에라도 이슈가 발생할 수 있고, Flutter가 iframe을 만들때 보안제약이 걸리는 sandbox 옵션을 넣어서 만들 수도 있을것 같습니다.
sentry.min 파일은 iframe에 sandbox (제약사항 전체 적용)를 넣기만 해도 발생하네요.

아무튼, 해당 페이지가, 다른 사이트에 삽입되도 모든게 정상적으로 동작할 수 있도록 개발된 페이지가 아닙니다. 그래서 외부에서 특정 페이지를 임포팅할 수는 있겠으나, 그에따라 파생되는 이슈는 직접 해결하셔야 합니다.

개인적인 생각으로는 Flutter의 설정이슈나, 환경문제 같아 보이네요.
iframe sannbox 옵션은
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe
여기나 구글링 해보시면 정보가 많이 나오기 때문에 참고해 보시기 바랍니다.