타운광장토픽게시판

크롬에서 링크 문제

dreamlizer
조회 수 1868
크게 작게 댓글로 가기
크게 작게 위로 아래로 댓글로 가기

언제부터인가 크롬에서

XE / 라이믹스 기반의 사이트의 A 링크 클릭이 정상 작동하지 않고 있습니다..

 

예를 들어

http://naver.com

 

이 링크를 클릭하면,

VM93:1 Uncaught TypeError: Cannot set property 'opener' of null
    at <anonymous>:1:146
    at i (rhymix.min.js?20190422155550:1)
    at Function.n.open (rhymix.min.js?20190422155550:1)
    at HTMLAnchorElement.<anonymous> (rhymix.min.js?20190422155550:117)
    at HTMLBodyElement.dispatch (jquery-2.2.4.min.js?20190115061356:3)
    at HTMLBodyElement.r.handle (jquery-2.2.4.min.js?20190115061356:3)

 

뭐 이런 오류를 내뿜는 식이죠..

 

아마 tabnabbing 방지를 위해서 xe.min.js 에 심어둔 어떤 스크립트 때문에 일어나는 오류 같은데,

 

다들 어떻게 대처하고 계신지요?

 

일단 ms 계열 브라우저에서는 문제 없이 작동하고 있으며,

크롬에서도 '마우스 휠 클릭'일 경우는 정상 작동하고 있습니다.

 

태그에 직접 target="_blank" rel="noopener" 속성을 집어 넣어도 마찬가지입니다.

(xe.min.js 에서 모든 _blank 가 들어간 a 태그들을 찾아서 noopener 를 집어넣고 있는 것 같긴 합니다.. 심지어 noopener가 있는 태그에도..)

 

xe의 메뉴 시스템에서 '새 창 열기' 링크를 포함한 경우도 마찬가지이지요.

(스킨에서 직접 noopener 속성을 추가한 경우에도 작동 안하기는 마찬가지더군요..)

 

사이트 운영 (제작) 중에 최근 이런 문제를 겪어보신 적 없으신가요?

겪으셨다면, 어떻게 대응하고 계신가요?

 

 

 

위로 아래로
댓글 21
  • profile
    해당 기능 관련하여 몇 차례 변경이 있었습니다. 최신 버전에서도 동일한 문제가 발생하는지요?
  • profile ?
    네. 지금 보고 있는 글 (여기 XE타운의 이 글)에서도 동일한 문제가 발생하고 있지요?
    제가 쓴 글의 http://naver.com 이 링크만 봐도, 정상 작동하고 있지 않네요.

    흐음..
  • ? profile
    크롬에서는 안 되는데 파이어폭스에서는 잘 되는군요. 그런데 크롬에서도 콘솔에 에러가 찍히지는 않습니다. 최근 버전의 크롬이 문제인 건지...
  • profile ?

    혹시 크롬에서 이 사이트 (xetown)의 '팝업'을 허용해놓으신게 아닐까요? 저는 여기서 링크를 클릭하면 '팝업차단' 경고가 뜨고, 크롬 콘솔창에 위와 같은 에러가 찍히거든요.

  • ? profile

    저도 이점이 약간 이상하게 생각되어지긴 합니다. 크롬 최신버전 언젠가 부터 발생하는 현상입니다. 사이트를 팝업허용으로 설정해 놓지 않으면 사이트에서 밖으로 나가는 링크가 팝업 차단이 됩니다. 크롬에서만 그렇네요. 크롬이 보안이 강화가 된 것인지 이상하긴 합니다.

    xe에서 컨트롤하는 외부 링크는 모두 그렇게 처리되고 그렇지 않은 링크들은 막히지 않으니 아이러니 한 상황입니다.
    내부 광고를 다 외부 광고스크립트를 사용해서 바꿔야 하는건지 약간 혼란 스러운 상황입니다.

     

    크롬 등 브라우저에 막겠다는 건 유저가 클릭하지 않은 상태에서 뜨는 것을 막겠다는거지 이렇게 보고 싶어 클릭하는 걸 막겠다는게 아닌데 XE나 라이믹스가 뭔가 잘못된 신호를 주는 듯 합니다.

    - 제가 운영하는 html 로 만든 사이트의 경우는 외부로 나가는 링크 클릭시 전혀 차단되지 않네요.

  • ?
    정확히 말하면,
    a 링크의 href 주소가 http:// 혹은 https:// 이런 식으로 시작하면 크롬에서 '팝업'으로 인식해서 '팝업차단'을 시키네요.

    그런데, a 링크의 href 주소를 href="//www.naver.com" 이런 식으로 처리하면 정상 작동하고요.

    흐음...
  • profile
    이 문제를 좀더 확인해 보았습니다.

    크롬 72부터 팝업을 차단하는 기준이 강화되었는데, Blankshield.js에서 rel=noopener를 인식하지 못하는 구형 브라우저(예: IE11)와의 호환성 유지를 위해 사용하는 트릭이 크롬의 심기를 건드린다고 하는군요.

    Blankshield.js 개발자가 언제 패치해 줄지는 모르겠지만, 일단 크롬 72 이상 버전에서는 외부 링크 클릭시 `blankshield.open()`을 사용하지 않도록 develop 브랜치에서 변경했습니다. 최신 크롬은 rel=noopener를 잘 인식하기 때문에, 이 속성만 제대로 추가되어 있다면 보안상 문제는 없을 것으로 보입니다.

    https://github.com/rhymix/rhymix/commit/bf5f53024e4bc564f72d6bbc20aedfd06c4d0056
  • profile profile
    XE에서도 고칠수 있도록 도움 부탁드립니다. 그리고 깃허브 댓글로 달았지만 모바일의 돌핀브라우저도 그렇더라구요.
  • profile profile
    User-Agent에 Chrome이라는 단어가 포함된 웹킷 기반의 브라우저들은 모두 비슷할 거예요.
  • profile profile
    xe 의 코어 코드가 달라서 그런데 어디다 넣어야 할까요 ??

    $('body').on('click', 'a[target]', function(e) {
    var $this = $(this);
    var href = String($this.attr('href')).trim();

    if(!href) return;
    if(!href.match(/^(https?:\/\/)/)) return;

    if($this.data('noopener') !== false && !window.XE.isSameHost(href)) {
    var rel = $this.attr('rel');

    if(typeof rel == 'string') {
    $this.attr('rel', rel + ' noopener');
    } else {
    $this.attr('rel', 'noopener');
    }

    blankshield.open(href);
    e.preventDefault();
    }
    });
  • profile profile
    모바일 돌핀 브라우저로 깃허브에 언급해 주신 사이트 접속해 봤더니 Chrome 55 버전으로 잡히네요 ㅡㅡ;
  • profile profile
    blankshield.open(href);를 사용하지 않도록 하려는 목적이니
    그 줄 직전에 조건을 넣어서 return시키면 될 거예요.
  • profile profile
    직전에 추가해주신 코드를 넣었는데 동일하게 차단되네요....
  • profile profile
    https://caniuse.com/#feat=rel-noopener 에 따르면 크롬 49부터 rel=noopener를 지원한다고 하니 버전 조건을 거기까지 낮춰도 될 것 같습니다만, 돌핀은 구버전 주제에 왜 그러는지 모르겠네요 ㅋㅋ
  • profile profile
    일단 돌핀이 문제가 아니고 크롬에서 차단됩니다 ㅡㅡ;
  • profile profile

    XE에서는 common.js를 비롯한 여러 파일들이 xe.min.js로 합쳐져 있고, 디버그 상태가 아니라면 xe.min.js를 로딩하므로 이 파일도 수정하지 않으면 패치가 적용되지 않습니다.

  • profile profile
    흠... pr 좀 해주세요.. 저희 내부 광고가 완전히 지금 손실이 너무 커서... 긴급 수정이 필요합니다 ㅡㅡ;
  • profile profile
    일단 XE에서 고쳐지기 전 까지 http 를 제거해서 링크를 제공해야 겠네요. 이렇게 하면 팝업 차단이 안되는 정보를 이 게시글에서 처음 접했네요...

    다행이 타겟이 되는 사이트를 최근에 https 로 변경해서 그렇게 하면 우선 팝업 차단 회피가 가능해졌네요.
  • profile profile
    xe.min.js 패치가 필요한 부분은 pr 하기도 난감해요. 라이믹스에서 그 파일을 1순위로 날려버린 이유죠 ㅠ
  • ?

    관심갖고 답변주신 분들, 모두 감사합니다!

    (xe.min.js 뜯어보고 있는 중입니다ㅠ)

  • ? ?
    dreamlizer님 common.js는 위치를 찾았는데 혹시 xe.min.js 파일에서 추가 해야 할 위치를 찾으셨나요?