サイト上で実行されるプログラムについて同意を確認するためのプログラム

昨今、クライアントサイドでプログラムを実行するリスクが高まっています。
そこで、ページ上で実行されるプログラムについて閲覧者に同意を求めるプログラムをこのページに埋め込んでみました。

ひとえにクライアントサイドで実行されるプログラムといっても様々なものがあります。
例えばこのブログはWordpressで作られていますが、使用しているテーマは様々なJavaScriptライブラリを外部から読み込んでいますし、Google アドセンスのような広告を表示するためのプログラムや、Google アナリティクスのようなアクセス解析を行うためのプログラムも閲覧者に許可なく実行され、CPUやメモリ、電力といった閲覧者のリソースを消費します。
また、このブログに掲載しているデータビジュアライゼーションや地図コンテンツは、複雑な計算処理をクライアントサイドで行う為、非常に負荷の高いプログラムがユーザーサイドで実行されます。

今の所、ユーザーの同意を得なくてはならないプログラムと、無許可で実行してよいプログラムの定義がはっきりしないため、ひとまず全てのプログラムに対して同意を求める仕組みを作ってこのページにデモとして埋め込んでみました。

サンプルコード

このスクリプトはheadタグの直下に記述しないと正常に動作しません。
このページでは、スクリプトが記事文中に記述されているため、一部のスクリプトの動作が正しく停止していません。

alert("このページでは、主に広告表示、アクセス解析、ユーザーインターフェイス、データ整形処理、インタラクティブコンテンツの表示、などの為にクライアントサイドでのプログラムが実行され閲覧者のPCリソース（CPUや電力)を使用します。\n各プログラムの実行を拒否する場合は以降表示されるダイアログにて「キャンセル／いいえ」を選択してください。");
const observer = new MutationObserver(mutations => {
    mutations.forEach(({ addedNodes }) => {
        addedNodes.forEach(node => {
            if(node.nodeType === 1 && node.tagName === 'SCRIPT') {
                const src = node.src || ''
                const type = node.type;
                let script = "";
                if(src){
                    script = src;
                }else{
                    script = node.innerHTML;
                }
                let check = true;
                check = window.confirm("以下のプログラムの実行を許可しますか？\n"+script);
                console.log(check);
                if(check){
                    console.log("run", script);
                }else{
                    console.log("remove", script);
                    node.remove();                    
                }
            }
        })
    })
});
observer.observe(document.documentElement, {
    childList: true,
    subtree: true
});

alert("このページでは、主に広告表示、アクセス解析、ユーザーインターフェイス、データ整形処理、インタラクティブコンテンツの表示、などの為にクライアントサイドでのプログラムが実行され閲覧者のPCリソース（CPUや電力)を使用します。\n各プログラムの実行を拒否する場合は以降表示されるダイアログにて「キャンセル／いいえ」を選択してください。");

const observer = new MutationObserver(mutations => {

mutations.forEach(({ addedNodes }) => {

addedNodes.forEach(node => {

if(node.nodeType === 1 && node.tagName === 'SCRIPT') {

const src = node.src || ''

const type = node.type;

let script = "";

if(src){

script = src;

}else{

script = node.innerHTML;

}

let check = true;

check = window.confirm("以下のプログラムの実行を許可しますか？\n"+script);

console.log(check);

if(check){

console.log("run", script);

}else{

console.log("remove", script);

node.remove();

}

})

});

observer.observe(document.documentElement, {

childList: true,

subtree: true

});

仕組み

DOMの変更を検知するMutationObserverを使って、scriptタグがDOMに追加されるタイミングでダイアログを呼び出しています。
呼び出したダイアログで「キャンセル」が選択された際に、追加されるエレメントをremoveしています。

続き

スクリプトでスクリプトを停止させることの難しさ。 – GUNMA GIS GEEK

参考

How to block third party scripts with a few lines of javascript

Categories:Javascript

サンプルコード

仕組み

続き

参考

シェアする