{"id":523,"date":"2020-05-24T11:52:43","date_gmt":"2020-05-24T03:52:43","guid":{"rendered":"http:\/\/www.brainfart.sg\/?p=523"},"modified":"2020-05-28T14:38:14","modified_gmt":"2020-05-28T06:38:14","slug":"hcaptcha-on-owncloud","status":"publish","type":"post","link":"https:\/\/www.brainfart.sg\/index.php\/2020\/05\/hcaptcha-on-owncloud\/","title":{"rendered":"hCaptcha on OwnCloud"},"content":{"rendered":"\n

A couple of days back I logged into CloudFlare<\/a> and noticed that they are using a new captcha system on the login page, hCaptcha<\/a>.<\/p>\n\n\n\n

Now if you have been on the internet long enough, you would have encountered Google’s reCaptcha<\/a> (from CAPTCHA – Completely Automated Public Turing test to tell Computers and Humans Apart), that annoying pop-up where you either need to type in some squiggly text (last time), click a bunch of picture or just click a checkbox before you can submit that funny cat photo. This is to prove that you are really a human posting the above-mentioned cat photo and not some bot trying to spam or probe the funny cat website.<\/p>\n\n\n\n

The idea of hCaptcha is to reduce the footprint of Google on users, considering they have their finger in pretty much every pie. Supposedly, hCaptcha captures a minimal amount of user information since they are not interested in advertising or selling personal data. They tout that they have a better experience but as of now, that doesn’t seem to be the case, since I trigger the captcha pretty much all the time… (Maybe I am a bot…) But I believe as more users use the service, they should be able to better tell bots from humans.<\/p>\n\n\n\n

Now back to the meat of this post. After seeing Cloudflare’s switch to hCaptcha, I figured I could make use of CAPTCHAs to reduce the impact of bots on the services I have exposed to the internet, such as WordPress here and Owncloud and a few other services. Since I’m the main user of the services, it doesn’t frustrate me to click on CAPTCHAs. Besides, for every CAPTCHA solved, I get paid (though pretty much next to nothing :P)<\/p>\n\n\n\n

WordPress was pretty easy since there is already a plugin<\/a> developed by the hCaptcha and the community.<\/p>\n\n\n\n

Next was to add hCaptcha in the OwnCloud service that I am running. This is where my problem arise. Apparently, not many people have done CAPTCHA integration on Owncloud, since I couldn’t find much resource online. The only one I found was this github repo<\/a> by a Taiwanese IT Service Provider. However, it seems like they the are self-hosting the reCaptcha javascript and validating the somewhere using javascript. Problem is, I’m not a developer, much less a JS developer, so for the life of me, I can’t tell how they are validating the CAPTCHA with reCaptcha. Also, they are self-hosting reCaptcha code, so if they are any updates, they will have to manually update the JS file. Good for air-gapped network, not so good for lazy people like me. So, taking reference from that repo and also the hCaptcha blog post<\/a> on PHP integration , I made my own changes to OwnCloud to enable hCaptcha. Here are the steps to save you some frustration and hours.
*Disclaimer: I am a systems administrator by trade and not a developer. What I lack in coding skills, I make up in hacking things to work. So my solution will be very ugly to PHP developers out there. Also, I’m making changes to OwnCloud core files, so the next update, *poof* all the customisations will be gone.<\/p>\n\n\n\n

First things first, sign up for a hCaptcha account<\/a> and take note of the site key and secret key. Guard your secret key and don’t expose it on any public facing page\/script.<\/p>\n\n\n\n

Next is to add hCaptcha to the login, this step is pretty simple, just add two lines of HTML to login.php<\/code>
Take note to input the site key from hCaptcha.
I’ve placed the hCaptcha button after the <fieldset><\/code> stanza so as not to mess up the existing CSS.<\/p>\n\n\n

\n<?php \/** @var $l \\OCP\\IL10N *\/ ?>\n<?php\nvendor_script('jsTimezoneDetect\/jstz');\nscript('core', [\n        'visitortimezone',\n        'lostpassword',\n        'login',\n        'browser-update'\n]);\n?>\n\n<!-- Add hCaptcha JavaScript Library -->\n<script src='https:\/\/www.hCaptcha.com\/1\/api.js' async defer><\/script>\n<!--[if IE 8]><style>input[type="checkbox"]{padding:0;}<\/style><![endif]-->\n<form method="post" name="login">\n...\n        <\/fieldset>\n        <!-- Add hCaptcha Button -->\n        <div class="h-captcha" data-sitekey="SITE KEY"><\/div>\n<\/form>\n<\/pre>\n\n\n\n
After adding the hCaptcha, you will find that OwnCloud wouldn’t load the hCaptcha button, this is due to the OwnCloud CSRF Policy. So the next thing is to grant the hCaptcha domain permission to load scripts. Edit the LoginController.php<\/code> file to add the policy in the showLoginForm()<\/code> function.<\/p>\n\n\n
\n        public function showLoginForm($user, $redirect_url, $remember_login) {\n...\n                if (!empty($redirect_url) && ($remember_login === null) &&\n                        ($this->userSession->isLoggedIn() === false) &&\n                        (\\strpos($this->urlGenerator->getAbsoluteURL(\\urldecode($redirect_url)),\n                                        $this->urlGenerator->getAbsoluteURL('\/index.php\/f\/')) !== false)) {\n                        $parameters['accessLink'] = true;\n                }\n\n                \/\/ CSRF Policy for hCaptcha\n                $response = new TemplateResponse($this->appName, 'login', $parameters, 'guest');\n                $csp = new ContentSecurityPolicy();\n                        $csp->addAllowedImageDomain('*.hcaptcha.com');\n                        $csp->addAllowedImageDomain('hcaptcha.com');\n                        $csp->addAllowedMediaDomain('*.hcaptcha.com');\n                        $csp->addAllowedMediaDomain('hcaptcha.com');\n                        $csp->addAllowedFrameDomain('*.hcaptcha.com');\n                        $csp->addAllowedFrameDomain('hcaptcha.com');\n                        $csp->addAllowedStyleDomain('*.hcaptcha.com');\n                        $csp->addAllowedStyleDomain('hcaptcha.com');\n                        $csp->addAllowedScriptDomain('*.hcaptcha.com');\n                        $csp->addAllowedScriptDomain('hcaptcha.com');\n                $csp->allowInlineScript(true);\n\n                $response->setContentSecurityPolicy($csp);\n                return $response;\n\n                \/\/return new TemplateResponse(\n                \/\/      $this->appName, 'login', $parameters, 'guest'\n                \/\/);\n<\/pre>\n\n\n\n
Now that we can load the hCaptcha button, next is to validate the hCaptcha response during login. After performing CAPTCHA check, hCaptcha will include the h-captcha-response<\/code> in form data, so we will validate this response with hCaptcha’s siteverify<\/code> API. Again, edit the LoginController.php<\/code> file, but this time we are interested in the tryLogin()<\/code> function.
Take note to input the secret key from hCaptcha.<\/p>\n\n\n
\n        public function tryLogin($user, $password, $redirect_url, $timezone = null) {\n                \/\/ Check if h-captcha-response is present and validate hCaptcha response\n                if(isset($_POST['h-captcha-response']) && !empty($_POST['h-captcha-response'])){\n                        $data = array(\n                                'secret' => "SECRET KEY",\n                                'response' => $_POST['h-captcha-response']\n                        );\n                        $verify = curl_init();\n                        curl_setopt($verify, CURLOPT_URL, "https:\/\/hcaptcha.com\/siteverify");\n                        curl_setopt($verify, CURLOPT_POST, true);\n                        curl_setopt($verify, CURLOPT_POSTFIELDS, http_build_query($data));\n                        curl_setopt($verify, CURLOPT_RETURNTRANSFER, true);\n                        $verifyResponse = curl_exec($verify);\n                        $responseData = json_decode($verifyResponse);\n\n                        if($responseData->success !== true) {\n                                $this->session->set('loginMessages', [\n                                        ['invalidCaptcha'], []\n                                ]);\n                                $args = [];\n                                return new RedirectResponse($this->urlGenerator->linkToRoute('core.login.showLoginForm', $args));\n                        }\n                }\n                else {\n                        $this->session->set('loginMessages', [\n                                ['invalidCaptcha'], []\n                        ]);\n                        $args = [];\n                        return new RedirectResponse($this->urlGenerator->linkToRoute('core.login.showLoginForm', $args));\n                }\n                $originalUser = $user;\n                \/\/ TODO: Add all the insane error handling\n                $loginResult = $this->userSession->login($user, $password);\n<\/pre>\n\n\n\n
Notice the ‘invalidCaptcha’ error handling? We need to code this into login.php<\/code>. Edit login.php<\/code> again.<\/p>\n\n\n
\n                <?php if (!empty($_['accessLink'])) {\n                ?>\n                        <p class="warning">\n                                <?php p($l->t("You are trying to access a private link. Please log in first.")) ?>\n                        <\/p>\n                <?php\n        } ?>\n                <?php if (!empty($_['invalidCaptcha'])) {\n                ?>\n                        <p class="warning">\n                                <?php p($l->t("Invalid\/Missing Captcha. Please try again.")) ?>\n                        <\/p>\n                <?php\n        } ?>\n                <?php if ($_['rememberLoginAllowed'] === true) : ?>\n                <div class="remember-login-container">\n                        <?php if ($_['rememberLoginState'] === 0) {\n                ?>\n<\/pre>\n\n\n\n
And done! Now OwnCloud is protected with hCaptcha!
\"\"
To change the look and feel of the hCaptcha button, you can play with the themes<\/a> of the button.
Remember to backup the edited files so that they are not lost when you upgrade OwnCloud.<\/p>\n\n\n\n
I have also shared my php files on GitHub<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"
A couple of days back I logged into CloudFlare and noticed that they are using a new captcha system on the login page, hCaptcha. Now if you have been on the internet long enough, you would have encountered Google’s reCaptcha… Continue Reading →<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"aside","meta":{"spay_email":""},"categories":[17],"tags":[104,103,105,54],"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"jetpack_shortlink":"https:\/\/wp.me\/p1T66h-8r","jetpack_likes_enabled":true,"_links":{"self":[{"href":"https:\/\/www.brainfart.sg\/index.php\/wp-json\/wp\/v2\/posts\/523"}],"collection":[{"href":"https:\/\/www.brainfart.sg\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.brainfart.sg\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.brainfart.sg\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.brainfart.sg\/index.php\/wp-json\/wp\/v2\/comments?post=523"}],"version-history":[{"count":37,"href":"https:\/\/www.brainfart.sg\/index.php\/wp-json\/wp\/v2\/posts\/523\/revisions"}],"predecessor-version":[{"id":565,"href":"https:\/\/www.brainfart.sg\/index.php\/wp-json\/wp\/v2\/posts\/523\/revisions\/565"}],"wp:attachment":[{"href":"https:\/\/www.brainfart.sg\/index.php\/wp-json\/wp\/v2\/media?parent=523"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.brainfart.sg\/index.php\/wp-json\/wp\/v2\/categories?post=523"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.brainfart.sg\/index.php\/wp-json\/wp\/v2\/tags?post=523"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}