[{"data":1,"prerenderedAt":415},["ShallowReactive",2],{"content-doc:article:/articles/target-blank-not-working-with-disqus":3,"content-surroundings:article:/articles/target-blank-not-working-with-disqus":404},{"id":4,"title":5,"body":6,"date":384,"description":385,"extension":386,"kind":387,"meta":388,"navigation":389,"ogImage":390,"path":391,"seo":392,"sitemap":393,"stem":395,"tags":396,"updatedAt":402,"__hash__":403},"article/articles/target-blank-not-working-with-disqus.md","target='_blank'なリンクが開かない",{"type":7,"value":8,"toc":370},"minimark",[9,13,32,36,46,52,65,68,71,74,77,96,99,102,105,108,123,126,129,132,149,152,155,158,174,180,185,188,198,201,205,212,215,223,226,344,347,366],[10,11,12],"h2",{"id":12},"結論",[14,15,16,29],"ul",{},[17,18,19,20,24,25,28],"li",{},"外部リンクを新規タブで開く場合、aタグに ",[21,22,23],"strong",{},"noreferrer",", ",[21,26,27],{},"noopener"," 属性を付ける必要はない",[17,30,31],{},"Disqusの Affiliate link のチェックを外す",[10,33,35],{"id":34},"経緯-target_blank-のリンクが開かない","経緯: target=\"_blank\" のリンクが開かない",[37,38,39,40,45],"p",{},"このブログでは、外部リンクに ",[41,42,44],"code",{"html":43},"","target=\"_blank\""," を付けることで、デフォルトで新しいタブを開くようにしている。",[47,48,49],"note",{},[37,50,51],{},"2026/01/17時点では Nuxt Content でブログを書いていますが、当時は Hugo で作成していました。",[37,53,54,55,64],{},"ところが、本番環境に記事を公開して閲覧していたところ、外部リンクが正しく開かない現象に遭遇した。\n具体的には、リンク押下後に Google Chrome ではアドレスバーに ",[41,56,59],{"className":57,"language":58,"style":43},"language-html shiki shiki-themes github-light","html",[60,61,63],"span",{"class":62},"sgsFI","about:blank"," と表示され、新規タブで真っ白なページが開く。",[37,66,67],{},"Safari では、アドレスバーに遷移元のURLが表示され、新規タブで真っ白なページが表示される。",[37,69,70],{},"さらに奇妙なのは、この挙動が一定ではない点。\n例えば「1回目は正しくリンク先が開くのに、2回目以降は真っ白なタブになってしまう」場合もあれば、「最初のクリックから真っ白なタブが開く」場合もある。",[37,72,73],{},"ただ、新規タブを開くを押下 or Command + クリックすると正常に開く。",[37,75,76],{},"まとめると👇️",[14,78,79,84,87,90],{},[17,80,81,83],{},[41,82,44],{}," なリンクをクリックすると、真っ白なページが開く",[17,85,86],{},"新規タブのアドレスバーの値がブラウザによって異なる",[17,88,89],{},"真っ白なタブが開くタイミングにばらつきがある",[17,91,92,95],{},[41,93,94],{},"新しいタブで開く"," は問題ない",[37,97,98],{},"🤔????",[37,100,101],{},"なんだこれ...",[10,103,104],{"id":104},"原因",[37,106,107],{},"クリックイベントを補足しているスクリプトを調べたところ、Disqus の一部スクリプトが関係していそうだった。\nDisqus はウェブサイトやブログにコメントを追加できるサービス。\n2007年頃の立ち上げから2013年頃に向けてバズった模様。それ移行も「Disqus導入してみた」系の記事は散見され、私も Hugo で作成している本ブログに導入した。\nそれが 2024年8月初旬頃。",[37,109,110,111,115,116],{},"Disqus には、外部リンクを自動的にアフィリエイトリンクに差し替える ",[112,113,114],"em",{},"Affiliate Links"," 機能がある。これにより収益を得ている模様。\n",[117,118,122],"a",{"href":119,"rel":120},"https://tuhrig.de/the-disqus-affiliated-links-program/?utm_source=chatgpt.com",[121],"nofollow","The Disqus Affiliated Links Program",[37,124,125],{},"Disqusで新しいサイトを作成するとデフォルトで有効化されている。",[37,127,128],{},"これが有効だと、記事内リンクのクリックをスクリプトで捕捉し、アフィリエイトリンク先にリダイレクトする。\nこの機能を無効化することでスクリプトが読み込まれなくなり、正常に新規タブで外部リンクを開けるようになる。",[37,130,131],{},"おそらく新規タブを開いた後に非同期で取得したリンクにリダイレクトをさせる処理があり、それが何らかの理由で、うまくいってなかったっぽい。",[37,133,134,137,138,141,142,145,146,148],{},[41,135,136],{},"opener"," で新規タブの ",[41,139,140],{},"location"," をアフィリエイトサイトのリンクに変更しているが、",[41,143,144],{},"nopener"," 属性のせいでうまくいかない...というストーリーかと思ったが、それだとすべての ",[41,147,44],{}," なリンクが開けなくなるし、そもそも元タブから新規タブのURLを変更するのはlocationじゃない気がするし...",[37,150,151],{},"うーん、よくわからない",[10,153,154],{"id":154},"解決方法",[37,156,157],{},"とりあえずDisqusのアフィリエイトリンク設定を無効にすること",[159,160,161,168],"ol",{},[17,162,163,167],{},[117,164,166],{"rel":165},[121],"Disqus Advanced Settings"," にアクセス",[17,169,170,173],{},[41,171,172],{},"affiliate links"," のチェックを外す",[37,175,176],{},[177,178],"binding",{"value":179},"\u003C figure src=\"/結論/2025-09-14_20-06-36_スクリーンショット 2025-09-14 20.06.30.png\" title=\"Disqusのアフィリエイトリンクを無効にする\" width=\"720\" >",[181,182,184],"h3",{"id":183},"追記-2025-09-14","追記 2025-09-14",[37,186,187],{},"今動作を確認したところ、",[14,189,190,193],{},[17,191,192],{},"アフィリエイトリンク機能が有効",[17,194,195,197],{},[41,196,44],{}," なリンク",[37,199,200],{},"でも問題なく遷移できた。",[202,203,204],"h4",{"id":204},"テスト用ページ",[37,206,207],{},[117,208,211],{"href":209,"rel":210},"https://tsonobe1.github.io/gisqus_link_test/",[121],"Disqus Affiliate Links テスト",[37,213,214],{},"執筆時は確かに記事冒頭の動作だった気がするけど...",[10,216,218,219,222],{"id":217},"新規タブで開きたい-aタグ-の属性はどうすべきか","新規タブで開きたい ",[41,220,221],{},"\u003Ca>タグ"," の属性はどうすべきか",[37,224,225],{},"良い機会なので調べ直してみた。",[14,227,228,241,262,270,291,315,329],{},[17,229,230,232],{},[41,231,23],{},[14,233,234],{},[17,235,236,237,240],{},"ページA → ページB の遷移時に、 ",[41,238,239],{},"HTTP Referer"," ヘッダの送信を省略する",[17,242,243,245],{},[41,244,27],{},[14,246,247,257],{},[17,248,236,249,252,253,256],{},[41,250,251],{},"window.opener"," を ",[41,254,255],{},"null"," に設定する",[17,258,259,261],{},[41,260,239],{}," ヘッダは送信される",[17,263,264,266,267,269],{},[41,265,23],{}," を設定すると、 ",[41,268,27],{}," の設定が自動付与される",[17,271,272,275,276],{},[41,273,274],{},"window.opener.location = \"\u003CURL>\""," のように書き換えると、ページAのタブを任意のページCに遷移できる\n",[14,277,278,285],{},[17,279,280,281,284],{},"この仕様を用いた攻撃を ",[41,282,283],{},"Tabnabbing"," という",[17,286,287],{},[117,288,283],{"href":289,"rel":290},"https://owasp.org/www-community/attacks/Reverse_Tabnabbing?utm_source=chatgpt.com",[121],[17,292,293,294,296,297,299,300],{},"今のモダンなブラウザでは ",[41,295,44],{}," なタグには暗黙的に ",[41,298,27],{}," 相当の処理が自動付与される\n",[14,301,302,309],{},[17,303,304],{},[117,305,308],{"href":306,"rel":307},"https://www.stefanjudis.com/today-i-learned/target-blank-implies-rel-noopener/?utm_source=chatgpt.com",[121],"Target=_blank implies rel=noopener | Stefan Judis Web Development",[17,310,311,312,314],{},"つまり、",[41,313,251],{}," が null となる",[17,316,317,319,320],{},[41,318,23],{}," はリファラを一切渡さないため、アクセス解析に支障をもたらす\n",[14,321,322],{},[17,323,324],{},[117,325,328],{"href":326,"rel":327},"https://cinci.jp/blog/20240723-review-target-blank-noopener-noreferrer-practices",[121],"別タブへのリンク記述「target=\"_blank\"とrel=\"noopener noreferrer\"」の見直しを - 株式会社真摯",[17,330,331,332,335,336],{},"Referer情報をどのくらい含めるかは ",[41,333,334],{},"Referrer-Policy"," で設定する\n",[14,337,338],{},[17,339,340,341],{},"デフォは ",[41,342,343],{},"strict-origin-when-cross-origin",[181,345,346],{"id":346},"まとめ",[14,348,349],{},[17,350,351,352],{},"単なる技術ブログでは外部リンクに\n",[14,353,354,360],{},[17,355,356,359],{},[41,357,358],{},"noreferrer属性"," は不要",[17,361,362,365],{},[41,363,364],{},"noopener属性"," も明示しなくていい",[367,368,369],"style",{},"html pre.shiki code .sgsFI, html code.shiki .sgsFI{--shiki-default:#24292E}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}",{"title":43,"searchDepth":371,"depth":371,"links":372},2,[373,374,375,376,380],{"id":12,"depth":371,"text":12},{"id":34,"depth":371,"text":35},{"id":104,"depth":371,"text":104},{"id":154,"depth":371,"text":154,"children":377},[378],{"id":183,"depth":379,"text":184},3,{"id":217,"depth":371,"text":381,"children":382},"新規タブで開きたい \u003Ca>タグ の属性はどうすべきか",[383],{"id":346,"depth":379,"text":346},"2025-08-24T00:00:00.000Z","結論よくわからないけど勉強になった話","md","tech",{},true,null,"/articles/target-blank-not-working-with-disqus",{"title":5,"description":385},{"loc":391,"lastmod":394},"2025-09-15","articles/target-blank-not-working-with-disqus",[397,398,27,23,399,400,401],"Disqus","target_blank","Chrome","Safari","Hugo","2025-09-15T00:00:00.000Z","ed6SLXNc91ZCrFCcojMsgXi-3UkNvPR4z8XJ8eTTdJI",[405,410],{"title":406,"path":407,"stem":408,"date":409,"children":-1},"TDDを実践してみて感じたこと","/articles/tdd","articles/tdd","2026-01-09T00:00:00.000Z",{"title":411,"path":412,"stem":413,"date":414,"children":-1},"ラズパイで写真管理をして1年経った","/articles/raspi-immich-home-photos","articles/raspi-immich-home-photos","2025-08-20T00:00:00.000Z",1772952405473]