Not allowed to navigate top frame to data URL

개요

결과 페이지에서 결과를 이미지로 저장하는 기능을 구현하는 부분에서 여러 문제를 맞이했다.

어떤 문제를 맞이했고 어떻게 해결했는지 정리 해보려 한다.

문제

html2canvas로 이미지로 저장하고 싶은 영역을 지정 후 해당 이미지를 저장할 수 있게 끔 구현을 했다.

수월하게 진행 되는 듯 했으나, 몇 가지 문제가 발생했다.

모바일 문제

처음 구현했을 당시 코드

const saveAsImageHandler = () => {
    const target = document.getElementById('content');
    if (!target) {
      return alert('결과 저장에 실패했습니다.');
    }
    html2canvas(target).then((canvas) => {
      const link = document.createElement('a');
      document.body.appendChild(link);
      link.href = canvas.toDataURL('image/png');
      link.download = 'lol-mbti-result.png';
      link.click();
      document.body.removeChild(link);
    });
  };

이렇게 작성했을 때 PC에서는 전혀 문제가 없었으나, IPhone 기준 Safari 브라우저 외에 모두 작동하지 않았다. Android에서는 테스트를 해볼 수가 없어서 비슷한 상황으로 구글링을 해본 결과 Samsung Phone에서 자동 다운로드를 차단 해 놓은 것으로 확인 됐다.

그래서 download attribute 사용하지 않고 저장할 수 있는 방법을 생각해 냈어야 했다.

고민

어떤 방법이 있을까 생각을 하며, 다른 웹,앱 서비스 등 참고해보며 같은 기능을 한 부분을 최대한 찾아봤.

https://forest-mt.seekrtech.com/ 이 MBTI 테스트에서 이미지를 저장하는 기능을 발견했는데, 이 서비스에서는 결과 자체가 image 태그로 보여지고 있어서 context menu 에서 이미지를 저장할 수 있게 끔 구현을 한 것으로 확인이 됐다.

그래서 나도 이 부분을 참고해서 context menu를 활용해서 이미지를 저장할 수 있게 끔 개선 작업을 하려는데 내 서비스에서는 결과 부분이 image가 아니고 text를 받아와서 직접 보여주고 css 스타일링으로 보여지게 작성되어있어서 context menu를 활용할 수 가 없어서 또 어떤 방법이 있나 고민을 하던 중에, 무료 이미지를 저장하는 사이트 같은 서비스에서는 새로운 Modal 창이나 image의 url로 새로운 브라우저 창을 열고 거기서 context menu를 통해서 image를 저장할 수 있게 끔 구현 되어 있는 것을 발견할 수 있었다.

Not allowed to navigate top frame to data URL 오류

html2canvas로 image url을 생성해서 새로운 브라우저 창에서 보여질 수 있도록 구현했다.

해당 부분 코드

const saveAsImageHandler = async () => {
    const target = document.getElementById('content');
    if (!target) {
      return alert('결과 저장에 실패했습니다.');
    }
    try {
      const canvas = await html2canvas(target);
      const link = document.createElement('a');
      document.body.appendChild(link);
      link.setAttribute('target', '_blank');
      link.href = canvas.toDataURL('image/png');
      link.click();
      document.body.removeChild(link);
    } catch (error) {
      alert('결과를 저장할 수 없습니다.');
    }

a tag에 link를 html2canvas로 받은 링크를 넘겨주면서 무난하게 이미지를 보여주는 새로운 창이 열릴 줄 알았으나

위와 같은 오류가 발생하면서 빈 주소 창만 열리는 것이었다.

위와 같은 오류가 발생하는 이유는 알아본 결과

Google Chrome에서 보안상 base64 URL을 직접 열지 못하도록 업데이트 했기 때문이었다.

하... 여기서 정말 막막했는데 역시 당연하다는 듯이 나는 구글링을 했다..

개선

드디어 방법을 찾았다! 바로 base64 URL 말고 Blob을 통해서 새로운 이미지 창으로 열 수 있었다.

비슷한 상황 참고: https://itechowl.wordpress.com/2020/01/27/javascript-not-allowed-to-navigate-top-frame-to-data-url-chrome/

그래서 나는 곧바로 html2canvas 이용해서 해당 Blob을 받아와서 새로운 이미지 창이 열리도록 코드를 수정했다.

  const saveAsImageHandler = async () => {
    const target = document.getElementById('content');
    if (!target) return alert('결과 저장에 실패했습니다.');
    alert(
      '새로운 창이 열리면\nPC에서는 우클릭 -> 이미지 저장하기\n모바일은 이미지를 꾹 눌러주세요!\n*새로운 창이 안 열린다면 팝업을 해제해주세요*'
    );
    try {
      const canvas = await html2canvas(target);
      canvas.toBlob((blob) => {
        const uri = URL.createObjectURL(blob);
        window.open(uri);
      });
    } catch (error) {
      alert('결과를 저장할 수 없습니다.');
    }
  };

PC에서도 정상 작동이 되고,

모바일 Safari, Chrome에서도 정상 작동이 되지만 카카오톡 브라우저, 네이버 브라우저 같은 일반적이지 않은(?) 브라우저에서는 새로운 창이 열리지 않았지만 기본적인 브라우저들에서는 정상 작동이 되기 때문에 이 부분까지 만족하고 나중에 문제가 된다면 다시 다른 방법을 생각해보도록 할 것이다.