owncloudのログインページと共有URLページをカスタマイズ

owncloudのログインページと共有URL(シェアURL)のページをかっこいいテーマな感じにカスタマイズする方法について紹介します。

みんな大好きowncloud。owncloudのソースコードを弄っていたらいろいろ発見があったのですがそのなかで実用性（？）がありそうな、ログインページのカスタマイズをやってみました。

https://yuis.xsrv.jp/images/ss/ShareX_ScreenShot_802d7d85-11f9-4729-aae5-7fc9b3af6220.png

では具体的にやり方紹介。そんないじってないので大丈夫かと思いますがセキュリティホールが空くかもしれないので自己責任でやってください。

やっていきましょう

まずはいじるためのモールドがほしいので、プラグインの一つであるWallpaper app | ownCloud Marketplaceをインストールします。

したらサーバーにsshしてフォルダの存在を確認してみます。

ls ~/shit.xsrv.jp/public_html/owncloud/apps/wallpaper/

したらrmate ~/shit.xsrv.jp/public_html/owncloud/apps/wallpaper/appinfo/app.phpでファイルを編集。

僕が書き直したコードは以下。

<?php

if (\OC::$server->getUserSession()->isLoggedIn() !== true
    && strpos(\OC::$server->getRequest()->getRequestUri(), '/login') !== false) {
    \OCP\Util::addStyle('wallpaper', 'login');
        \OCP\Util::addScript('wallpaper', 'login');
    $manager = \OC::$server->getContentSecurityPolicyManager();
    $policy = new \OC\Security\CSP\ContentSecurityPolicy();
    $policy->addAllowedImageDomain('source.unsplash.com');
    $policy->addAllowedImageDomain('images.unsplash.com');
        $policy->addAllowedImageDomain('yuis.xsrv.jp');
    $manager->addDefaultPolicy($policy);
}

if (\OC::$server->getUserSession()->isLoggedIn() !== true
    && strpos(\OC::$server->getRequest()->getRequestUri(), '/s') !== false) {
    \OCP\Util::addStyle('wallpaper', 'login');
        \OCP\Util::addScript('wallpaper', 'login');
    $manager = \OC::$server->getContentSecurityPolicyManager();
    $policy = new \OC\Security\CSP\ContentSecurityPolicy();
    $policy->addAllowedImageDomain('source.unsplash.com');
    $policy->addAllowedImageDomain('images.unsplash.com');
        $policy->addAllowedImageDomain('yuis.xsrv.jp');
    $manager->addDefaultPolicy($policy);
}

要点としては

\OCP\Util::addScript('wallpaper', 'login');で./js/login.jsを/loginに当てはまるurlに対して読み込んでくれ、ということで、

$policy->addAllowedImageDomain('yuis.xsrv.jp');では画像をロードするサーバーを許可しています。自分のサーバーに好きな画像を置いておき、そこにcssでリンクするのですが、このコードで許可されてないとクライアント側でエラーでます。

Navigation and Pre-App configuration — ownCloud Developer Manual 9.0 documentation

で、まずcss。

rmate ~/shit.xsrv.jp/public_html/owncloud/apps/wallpaper/css/login.cssで、以下参考。

body {
    /* background-image: url('https://source.unsplash.com/1600x900/?nature,water') !important; */
    /* background-image: url('https://hdqwalls.com/download/anime-girl-in-girls-frontline-ga-1600x900.jpg') !important; */
    background-image: url('https://yuis.xsrv.jp/data/6ceJfI2hvdbFFGudVpAX2A6jE5Ubb2Dw.jpg') !important;
    background-size: cover !important;
}

#body-login .wrapper {
    min-height: 100%;
    margin: 0 auto -70px;
    width: 300px;
    opacity: 0.3 !important;
}

#body-login p.info {
    margin: 0 auto;
    padding-top: 20px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    opacity: 0.7 !important;
}

次にjsでrmate ~/shit.xsrv.jp/public_html/owncloud/apps/wallpaper/js/login.jsで以下コード。



$(document).ready(function(){

  // document.querySelector('#body-login > footer > p').remove()
  document.querySelector('#body-login > footer > p').innerHTML = `If any problem about our shared files please contact us at <strong><a href="https://114514.click/homepage">https://114514.click/homepage</a></strong>`

});

以上です。

これでログインページとシェアURLのページにてcssとjsが適用され、上の画像のようなかっこいいログイン画面になります。

それと注意ですが、これをしてからowncloudからエラーというか警告、warningが表示されるようになりました。セキュリティ、脆弱性の観点から、セキュリティが要求されるシステム上ではこのような下手なことはしないことを推奨します。