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

ブログエディターで<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年頃から可能だったみたいですね。
非対応ブラウザでも従来どおりログインフォームを使うことは可能です。