장고(Django) 템플릿에서 자바 스크립트 alert 의 개행 문자 오류를 수정했습니다.

 

장고

 

 

Django 버전 1.10.3, Python 버전 2.7.5입니다.

다음은 템플릿 코드입니다.

    {% if BondsHolding.memo %}
        <br/>
        <a href="#" title="{{ BondsHolding.memo|safe }}" onclick="alert('{{ BondsHolding.memo|safe }}');">
            [ 메모 ]
        </a>
    {% endif %}

 

다음은 위 템플릿 코드가 실행 되었을 때, 브라우저에서 확인한 html 코드입니다.

 <a href="#" title="1개월 이표채, A, 5년 콜옵션, 
월이자=4,916-680-60=4,176" onclick="alert('1개월 이표채, A, 5년 콜옵션, 
월이자=4,916-680-60=4,176');">
  [ 메모 ]
</a>

브라우저 화면에서 클릭했을 때 다음과 같은 오류가 발생합니다.

Uncaught SyntaxError: Invalid or unexpected token

---

 

 

오류의 원인은 onclick="alert('...')" 내부에 있는 개행 문자(\n)입니다.

HTML 속성 값에서 개행 문자가 포함되면 JavaScript 구문이 깨지면서 SyntaxError: Invalid or unexpected token 오류가 발생합니다.

 

해결 방법

1. escapejs 필터 사용

Django의 escapejs 필터를 사용하여 JavaScript 문자열로 안전하게 변환하면 됩니다.

{% if BondsHolding.memo %}
    <br/>
    <a href="#" title="{{ BondsHolding.memo|safe }}" 
       onclick="alert('{{ BondsHolding.memo|escapejs }}');">
        [ 메모 ]
    </a>
{% endif %}

 

escapejs 필터의 역할:

• 개행 문자(\n) → \n으로 변환
• 작은따옴표(') → \'로 변환
• 큰따옴표(") → \"로 변환

 

2. json_script를 이용한 방법

 

만약 BondsHolding.memo가 긴 문자열이거나 특수문자가 많다면, <script> 태그를 이용하는 것이 더 안전할 수 있습니다.

{% if BondsHolding.memo %}
    <script type="application/json" id="bonds-memo">
        {{ BondsHolding.memo|escapejs }}
    </script>
    <br/>
    <a href="#" title="{{ BondsHolding.memo|safe }}" 
       onclick="alert(document.getElementById('bonds-memo').textContent);">
        [ 메모 ]
    </a>
{% endif %}

 

json_script 활용의 장점:

• JavaScript 코드에서 직접 문자열을 처리하므로, HTML 속성에서 발생하는 문제를 방지
• 더 긴 문자열도 안전하게 출력 가능

 

위 방법을 적용하면 onclick 내부의 JavaScript 코드가 정상적으로 실행됩니다.

 

 

1, 2번의 방법을 사용해 보시고, 더 적합한 방법을 사용하시기 바랍니다.

 

 

https://www.djangoproject.com/

Django