웹 개발 중 새로운 창으로 열면서 POST 데이터를 전달해야 할 때가 있습니다.

단순히 페이지를 여는 것이 아니라, 정보를 안전하게 POST 방식으로 전송하고 싶다면 어떻게 해야 할까요?

이 글에서는 자바스크립트를 활용하여 새 창으로 POST 데이터를 전송하는 방법을 자세히 알아보겠습니다.

핵심 코드 분석:

function openNewWindow(content_id) {
  const form = document.createElement('form');
  form.method = 'POST';
  form.action = '팝업주소'; 
  form.target = '_blank'; 

  const hiddenField = document.createElement('input');
  hiddenField.type = 'hidden';
  hiddenField.name = 'content';
  hiddenField.value = content; 

  form.appendChild(hiddenField);
  document.body.appendChild(form); 
  
  form.submit();
}

코드 설명:

1. 폼 생성
   • document.createElement(‘form’);
   • 데이터를 담아 전송할 폼 요소를 동적으로 생성합니다.
2. POST 방식 설정
   • form.method = ‘POST’;
   • 데이터 전송 방식을 POST로 지정하여 보안을 강화합니다.
3. 새로 열 URL 설정
   • form.action = ‘팝업주소’;
   • 데이터를 받아 처리할 페이지의 주소를 설정합니다.
4. 타겟 설정
   • form.target = ‘_blank’;
   • _blank로 설정하여 새 창에서 페이지를 엽니다.
5. 숨겨진 필드 추가
   • const hiddenField = document.createElement(‘input’);
     hiddenField.type = ‘hidden’;
     hiddenField.name = ‘content’;
     hiddenField.value = content;
   • 전송할 데이터를 숨겨진 필드에 담아 사용자에게 노출되지 않도록 합니다.
6. 폼 제출
   • form.submit();
   • 자바스크립트를 통해 폼을 자동으로 제출하여 데이터를 전송합니다.

왜 POST 방식을 사용해야 할까요?

GET 방식은 URL에 데이터가 노출되어 보안에 취약할 수 있습니다. 민감한 정보를 다룰 때는 POST 방식을 사용하여 데이터를 안전하게 전송해야 합니다.

자바스크립트를 사용하여 새 창으로 열면서 POST 데이터를 전송하는 방법에 대한 설명을 마치도록 하겠습니다.

감사합니다.