스크립트를 짜다보면 종종 url이 같은 호스트의 주소인지 아닌지 식별해야 할 때가 있습니다.

자동링크 애드온에서 외부 링크에 target="_blank" 속성을 붙여줄 때가 대표적이죠.

 

이 경우에 isSameOrigin이라는 함수가 사용된 것을 알 수 있습니다.

isSameOrigin(location.href, url) 로 url이 현재 주소와 같은 호스트인지 아닌지를 true/false로 반환해줍니다.

 

그리고 window.XE.isSameHost(url)을 사용할 수도 있습니다.

이 역시 주어진 url이 내부 주소인지 아닌지를 true/false로 반환해줍니다.

 

저도 유용하게 사용한 김에 정리해서 올려봤습니다 :)

덧. 둘 모두 /common/js/common.js에 정의되어 있습니다.

윤삼

profile
아무래도 중급 초반 수준의 코딩 오타쿠인 것 같습니다.
  • profile

    두 함수가 약간 다릅니다.

     

    isSameOrigin은 브라우저에서 cross-origin으로 취급하여 AJAX 요청을 제한하는 기준과 동일하게 맞추어져 있습니다. 다른 도메인이라거나, https 사이트에서 http 주소를 요청한다거나 하면 에러가 발생하지요. AJAX 요청이 가능한 주소인지, 그 밖에 보안상 구분이 필요한 부분을 체크할 용도로는 isSameOrigin 함수가 적합합니다.

     

    isSameHost는 브라우저의 기준과 무관하게, 현재 사이트에 소속된 주소인지 판단하는 것이 목적입니다. https 사이트에서 http 주소를 확인하더라도 도메인이 같으면 true가 나옵니다. 반면, 같은 도메인이라도 /rhymix/라는 폴더에 설치된 라이믹스에서 /xe/라는 폴더에 설치된 XE의 주소를 확인하면 false가 나옵니다. 같은 도메인이지만 서로 관련이 없고 회원가입도 따로 받는 두 개의 섹션을 운영하고 있을 수도 있으니까요. 사용자가 입력한 링크가 외부 주소라면 새 창에 띄우고 내부 링크라면 iframe으로 띄운다거나, 붙여넣은 이미지가 외부 주소라면 불러다가 첨부하고 내부 주소라면 그냥 둔다거나, 이런 편의 기능을 구현하기에는 isSameHost 함수가 적합합니다.

  • profile profile
    처음에는 비슷한데 왜 둘 다 있는 걸까, 하고 궁금했었는데 의문이 한 방에 가십니다.
    어떤 본능적인 느낌으로 isSameHost를 썼는데, 외부 이미지 첨부 목적으로 내부 url 주소는 거르려고 하는 거니까 딱 맞는 거네요ㅋㅋ