자유게시판자유게시판 "자유"
자유

크롬에서 링크 문제

? Lv2
dreamlizer
조회 수 1962 추천 수 0 댓글 21
크게 작게 댓글로 가기
크게 작게 위로 아래로 댓글로 가기

언제부터인가 크롬에서

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
  • Lv37
    해당 기능 관련하여 몇 차례 변경이 있었습니다. 최신 버전에서도 동일한 문제가 발생하는지요?
  • Lv37 ? Lv2
    네. 지금 보고 있는 글 (여기 XE타운의 이 글)에서도 동일한 문제가 발생하고 있지요?
    제가 쓴 글의 http://naver.com 이 링크만 봐도, 정상 작동하고 있지 않네요.

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

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

  • ? Lv2 Lv30

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

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

     

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

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

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

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

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

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

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

    https://github.com/rhymix/rhymix/commit/bf5f53024e4bc564f72d6bbc20aedfd06c4d0056
  • Lv37 Lv30
    XE에서도 고칠수 있도록 도움 부탁드립니다. 그리고 깃허브 댓글로 달았지만 모바일의 돌핀브라우저도 그렇더라구요.
  • Lv30 Lv37
    User-Agent에 Chrome이라는 단어가 포함된 웹킷 기반의 브라우저들은 모두 비슷할 거예요.
  • Lv37 Lv30
    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();
    }
    });
  • Lv37 Lv30
    모바일 돌핀 브라우저로 깃허브에 언급해 주신 사이트 접속해 봤더니 Chrome 55 버전으로 잡히네요 ㅡㅡ;
  • Lv30 Lv37
    blankshield.open(href);를 사용하지 않도록 하려는 목적이니
    그 줄 직전에 조건을 넣어서 return시키면 될 거예요.
  • Lv37 Lv30
    직전에 추가해주신 코드를 넣었는데 동일하게 차단되네요....
  • Lv30 Lv37
    https://caniuse.com/#feat=rel-noopener 에 따르면 크롬 49부터 rel=noopener를 지원한다고 하니 버전 조건을 거기까지 낮춰도 될 것 같습니다만, 돌핀은 구버전 주제에 왜 그러는지 모르겠네요 ㅋㅋ
  • Lv37 Lv30
    일단 돌핀이 문제가 아니고 크롬에서 차단됩니다 ㅡㅡ;
  • Lv30 Lv37

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

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

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

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

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

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