javascript code

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

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

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

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

サンプルコード

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

仕組み

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

続き

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

参考

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

[追記]メディア掲載