(질문)KG이니시스 팝업차단 문제 발생(강의 13. 자바스크립트만으로 포트원 결제 구현하기, 7분18초)

해당 파일

mall_test\templates\mall_test\payment_form.html

1. 문제점
코드 작성후 결제 테스트를 해보니, KG이니시스의 팝업이 차단되었다는 메세지가 있는 창이 계속 발생합니다.

2. 상황

1) 크롬에서 팝업 차단 안되게 설정함(캡쳐1 참조)
2) 강의 원본 코드(캡쳐2 참조) 및 버튼 추가 코드(캡쳐3 참조)에서 동일하게 KG이니시스의 팝업이 차단되었다는 내용의 창이 발생해서 더 이상 결제 진행이 안됩니다.
3) PG사를 카카오페이 혹은 토스페이먼츠로 설정시 정상 결제 진행됨.

3. 해당 코드
1) 강의 원본 코드(결과는 캡쳐2 참조)

{% extends "mall_test/base.html" %} {% block content %}
<h2>결재하기</h2>

<script src="https://cdn.iamport.kr/v1/iamport.js"></script>
<script>
  (function () {
    const IMP = window.IMP;
    const code = "iamport";
    IMP.init(code);

    const merchant_uid = "merchant_" + new Date().getTime();

    IMP.request_pay(
      {
        merchant_uid: merchant_uid,
        name: "주문 테스트",
        amount: 100,
      },
      function (response) {
        // 콜백 함수
        console.log(response);
      },
    );
  })();
</script>
{% endblock %}

2) 버튼 추가 코드(결과는 캡쳐3 참조)

• KG이니시스: 팝업 차단이 되었다는 창이 발생해서 더이상 결재 진행 안됨

• 카카오페이 혹은 토스페이먼츠: 정상 결재 완료됨

{% extends "mall_test/base.html" %} {% block content %}
<h2>결재하기</h2>

<button id="payButton">결제하기</button>
<script src="https://cdn.iamport.kr/v1/iamport.js"></script>
<script>
  (function () {
    const IMP = window.IMP;
    IMP.init("imp로 시작하는 코드"); // 포트원에서 발급받은 imp 사용

    document.getElementById("payButton").addEventListener("click", function () {
      const merchant_uid = "merchant_" + new Date().getTime();

      IMP.request_pay(
        {
          // pg: "kakaopay.TC0ONETIME", // 카카오페이 (등록된 PG)
          pg: "tosspayments.iamporttest_3", // 토스페이먼츠 (등록된 PG)
          // pg: "html5_inicis.INIpayTest", // KG이니시스 HTML5 (등록된 PG)
          pay_method: "card",
          merchant_uid: merchant_uid,
          name: "주문 테스트",
          amount: 100,
        },
        function (response) {
          console.log(response);
          if (response.success) {
            alert("결제 완료!");
          } else {
            alert("결제 실패: " + response.error_msg);
          }
        },
      );
    });
  })();
</script>
{% endblock %}

4. 캡쳐한 사진들

캡쳐1: 크롬 팝업 차단 해제 설정함

캡쳐2: 강의 원본 코드(KG이니시스 팝업 차단 메세지 발생)

캡쳐3: 버튼 추가 코드(KG이니시스 팝업 차단 메세지 발생)

답변 2

0

이진석

2026-02-21T23:05:45.446Z

안녕하세요. :-)

우선 질문에 감사드립니다.

inicis 의 경우에만 팝업 차단으로 인해 결제가 진행되지 않은 상황을 파악해보니,

장고 기본에서는 Cross-Origin-Opener-Policy 헤더가 디폴트로 same-origin 이라서, 새로 연 Cross-Origin 문서는 window.opener 값이 null이 되더라구요. 그래서 팝업이 열렸지만, 팝업을 제어할 수 없는 상황이었습니다. 이 헤더를 "same-origin-allow-popups" 로 변경하시면, button 을 통한 메서드 호출을 하지 않으셔도 inicis 결제 시에 팝업이 잘 열리실 겁니다.

mdn 문서 : https://developer.mozilla.org/en-US/docs/Web/HTTP/Reference/Headers/Cross-Origin-Opener-Policy

django 4.0 부터 cross-origin-opener-policy 설정이 지원되었고, 크롬 브라우저는 2020년 5월 시점부터 이 헤더를 지원한 것으로 보여집니다.
https://github.com/django/django/blob/67d0c4644acfd7707be4a31e8976f865509b09ac/django/conf/global_settings.py#L645

---

장고 프로젝트 전역으로 Cross-Origin-Opener-Policy 헤더를 변경하는 것은 보안상 좋지 않구요.아래와 같이 장식자 함수를 만들어두시고,

팝업 허용이 필요한 View 함수에만 아래와 같이 적용해보시면 좋으실 듯 합니다.

살펴보시고, 댓글 부탁드립니다. 감사합니다.

이진석 드림. :-)

-1

인프런 AI 인턴

2026-02-20T09:46:21.363Z

안녕하세요, 인프런 AI 인턴입니다. Luke Yu님께서 질문하신 KG이니시스의 팝업 차단 문제에 대해 안내드리겠습니다.

KG이니시스로 설정한 경우에 팝업이 차단된다고 하셨는데, 이는 보통 브라우저의 팝업 차단 설정과 관련이 있습니다. 브라우저 설정에서 팝업이 차단되지 않도록 예외 사이트에 추가하는 방법 외에도 몇 가지 기술적인 접근을 통해 문제를 해결할 수 있습니다.

1. 브라우저 팝업 예외 설정 확인:

   • 캡쳐1에서 보여주신대로, 브라우저의 설정에서 해당 사이트를 팝업 차단의 예외 사이트로 등록하셨다면 문제가 해결될 수 있습니다. 만약 이와 관련하여 추가적인 설정이 필요하다면, 데이터베이스나 API의 최신 상태가 반영되어 있는지 확인하는 것이 중요합니다.
     

2. 코드 상에서의 문제 해결:

   • IMP.request_pay 메서드를 호출할 때, 특정 PG사에 대해서는 추가적인 설정이 필요할 수 있습니다. KG이니시스의 경우 적절한 인증 정보(PG사 ID 및 매장코드)가 정확히 입력되어야 합니다.
     
   • 해당 PG사가 제대로 설정되어 있는지, 그리고 Iamport 관리 콘솔에서 KG이니시스와의 연결이 활성화되어 있는지 확인해보세요.
     

3. 포트원 문서 링크 참고:

   • KG이니시스와의 연결 설정 및 기타 요구 사항들(예: 인증키 등)을 적절하게 설정했는지 확인하기 위해, 포트원의 공식 문서를 참고하시는 것이 좋습니다. 포트원 KG이니시스 연동 문서에서 관련 정보를 확인하실 수 있습니다.
     

추가로 좀 더 구체적인 에러 로그나 콘솔 메시지가 있으면, 문제를 더 정확하게 파악할 수 있을 것 같습니다.

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