mailto 프로토콜을 통해 메일을 수발신을 해보자

랜딩 페이지를 만들 때 잠재 고객으로부터 메일을 받기 위해 지금까지 해왔던 방법은 다음과 같다.

 

메세지 전송을 누르면 DB에서 이미 메일을 보냈는지 duplicate check를 하고 중복되지 않았다면 email을 DB에 저장

=> 그 후, mailgun API를 통해 해당 이메일에게 감사 메세지 발송

=> 메일을 보내는 데 성공하면 toast를 띄우거나 (react-toastify 가 참 디자인이 잘 되어 있다), Thanks you 페이지로 이동시켰다.

 

이렇게 번거롭게 한 이유는 누구도 outlook을 사용하지 않기 때문이다.

윈도우에서는 브라우저에서 별도 설정을 하지 않는 경우 outlook이 켜지는 것으로 알고 있다.

 

그런데 일반 기업 페이지에서 mail을 받아야 할 때는? 쉽게 말해 우리가 아쉬운 처지가 아니라 직원 모집 등을 위한 메일을 요구할 때는 굳이 DB까지 두어야 할 필요가 없다.  '통로는 열어두었다'라는 생색을 낼 용도 정도로만 구현하면 되므로 아래 send만 누르면, 자동으로 outlook이 켜지도록 만들어보기로 했다. 

 

(추가적으론, 어뷰징을 막기 위해 recapcha를 달아놨지만, 이 글의 주제는 아니기에 생략합니다)

 

 

mailto는 이메일 주소를 위한 통합 자원 식별자(URI) 스킴이다. 이메일 클라이언트로의 복사 및 입력 과정 없이 사용자들이 특정한 주소로 전자 우편을 보낼 수 있도록 웹사이트의 하이퍼링크를 만들기 위해 사용된다.

 

 

가장 기본적인 사용법이다.

<a href="mailto:darrenkwon@gmail.com"></a>

 

여러 사람에게 메일을 보내고 싶은 경우 아래처럼 (,)로 구분하면 된다.

<a href="mailto:darrenkwon@email.com,anatomy1545@gmail.com">what</a>

 

메일의 제목, 내용을 넣기 위해서는 다음과 같이 작성하면 됩니다.

<a href="mailto:darrenkwon@email.com?subject=메일의 제목을 넣습니다&body=내용을 넣습니다">what</a>

 

크롬 계열 브라우저에서는 gmail을 이용하실수도 있지만, 일반적으론 outlook이 켜집니다.

저는 gmail을 사용하도록 연결해서 아래처럼 뜹니다.

 

 

 

 

 

아니 Validation은 언제합니까?

 

form 제출 후 validation을 적절하게 하시고

그 이후에 a tag DOM을 js로 생성하여 mailto를 사용하는 것이 좋습니다.

 

다음과 같이요. 쉽죠?

const onSubmit = (data) => {
  // some validating logic...
  // ok, validation checked.

  const body = `name: ${data.name}\n email: ${data.email} \n phone: ${data.phone} \n city: ${data.city}`;
  const mailtoDom = document.createElement('a');
  mailtoDom.setAttribute('href', `mailto:darrenkwon@email.com?subject=메일의 제목을 넣습니다&body=${body}`);
  mailtoDom.click();
  
  // 굳이 dom을 지워주고 싶다면
  // mailtoDom.remove();
};

 

 

저는 이미지도 넣고 싶은데요

base64 방식의 인코딩을 통해 이미지 또한 메일에 첨부하여 보내...려고 했으나 서버를 거치지 않고선 불가능합니다.

file 객체를 FileReader로 읽어 base64로 인코딩한 결과물은 img 태그에 붙여서 mailto에 삽입하려고 하였으나 불가능하다네요.

 

 

결국 이미지를 넣기 위해서는

서버를 거쳐서, 이미지를 저장한 경로를 붙이는 방법 외에는 없는 겁니다.

stackoverflow.com/questions/5233556/using-mailto-to-send-email-with-an-attachment

• Have the user choose a file
• Upload the file to a server
• Have the server return a random file name after upload
• Build a mailto: link that contains the URL to the uploaded file in the message body

 

웹 해킹을 공부해보셨으면 알겠지만 img에 스크립트를 심어서 수신자를 공격할 수 있습니다.

보안적인 문제 때문에 막아놓은 듯합니다.

 

억지로 보낸다면 아래처럼 단순히 문자열로 보일 뿐이네요.

https://stackoverflow.com/questions/26373737/sending-mail-from-html-page-with-image-in-the-body

 

그래도 코드가 아까우니 남겨봅니다...

const onSubmit = (data) => {

   let imgBase64Arr = [];
   function getBase64(file) {
    return new Promise((resolve, reject) => {
      const reader = new FileReader();
      reader.readAsDataURL(file);
      reader.onload = () => {
        console.log('reader.result', reader.result);
        return resolve(reader.result);
      };
      reader.onerror = (error) => reject(error);
    });
  }
  
  // data.pics에 든 객체들을 arr로 변환 후 각각 base64로 변환한다.
  Array.from(data.pics).forEach(async (img) => {
    const encoded = await getBase64(img);
    imgBase64Arr.push(encoded);
    
    const body = `name: ${data.name}\n email: ${data.email} \n phone: ${data.phone} \n city: ${data.city} \n pics: <img src=${imgBase64Arr[0]} />`;
    
    const mailtoDom = document.createElement('a');
    mailtoDom.setAttribute('href', `mailto:darrenkwon@email.com?subject=메일의 제목을 넣습니다&body=${body}`);
    mailtoDom.click();
  });

 

 

 

참고)

ko.wikipedia.org/wiki/Mailto

delirussum.tistory.com/73