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

ブログエディターをShadow DOM化しました

ブログ記事中のHTMLタグにidを設定する際に、ブログエディターやエディターの外側に設定されているidと重複すると問題が生じる可能性がありましたので、
ブログエディターの編集中記事部分をShadow DOM化しました。

ブログエディターは複雑なんで、この変更で問題が生じないか疑わしいので、元に戻す可能性もあります。
なにか不具合に気づかれましたらご報告お願いします。

ブログエディターで<IMG>タグのloading属性を設定できるようにしました

公式JavaScriptに画像遅延ロード機能があり、機能を使うと表示領域外の画像を表示領域に入るまで読み込まないようにすることができますが、
現在ではHTML Living Standardにloading属性が追加されブラウザ機能で実現できるようになっているため、
当サービスのブログエディターでloading="lazy"を<IMG>タグに対して設定しやすくし、
「詳細設定 >領域外画像を読み込まない」をチェックして投稿した場合も記事内の<IMG>タグ全てにloading="lazy"を設定するように変更しました。

CSSでheightを設定していない状態で「詳細設定 >領域外画像を読み込まない」をチェックして投稿した場合は自動的に設定されます。
「詳細設定 >領域外画像を読み込まない」をチェックしないで投稿する場合は変換されません。
公式JavaScriptのdata-lazy属性がついた<IMG>タグのある記事を再編集する場合、記事編集画面をロードした時点でdata-lazy属性は削除されてloading="lazy"に変換されます。
公式JavaScriptの画像遅延ロード機能については当面残しますが、将来削除される可能性があります。

トップページのログインフォームを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に変更しました。