無料ブログ「rentafree.net」の管理人ブログ

トップページのログインフォームをShadow DOM化しました

サービストップページにログインフォームがありますが、トップページには広告が必要なんでGoogle Adsenseが設置されています。
このような時にGoogleがログインフォームの入力内容を取得できてしまいますのでサービスにSSLを導入した際にssl.rentafree.netではGoogleを含めて外部サービスを完全に排除してSSLログイン機能を導入し、
トップページ(www.rentafree.net)の方は<iframe>を使ったサンドボックス化を検討しましたが、
検討したのが2012年で当時はFirefoxにはsandbox機能が無かったため実装できず、seamlessやframeborderなんかも混迷期だったので、これまではGoogleは信頼したうえでログインフォームを提供していましたが、
Shadow DOMという機能でログインフォームのサンドボックス化が可能なことに気づいたんで実装しました。
対応ブラウザではGoogleでもログインフォームの入力内容を取得することはできなくなりました。(ブラウザやOS自体をマルウェア化することはできるのかもしれませんがw)
SSLログイン機能(ssl.rentafree.net)の方は当初より外部サービスを排除しているので変更していません。

Firefox 63
Chrome 53
Edge 79
から機能が利用できるようです。2018年頃から可能だったみたいですね。
非対応ブラウザでも従来どおりログインフォームを使うことは可能です。

robots.txtに記載されるSitemapのschemeがhttpで固定されていました

ユーザードメインのrobots.txtにSitemapのアドレスが記載されますが、HTTPSの設定が「HTTPSが標準」か「HTTPSを強制」に設定されている場合はSitemapのURLはhttps://で始まるアドレスであるべきですが、http://から始まるアドレスで固定されていました。
「HTTPSが標準」か「HTTPSを強制」に設定されている場合はhttps://で始まるアドレスが記載されるように変更しました。

なお、
ユーザーサイトや各種Feedに関しては「HTTPSを強制」に設定されている場合にhttp://から始まるアドレスで接続しようとした場合はHTTP 301 Moved Permanentlyでリダイレクトとなり、
「HTTPSは無効」に設定されている場合にhttps://から始まるアドレスで接続しようとした場合はHTTP 404でエラーページが表示されますが、
robots.txtに関してはユーザードメインが有効な場合はhttp://でもhttps://でも表示されます。

あと、変更後にFirefoxで接続して確認しましたが、どうも対象ドメインのページがhttpsでキャッシュされている場合だと思うのですが、
http://でアドレスバーに入力して接続しようとしても自動的にhttps://のアドレスに接続してしまうみたいで確認が困難だった・・・

ファイルマネージャのリンクを変更しました

ファイルマネージャのファイルへのリンクがhttp://から始まるURLになっていたのですが、
公式サイトへhttpsで接続している場合にリンク先がダウンロードになる場合に少なくともFirefoxではダウンロードができないことが発覚しました。

ファイルマネージャのファイルへのリンクがhttp://から始まるURLだったのを//から始まるスキーム省略URLに変更しました。

Adsenseの記事内広告を使うとレイアウトが崩れる

公式テンプレートのマルチカラムレイアウトのやつはCSSのfloatを使用してマルチカラムを実現していましたが、
Google Adsenseの記事内広告を使用すると記事内でclear:bothされてその箇所移行が左サイドバーより下に落ちる感じでレイアウトが崩れてました。

floatを使わずにdisplay:table-cellを使ってなんとかなる感じなんで、管理人ブログでも使用している1-2カラム・ハイブリッドのみ変更しました。
後ほど他のテンプレートも変更予定です。

テンプレートに不具合が生じるようでしたらご報告お願いします。


[追記]
公式テンプレートの内、左サイドバー付きの2カラムレイアウトのテンプレートは同様の変更を行いましたが、
右サイドバー付きのテンプレートは記事の前に右カラムがあるため同じ方法が使えませんでした。
考えてみますが無理かも・・・

[追記2]
右サイドバー付きのテンプレートにつきましてはdisplay:flex;でほぼ対応できたのですが、
公式テンプレートの内1-2-3カラム・ハイブリッドについてはflexではfloatと同等のことができない感じでした。
ちょっとfloatを使わない方法が思いつかないので放置します。

document.execCommandが廃止されたとか・・・

先程<menuitem>がFirefoxで無効になった件で記事を書きましたが、
元々の本物のコンテキストメニューでは非表示になっていましたが、コンテキストメニュー風のUIだと「切り取り」「コピー」「削除」の項目が表示されるようになっていました。
こちらの機能について確認しましたが、document.execCommandという機能を使って実装しておりブラウザ標準の「切り取り」「コピー」「削除」と同等の動作となります。

ですが、どうもdocument.execCommandという機能は廃止されたようです。
でも現時点で機能しています。
というかそもそもこの機能は標準化されていない機能だったと記憶しており、廃止されたというより標準化されないことが決まったという感じだと思います。
標準化された機能ではないですが、すべての主要ブラウザで機能するようです。

これも<menuitem>と同じようにいつか削除されるかもしれないので変更したいですが、
こちらは代替手段の存在しない<menuitem>と違いClipboard API というもので代替できるようなのですが、Firefox 87からの機能のようなのでFirefox 87が出てからに考えます。
あと、EdgeにはすでにClipboard APIが実装されているようなのですがMSIEは非対応のようです。
こちらで変更する場合は両対応にできると思います。