Add authentication support to the API documentation

Signed-off-by: DL6ER <dl6er@dl6er.de>
This commit is contained in:
DL6ER 2021-01-31 10:31:48 +01:00
parent d1269c0a8a
commit 5797f939e6
No known key found for this signature in database
GPG Key ID: 00135ACBD90B28DD
7 changed files with 170 additions and 5 deletions

View File

@ -11,10 +11,12 @@
set(sources
hex/index.html
hex/index.css
hex/pi-hole.js
hex/external/rapidoc-min.js
hex/external/rapidoc-min.js.map
hex/external/highlight.min.js
hex/external/highlight-default.min.css
hex/external/geraintluff-sha256.min.js
hex/images/logo.svg
hex/specs/auth.yaml
hex/specs/clients.yaml

View File

@ -0,0 +1 @@
var sha256=function a(b){function c(a,b){return a>>>b|a<<32-b}for(var d,e,f=Math.pow,g=f(2,32),h="length",i="",j=[],k=8*b[h],l=a.h=a.h||[],m=a.k=a.k||[],n=m[h],o={},p=2;64>n;p++)if(!o[p]){for(d=0;313>d;d+=p)o[d]=p;l[n]=f(p,.5)*g|0,m[n++]=f(p,1/3)*g|0}for(b+="\x80";b[h]%64-56;)b+="\x00";for(d=0;d<b[h];d++){if(e=b.charCodeAt(d),e>>8)return;j[d>>2]|=e<<(3-d)%4*8}for(j[j[h]]=k/g|0,j[j[h]]=k,e=0;e<j[h];){var q=j.slice(e,e+=16),r=l;for(l=l.slice(0,8),d=0;64>d;d++){var s=q[d-15],t=q[d-2],u=l[0],v=l[4],w=l[7]+(c(v,6)^c(v,11)^c(v,25))+(v&l[5]^~v&l[6])+m[d]+(q[d]=16>d?q[d]:q[d-16]+(c(s,7)^c(s,18)^s>>>3)+q[d-7]+(c(t,17)^c(t,19)^t>>>10)|0),x=(c(u,2)^c(u,13)^c(u,22))+(u&l[1]^u&l[2]^l[1]&l[2]);l=[w+x|0].concat(l),l[4]=l[4]+w|0}for(d=0;8>d;d++)l[d]=l[d]+r[d]|0}for(d=0;8>d;d++)for(e=3;e+1;e--){var y=l[d]>>8*e&255;i+=(16>y?0:"")+y.toString(16)}return i};

View File

@ -24,3 +24,9 @@
width: 60px;
height: 24px
}
.btn.green {
background-color: #228b22;
}
.btn.red {
background-color: #ff4500;
}

View File

@ -7,7 +7,9 @@
<!--<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,600&display=swap" rel="stylesheet">-->
<link rel="stylesheet" href="external/highlight-default.min.css">
<script src="external/highlight.min.js"></script>
<script src="external/geraintluff-sha256.min.js"></script>
<script type='text/javascript' src='external/rapidoc-min.js'></script>
<script type="text/javascript" src="pi-hole.js"></script>
<link href='index.css' rel='stylesheet'>
<link rel="apple-touch-icon" href="../../admin/img/favicons/apple-touch-icon.png" sizes="180x180">
<link rel="icon" href="../../admin/img/favicons/favicon-32x32.png" sizes="32x32" type="image/png">
@ -36,15 +38,25 @@
render-style = "view"
primary-color = "#2d87e2"
header-color = "#2d87e2"
api-key-name = "sid"
api-key-location = "header"
api-key-value = "-"
allow-search = "false"
schema-expand-level= "2">
<img slot="logo" style="padding-left: 10px;" src="images/logo.svg" width="20px" />
<div slot="header" style="font-weight:700; font-size:32px">Pi-hole API Documentation</div>
<img slot="logo" style="padding-left: 10px;" src="images/logo.svg" width="40px" />
<div slot='header' style="font-weight:700; font-size:32px">
<div>Pi-hole API Documentation</div>
<div>
<input id='loginpw' type='password' size="4">
<button class='btn' id='loginbtn' onclick='login()'>Login</button>
</div>
</div>
<!-- content at the bottom -->
<div slot="footer" style="margin:0; padding:16px 36px; background-color:#2d87e2; color:#fff; text-align:center;">
<button class='btn large' onclick="document.getElementById('thedoc').setAttribute('render-style', 'view')" >Default</button>
<button class='btn large' onclick="document.getElementById('thedoc').setAttribute('render-style', 'read')" >Reader</button>
<button class='btn large' onclick="document.getElementById('thedoc').setAttribute('render-style', 'focused')" >Focused reader</button>
<button class='btn large' onclick="setStyle('view')" >Default</button>
<button class='btn large' onclick="setStyle('read')" >Reader</button>
<button class='btn large' onclick="setStyle('focused')" >Focused reader</button>
</div>
</rapi-doc>
</body>

View File

@ -0,0 +1,126 @@
/* Pi-hole: A black hole for Internet advertisements
* (c) 2021 Pi-hole, LLC (https://pi-hole.net)
* Network-wide ad blocking via your own hardware.
*
* This file is copyright under the latest version of the EUPL.
* Please see LICENSE file for your rights under this license. */
function computeResponse(password, challenge) {
// Compute password hash twice to mitigate rainbow
// table vulnerability
console.log(password, challenge);
return sha256(challenge + ":" + sha256(sha256(password)));
}
// GET implementation
async function getData(url = '') {
const response = await fetch(url, {
method: 'GET',
headers: {'Content-Type': 'application/json'}
});
return response.json();
}
// DELETE implementation
async function deleteData(url = '') {
const response = await fetch(url, {
method: 'DELETE'
});
return response;
}
// POST implementation
async function postData(url = '', data = {}) {
const response = await fetch(url, {
method: 'POST',
headers: {'Content-Type': 'application/json'},
body: JSON.stringify(data)
});
return response.json();
}
// Send response
function login2(response) {
postData('/api/auth', {response: response})
.then(data => {
if(data.session.valid === true) {
loginOk(data.session.sid);
} else {
loginFAIL();
}
})
.catch((error) => {
loginFAIL();
console.error('Error:', error);
});
}
// Mark login as OK
function loginOk(sid) {
const docEl = document.getElementById('thedoc');
docEl.setAttribute('api-key-value', sid);
const btn = document.getElementById('loginbtn');
btn.classList.add('green');
btn.classList.remove('red');
btn.textContent = 'Logout';
}
// Mark login as FAIL
function loginFAIL() {
const docEl = document.getElementById('thedoc');
docEl.setAttribute('api-key-value', '-');
const btn = document.getElementById('loginbtn');
btn.classList.remove('green');
btn.classList.add('red');
btn.textContent = 'Login';
}
// Mark logout as OK
function logoutOk() {
const docEl = document.getElementById('thedoc');
docEl.setAttribute('api-key-value', '-');
const btn = document.getElementById('loginbtn');
btn.classList.remove('green');
btn.classList.remove('red');
btn.textContent = 'Login';
}
function login1(pw)
{
getData('/api/auth')
.then(data => {
if("challenge" in data && data.challenge !== null) {
var response = computeResponse(pw, data.challenge);
login2(response);
} else if(data.session.valid === true) {
loginOk(data.session.sid);
} else {
loginFAIL();
}
})
.catch((error) => {
loginFAIL();
console.error('Error:', error);
});
}
// Start login sequence by getting challenge
function login(){
const docEl = document.getElementById('thedoc');
if(docEl.attributes["api-key-value"].value === '-') {
var pw = document.getElementById('loginpw').value;
login1(pw);
} else {
deleteData('/api/auth')
.then(logoutOk())
.catch((error) => {
loginFAIL();
console.error('Error:', error);
});
}
}
function setStyle(style) {
const docEl = document.getElementById('thedoc');
docEl.setAttribute('render-style', style);
docEl.setAttribute('allow-search', style !== 'view');
}

View File

@ -82,3 +82,11 @@ paths:
/version:
$ref: 'version.yaml#/components/paths/version'
components:
securitySchemes:
sid:
type: apiKey
name: sid
description: SID used for secured endpoints
in: header

View File

@ -24,6 +24,10 @@ static const char index_css[] = {
#include "hex/index.css"
};
static const char pi_hole_js[] = {
#include "hex/pi-hole.js"
};
static const char rapidoc_min_js[] = {
#include "hex/external/rapidoc-min.js"
};
@ -36,6 +40,10 @@ static const char highlight_default_min_css[] = {
#include "hex/external/highlight-default.min.css"
};
static const char geraintluff_sha256_min_js[] = {
#include "hex/external/geraintluff-sha256.min.js"
};
static const char highlight_min_js[] = {
#include "hex/external/highlight.min.js"
};
@ -96,10 +104,12 @@ struct {
{
{"index.html", "text/html", index_html, sizeof(index_html)},
{"index.css", "text/css", index_css, sizeof(index_css)},
{"pi-hole.js", "application/javascript", pi_hole_js, sizeof(pi_hole_js)},
{"external/rapidoc-min.js", "application/javascript", rapidoc_min_js, sizeof(rapidoc_min_js)},
{"external/rapidoc-min.map.js", "text/plain", rapidoc_min_map_js, sizeof(rapidoc_min_map_js)},
{"external/highlight-default.min.css", "text/css", highlight_default_min_css, sizeof(highlight_default_min_css)},
{"external/highlight.min.js", "application/javascript", highlight_min_js, sizeof(highlight_min_js)},
{"external/geraintluff-sha256.min.js", "application/javascript", geraintluff_sha256_min_js, sizeof(geraintluff_sha256_min_js)},
{"images/logo.svg", "image/svg+xml", images_logo_svg, sizeof(images_logo_svg)},
{"specs/auth.yaml", "text/plain", specs_auth_yaml, sizeof(specs_auth_yaml)},
{"specs/clients.yaml", "text/plain", specs_clients_yaml, sizeof(specs_clients_yaml)},