{"id":346,"date":"2014-01-05T08:34:59","date_gmt":"2014-01-05T15:34:59","guid":{"rendered":"http:\/\/somethingk.com\/main\/?p=346"},"modified":"2017-03-23T11:37:50","modified_gmt":"2017-03-23T18:37:50","slug":"tomato-by-shibby-splash-page","status":"publish","type":"post","link":"https:\/\/somethingk.com\/main\/tomato-by-shibby-splash-page\/","title":{"rendered":"Tomato by Shibby Splash Page"},"content":{"rendered":"<section id=\"text-4\" class=\"widget boka-widget widget_text amr_widget\">\t\t\t<div class=\"textwidget\"><script async src=\"\/\/pagead2.googlesyndication.com\/pagead\/js\/adsbygoogle.js\"><\/script>\r\n<ins class=\"adsbygoogle\"\r\n     style=\"display:block; text-align:center;\"\r\n     data-ad-layout=\"in-article\"\r\n     data-ad-format=\"fluid\"\r\n     data-ad-client=\"ca-pub-7619916617995509\"\r\n     data-ad-slot=\"9102150708\"><\/ins>\r\n<script>\r\n     (adsbygoogle = window.adsbygoogle || []).push({});\r\n<\/script><\/div>\n\t\t<\/section>\n<p>What is a splash page? Well it&#8217;s basically a welcome page. Router&#8217;s can have splash pages to greet users immediately after connecting to the network, notify them of conditions of use and\/or require user authentication.<\/p>\n<p>I want a splash page for my guest network to basically inform guests that my guest network is a risky environment&#8230; it is free at least. Say for instance, if fingerprinting or enumeration tools just happen to be used in my guest network, they wave their rights to taking action against it by agreeing to access the network in the first place.<\/p>\n<figure id=\"attachment_325\" aria-describedby=\"caption-attachment-325\" style=\"width: 289px\" class=\"wp-caption aligncenter\"><a href=\"http:\/\/somethingk.com\/main\/wp-content\/uploads\/2014\/01\/Screen-Shot-2014-01-04-at-7.39.34-PM.png\"><img fetchpriority=\"high\" decoding=\"async\" class=\"size-medium wp-image-325\" title=\"My splash page\" src=\"http:\/\/somethingk.com\/main\/wp-content\/uploads\/2014\/01\/Screen-Shot-2014-01-04-at-7.39.34-PM-289x300.png\" alt=\"Screen Shot 2014-01-04 at 7.39.34 PM\" width=\"289\" height=\"300\" srcset=\"https:\/\/somethingk.com\/main\/wp-content\/uploads\/2014\/01\/Screen-Shot-2014-01-04-at-7.39.34-PM-289x300.png 289w, https:\/\/somethingk.com\/main\/wp-content\/uploads\/2014\/01\/Screen-Shot-2014-01-04-at-7.39.34-PM.png 710w\" sizes=\"(max-width: 289px) 100vw, 289px\" \/><\/a><figcaption id=\"caption-attachment-325\" class=\"wp-caption-text\">My splash page<\/figcaption><\/figure>\n<p>In <a title=\"Tomato Shibby on ASUS RT-N66W\" href=\"http:\/\/somethingk.com\/main\/?p=300\">Tomato Shibby<\/a>, this can be done in the web UI (default 192.168.1.1) under the\u00a0<strong>Captive Portal<\/strong> section. Just enable the feature and save. Now you are using the default splash page.<\/p>\n<p><a href=\"http:\/\/somethingk.com\/main\/wp-content\/uploads\/2014\/01\/Screen-Shot-2014-01-04-at-7.40.08-PM.png\"><img decoding=\"async\" class=\"aligncenter size-medium wp-image-326\" src=\"http:\/\/somethingk.com\/main\/wp-content\/uploads\/2014\/01\/Screen-Shot-2014-01-04-at-7.40.08-PM-284x300.png\" alt=\"Screen Shot 2014-01-04 at 7.40.08 PM\" width=\"284\" height=\"300\" srcset=\"https:\/\/somethingk.com\/main\/wp-content\/uploads\/2014\/01\/Screen-Shot-2014-01-04-at-7.40.08-PM-284x300.png 284w, https:\/\/somethingk.com\/main\/wp-content\/uploads\/2014\/01\/Screen-Shot-2014-01-04-at-7.40.08-PM.png 716w\" sizes=\"(max-width: 284px) 100vw, 284px\" \/><\/a><\/p>\n<p>You can change things up by uploading your own html splash page. I couldn&#8217;t get this to work, so instead I SSH directly to the router and wrote my own in the console.<\/p>\n<p>To SSH:<\/p>\n<pre>ssh root@192.168.1.1<\/pre>\n<p>The root account should have the same password as the admin web UI account.<\/p>\n<pre><a href=\"http:\/\/somethingk.com\/main\/wp-content\/uploads\/2014\/01\/Screen-Shot-2014-01-04-at-7.40.48-PM.png\"><img decoding=\"async\" class=\"aligncenter\" src=\"http:\/\/somethingk.com\/main\/wp-content\/uploads\/2014\/01\/Screen-Shot-2014-01-04-at-7.40.48-PM-300x131.png\" alt=\"Screen Shot 2014-01-04 at 7.40.48 PM\" width=\"300\" height=\"131\" \/><\/a><\/pre>\n<p>Once in, I kind of fudged around. I recommend keeping a copy of the original splash page&#8230; just in case.\u00a0I customized the current splash.html page to fit my needs with <a title=\"Unix man pages: vi (1)\" href=\"http:\/\/www.lehman.cuny.edu\/cgi-bin\/man-cgi?vi+1\" target=\"_blank\">vi<\/a>.<\/p>\n<pre>vi \/tmp\/splashd\/splash.html<\/pre>\n<p>My html page code is displayed below with the <span style=\"color: #993300;\">red<\/span> section being the area I changed from the original:<\/p>\n<div class=\"snippetcpt-wrap\" id=\"snippet-1081\" data-id=\"1081\" data-edit=\"\" data-copy=\"\/main\/wp-json\/wp\/v2\/posts\/346?snippet=95fc29a931&#038;id=1081\" data-fullscreen=\"https:\/\/somethingk.com\/main\/code-snippets\/splash-page\/?full-screen=1\">\n\t\t\t\t<pre class=\"prettyprint linenums lang-html\" title=\"Splash Page\">&lt;!DOCTYPE html PUBLIC &quot;-\/\/W3C\/\/DTD XHTML 1.0 Transitional\/\/EN&quot; \r\n&quot;http:\/\/www.w3.org\/TR\/xhtml1\/DTD\/xhtml1-transitional.dtd&quot;&gt;\r\n&lt;html xmlns=&quot;http:\/\/www.w3.org\/1999\/xhtml&quot;&gt;\r\n&lt;head&gt;\r\n    &lt;meta http-equiv=&quot;Content-Type&quot; content=&quot;text\/html; \r\n    charset=UTF-8&quot;&gt;\r\n    &lt;title&gt;Guests of Paul&lt;\/title&gt;\r\n    &lt;style&gt;\r\n        body, html, #wrapper {width: 100%; height: 100%;}\r\n        body, html, form, h1 { margin: 0; padding: 0; }\r\n        body {\r\n            background: #121b1d url(tomatousb_bg.png);\r\n            font: 14px Tahoma, Arial, sans-serif;\r\n            width: 100%;\r\n            height: 100%;\r\n        }\r\n        a {\r\n            color: #e02600;\r\n        }\r\n        a:hover {\r\n            padding: 3px;\r\n            text-decoration:none;\r\n            color: #fff;\r\n            background: #e02600;\r\n        }\r\n        img { border: 0; padding-top: 8px; float: right; }\r\n        #splash {\r\n            width: 520px;\r\n            margin: 0 auto;\r\n            padding-top: 10px;\r\n            position: relative;\r\n        }\r\n        #splash_header {\r\n            position: relative;\r\n            background-color: #2f3d40;\r\n            padding: 8px;\r\n        }\r\n        #splash_header h1 {\r\n            \/* font: 28px 'Century Gothic', Tahoma, Arial, Sans-serif; *\/\r\n            font-size: 28px;\r\n            text-align: center;\r\n            color: #919EA1;\r\n        }\r\n        #splash_content {\r\n            color: black;\r\n            background-color: white;\r\n            padding: 15px;\r\n        }\r\n        textarea {\r\n            white-space: pre-wrap;\r\n            word-wrap: break-word;\r\n            font: 12px monospace;\r\n            width: 96%;\r\n            height: 230px;\r\n            min-width: 96%;\r\n            min-height: 230px;\r\n            padding: 10px;\r\n        }\r\n        form { -webkit-box-align: center; text-align: center; }\r\n        button {\r\n            font: bold 1em Arial, Sans-serif;\r\n            color: #919EA1;\r\n            width: 200px;\r\n            padding: 4px;\r\n            margin-top: 15px;\r\n            background: #283033;\r\n            border: 1px solid #CCC;\r\n        }\r\n        button:hover {\r\n            color: white;\r\n            background: #E02600;\r\n        }\r\n        div#status{\r\n            background: #ededed;\r\n        }\r\n        iframe {\r\n            border: 0;\r\n            border-spacing: 0;\r\n        }\r\n        #footer {\r\n            color: #919EA1;\r\n            margin: 0;\r\n            text-align: center;\r\n            padding-top: 8px;\r\n        }\r\n    &lt;\/style&gt;\r\n    &lt;script type=&quot;text\/javascript&quot;&gt;\r\n    function toggle(element) { document.getElementById(element).\r\n    style.display = (document.getElementById(element).style.display \r\n     == &quot;none&quot;) ? &quot;&quot; : &quot;none&quot;; }\r\n    &lt;\/script&gt;\r\n&lt;\/head&gt;\r\n&lt;body&gt;\r\n    &lt;table id=&quot;wrapper&quot;&gt;\r\n        &lt;tbody&gt;\r\n        &lt;tr&gt;\r\n            &lt;td valign=&quot;middle&quot;&gt;\r\n                &lt;div id=&quot;splash&quot;&gt;\r\n                    &lt;div id=&quot;splash_header&quot;&gt;\r\n                        &lt;h1&gt;Guests of Paul&lt;\/h1&gt;\r\n                    &lt;\/div&gt;\r\n                    &lt;div id=&quot;splash_content&quot;&gt;\r\n                        &lt;!-- &quot;textarea&quot; is where you put your Text --&gt;\r\n                        &lt;center&gt;&lt;b&gt;Wifi Network &amp;amp; Internet conditions:&lt;\/b&gt;&lt;\/center&gt;\r\n                        &lt;textarea readonly=&quot;readonly&quot;&gt;\r\n                        You are solely responsible for the risks of joining this \r\n                        network and accept this term by clicking the &quot;OK, I AGREE&quot; \r\n                        button.\r\n                        We are not responsible for faulty operation of your computer or \r\n                        equipment. You will be at risk to other devices on the network. \r\n                        By joining, you accept all risks and verify you are okay with \r\n                        the chance of possible device enumeration. You may be asked to\r\n                        stop using your equipment.\r\n                        This banner will appear again periodically.\r\n                        To renew your access time, you must agree once again every 3600 \r\n                        seconds.\r\n                        Thank You, and Enjoy!&lt;\/textarea&gt;\r\n                        &lt;form method=&quot;POST&quot; action=$action&gt;\r\n                            &lt;input type=&quot;hidden&quot; name=&quot;mode_login&quot;&gt;\r\n                            &lt;input type=&quot;hidden&quot; name=&quot;redirect&quot; value=$redirect&gt;\r\n                            &lt;input type=&quot;hidden&quot; name=&quot;accept_terms&quot; value=&quot;yes&quot;&gt;\r\n                            &lt;button type=&quot;submit&quot; value=&quot;Submit&quot;&gt;Ok, I Agree!&lt;\/button&gt;\r\n                        &lt;\/form&gt;\r\n                    &lt;\/div&gt;\r\n                &lt;\/div&gt;\r\n            &lt;\/td&gt;\r\n        &lt;\/tr&gt;\r\n        &lt;\/tbody&gt;\r\n    &lt;\/table&gt;\r\n&lt;\/body&gt;\r\n&lt;\/html&gt;<\/pre>\n\t\t\t<\/div>\n<p>So now I have this new splash page, make sure you update your code with the correct router IP address. Now I need to set it as the router&#8217;s splash page. In the Captive Portal section on the Tomato web UI, I just confirmed that the welcome path was set to my splash page.<\/p>\n<p>Save it all, and that&#8217;s it. Enjoy!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>What is a splash page? Well it&#8217;s basically a welcome page. Router&#8217;s can have splash pages to greet users immediately after connecting to the network, notify them of conditions of use and\/or require user authentication. I want a splash page for my guest network to basically inform guests that my guest network is a risky environment&#8230; it is free at [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[93],"tags":[96,99,94],"class_list":["post-346","post","type-post","status-publish","format-standard","hentry","category-networking","tag-router","tag-splash-page","tag-tomato-shibby"],"_links":{"self":[{"href":"https:\/\/somethingk.com\/main\/wp-json\/wp\/v2\/posts\/346","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/somethingk.com\/main\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/somethingk.com\/main\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/somethingk.com\/main\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/somethingk.com\/main\/wp-json\/wp\/v2\/comments?post=346"}],"version-history":[{"count":24,"href":"https:\/\/somethingk.com\/main\/wp-json\/wp\/v2\/posts\/346\/revisions"}],"predecessor-version":[{"id":1082,"href":"https:\/\/somethingk.com\/main\/wp-json\/wp\/v2\/posts\/346\/revisions\/1082"}],"wp:attachment":[{"href":"https:\/\/somethingk.com\/main\/wp-json\/wp\/v2\/media?parent=346"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/somethingk.com\/main\/wp-json\/wp\/v2\/categories?post=346"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/somethingk.com\/main\/wp-json\/wp\/v2\/tags?post=346"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}