「選択箇所へのリンク」生成ツール「Short Frag Link」（6）/ JavaScript

「iframe表示」を拒否するサイト

「iframe」が悪用されるのは、ブラウザにとってセキュリティ上の脅威です。 そのため、一時期は「iframe」の廃止が考えられた様です。 しかし、その後の「YouTube」の隆盛は、その流れにストップをかけました。 結局、セキュリティ対策を強化して現在に至った様です。

その対策のひとつに、サイト側サーバーの通信上の指定項目「X-Frame-Options」というのがあります。 私達がブログ記事を読む時は、アメーバのサーバーにブラウザがアクセスして、そこから記事データを受け取ります。 サーバーはデータ送信時に制約や仕様などの項目を付けて、データを送ります。 そんな項目のひとつが「X-Frame-Options」です。

アメーバの記事サーバーは、基本的に「X-Frame-Options：SAMEORIGIN」の指定です。 この指定は「親画面」がアメブロの記事画面なら、その画面の子画面である「iframe」にアメブロの記事画面を表示して良いという指定です。

サーバーごと（サイトごと）にポリシーがあり、「X-Frame-Options」に「DENY」を指定したサーバーがあります。 この指定の場合は、送信したデータを「iframe」には表示させないという、少し厳格な指定です。

説明が長くなりましたが、「Short Frag Link」は「iframe」を使っているため、そのサイトが「DENY」を指定していると、リンクをテストする「iframe」は下の様な表示になります。

上の例は「MDN」のサイトで、このサイトの標準は「X-Frame-Options：DENY」です。「ver.0.5」では「選択箇所へのリンク」が生成出来ているのかどうか、上の様なテスト画面になって判りません。

しかし調べると、ちゃんとリンクが出来ていました。 もちろん「Chrome」デフォルトの「選択箇所へのリンク」を使えばリンクが作れました。

 X-Frame-Options の対策

「DENY」のサイトの対策として、その種のサイトの場合は、「Short Frag Link」の ver.0.2までの様に、別タブにリンクテストのウインドウを開く方式にしました。

ver.0.6   64行～

let sfl_iframe=document.querySelector('.sfl_iframe');
sfl_iframe.onload=function(){
    let if_doc=sfl_iframe.contentDocument;
    if(!if_doc){ // X-Frame-Options：DENY で iframe表示が出来ない場合
        sfl_test.remove();
        window.open(test_url, '_blank'); }} // 別タブを開いてリンクテスト

上のコードは、テスト用の iframeを生成した後に実行され、iframeの中に呼び込まれる「if_Doc」を調べています。

サイトが「DENY」の指定がどうかは、「if_Doc」が取得されない事で判ります。 その場合は、生成した「iframe」を削除し、別タブで生成したリンクをテストします。

どちらかと言うと「DENY」を設定したサイトは少ないと思われますが、これでどちらのタイプのサイトでも使えます。

なお「Firefox」は、「X-Frame-Options」を指定を無視して「iframe」に常にページを表示します。 セキュリティに自信ありと言っているので、何か別の方法で安全を担保しているのかも知れません。 しかし、「選択箇所へのリンク」に対応しないので、このツールにとっては皮肉な話です。

「Short Frag Link」を利用するには

このツールは Chrome / Edge 版の拡張機能「Tampermonkey」上で動作します。

Firefoxでこのツールはリンクを生成できますが、Firefoxは「選択箇所へのリンク」に対応していないので、生成したリンクは通常のリンクとして機能します。

以下に、このツールの導入手順を簡単に説明します。

❶「Tampermonkey」を導入します

◎ 使用しているブラウザに拡張機能「Tampermonkey」を導入する事が必要です。

既に「Tampermonkey」を導入している場合は、この手順 ❶ は不要です。 

拡張機能の導入については、以下のページに簡単な説明があるので参照ください。

⭕「Tampermonkey」の導入方法

❷「Tampermonkey」にスクリプトを登録します

◎「Tampermonkey」の「＋」マークの「新規スクリプト」タブを開きます。

◎「新規スクリプト」には、最初からテンプレートが記入されています。 これは全て削除して、完全に空白の編集枠に 下のコードをコピー&ペーストします。

〔コピー方法〕　軽量シンプルなツール「PreBox Button   」を使うと

　　コード枠内を「Ctrl+左Click」➔「Copy code 」を「左Click」

　　の操作で、掲載コードのコピーが可能になります。

◎ 最後に「ファイル」メニューの「保存」を押すと、ツールが使用可能になります。

〔 Short Frag Link 〕 ver. 0.6

// ==UserScript==
// @name         Short Frag Link
// @namespace    http://tampermonkey.net/
// @version      0.6
// @description  選択箇所へのリンクのコンパクトなリンクを生成する
// @author       Ameba Blog User
// @match        https://*/*
// @match        http://*/*
// @grant        none
// ==/UserScript==

let frag_link;
let page_body=document.body;

if(page_body){

    page_body.oncontextmenu=function(event){

        if(event.altKey){ // 反転選択した「テキスト」を「Alt+右Click」
            let selection=document.getSelection();
            let select_text=selection.toString();

            if(select_text){
                event.preventDefault();
                event.stopImmediatePropagation();
                document.getSelection().removeAllRanges(); // 選択範囲をクリア

                let url=location.href.split('?')[0].split('#')[0];

                if(url){
                    select_text=encodeURIComponent(select_text); // URLエンコード
                    select_text=select_text.replace(/-/g, '%2D').replace(/'/g, '%27'); //「-」「'」置換

                    frag_link=
                        url +'#:~:text='+ select_text;

                    if(navigator.clipboard){
                        navigator.clipboard.writeText(frag_link); // Clipboardへコピー

                        setTimeout(()=>{
                            test(frag_link);
                        }, 20); }}}

        }}


    function test(test_url){
        let test_iframe=
            '<div class="sfl_test">'+
            '<iframe class="sfl_iframe" src="'+ test_url +'"></iframe>'+
            '<div class="sfl_cover"></div>'+
            '<style>'+
            '.sfl_test { position: fixed; left: 0; bottom: 0; z-index: 10000000000; '+
            'width: 100vw; height: 50vh; border-top: 8px solid #000; background: #fff; } '+
            '.sfl_iframe { width: 100% !important; height: 100% !important; border: none; } '+
            '.sfl_cover { position: absolute; top: 0; left: 0 ; width: 100%; height: 100%; } '+
            '</style></div>';

        if(document.querySelector('.sfl_test')){
            document.querySelector('.sfl_test').remove(); }
        document.body.insertAdjacentHTML('beforeend', test_iframe);


        let sfl_iframe=document.querySelector('.sfl_iframe');
        sfl_iframe.onload=function(){
            let if_doc=sfl_iframe.contentDocument;
            if(!if_doc){ // X-Frame-Options：DENY で iframe表示が出来ない場合
                sfl_test.remove();
                window.open(test_url, '_blank'); }} // 別タブを開いてリンクテスト


        let sfl_test=document.querySelector('.sfl_test');
        let sfl_cover=document.querySelector('.sfl_cover');
        if(sfl_test && sfl_cover){
            sfl_cover.onclick=function(event){
                event.stopImmediatePropagation();
                sfl_test.remove(); }}

    } //test()

}

「Short Frag Link」最新版について 

旧いバージョンの JavaScriptツールは、アメーバのページ構成の変更で動作しない場合があり、導入する場合は最新バージョンをお勧めします。

●「Short Frag Link」の最新バージョンへのリンクは、以下のページのリンクリストから探せます。

スクリプトツール 　最新バージョン・リンク一覧表 （ツール名順）