first open-appsec support

This commit is contained in:
roybarda
2023-12-06 11:59:21 +02:00
parent 81a38957bf
commit f9ae99ea49
22 changed files with 440 additions and 8 deletions

View File

@@ -21,6 +21,7 @@
<meta name="msapplication-TileColor" content="#333333">
<meta name="msapplication-config" content="/images/favicons/browserconfig.xml">
<meta name="theme-color" content="#ffffff">
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@600&display=swap" rel="stylesheet">
<link href="/css/main.css?v=<%= version %>" rel="stylesheet">
</head>
<body>

View File

@@ -716,6 +716,17 @@ module.exports = {
}
},
OpenappsecLog: {
/**
* @param {Array} [expand]
* @param {String} [query]
* @returns {Promise}
*/
getAll: function (expand, query) {
return getAllObjects('openappsec-log', expand, query);
}
},
Reports: {
/**
@@ -753,5 +764,22 @@ module.exports = {
delete data.id;
return fetch('put', 'settings/' + id, data);
}
},
OpenAppsecSettings: {
/**
* @returns {Promise}
*/
get: function () {
return fetch('get', 'openappsec-settings');
},
/**
* @param {Object} data
* @returns {Promise}
*/
save: function (data) {
return fetch('put', 'openappsec-settings', data);
}
},
};

View File

@@ -407,6 +407,34 @@ module.exports = {
}
},
/**
* openappsec Log
*/
showOpenappsecLog: function () {
let controller = this;
if (Cache.User.isAdmin()) {
require(['./main', './openappsec-log/main'], (App, View) => {
controller.navigate('/openappsec-log');
App.UI.showAppContent(new View());
});
} else {
this.showDashboard();
}
},
/**
* openappsec Log Metadata
*
* @param model
*/
showOpenappsecMeta: function (model) {
if (Cache.User.isAdmin()) {
require(['./main', './openappsec-log/meta'], function (App, View) {
App.UI.showModalDialog(new View({model: model}));
});
}
},
/**
* Settings
*/

View File

@@ -72,6 +72,7 @@
</label>
</div>
</div>
<div class="col-sm-12 col-md-12">
<div class="form-group">
<label class="custom-switch">
@@ -90,6 +91,40 @@
</select>
</div>
</div>
<div class="col-sm-12 col-md-12">
<hr class="my-3">
<div class="form-group">
<label class="custom-switch">
<input type="checkbox" class="custom-switch-input" name="use_openappsec" value="1"<%- use_openappsec ? ' checked' : '' %>>
<span class="custom-switch-indicator"></span>
<span class="custom-switch-description font-weight-bold">open-appsec</span>
</label>
</div>
</div>
<div class="col-sm-12 col-md-12">
<div class="form-group row">
<label class="col-sm-6 col-form-label <%- use_openappsec ? '' : ' text-muted' %>">Enforcement Mode</label>
<select name="openappsec_mode" class="col-sm-4 form-control custom-select" placeholder="Please Select" <%- use_openappsec ? '' : ' disabled' %>>
<option value="detect-learn" <%- openappsec_mode === 'detect-learn' ? 'selected' : '' %>>Detect-Learn</option>
<option value="prevent-learn" <%- openappsec_mode === 'prevent-learn' ? 'selected' : '' %>>Prevent-Learn</option>
</select>
</div>
</div>
<div class="col-sm-12 col-md-12">
<div class="form-group row">
<label class="col-sm-6 col-form-label <%- use_openappsec ? '' : ' text-muted' %>">Minimum confidence for prevent</label>
<select name="minimum_confidence" class="col-sm-4 form-control custom-select" placeholder="Please Select" <%- use_openappsec ? '' : ' disabled' %>>
<option value="critical" <%- minimum_confidence === 'critical' ? 'selected' : '' %>>Critical</option>
<option value="high" <%- minimum_confidence === 'high' ? 'selected' : '' %>>High</option>
<option value="medium" <%- minimum_confidence === 'medium' ? 'selected' : '' %>>Medium</option>
</select>
</div>
</div>
</div>
</div>

View File

@@ -33,6 +33,9 @@ module.exports = Mn.View.extend({
certificate_select: 'select[name="certificate_id"]',
access_list_select: 'select[name="access_list_id"]',
ssl_forced: 'input[name="ssl_forced"]',
use_openappsec: 'input[name="use_openappsec"]',
openappsec_mode: 'select[name="openappsec_mode"]',
minimum_confidence: 'select[name="minimum_confidence"]',
hsts_enabled: 'input[name="hsts_enabled"]',
hsts_subdomains: 'input[name="hsts_subdomains"]',
http2_support: 'input[name="http2_support"]',
@@ -75,6 +78,24 @@ module.exports = Mn.View.extend({
inputs.trigger('change');
},
'change @ui.use_openappsec': function () {
let checked = this.ui.use_openappsec.prop('checked');
this.ui.openappsec_mode
.prop('disabled', !checked)
.parents('.form-group')
.css('opacity', checked ? 1 : 0.5);
this.ui.minimum_confidence
.prop('disabled', !checked)
.parents('.form-group')
.css('opacity', checked ? 1 : 0.5);
/*** check this */
if (!checked) {
this.ui.openappsec_mode.prop('checked', false);
}
},
'change @ui.ssl_forced': function () {
let checked = this.ui.ssl_forced.prop('checked');
this.ui.hsts_enabled
@@ -146,14 +167,32 @@ module.exports = Mn.View.extend({
}
let view = this;
let data = this.ui.form.serializeJSON();
// Add locations
// enable openappsec inputs for serialization. if we don't do this, serialization of custom locations will be added to the root object instead of the missing root properties with the same name.
let topHostDisabledElements = this.ui.form.find('#details [name*="openappsec"]:disabled, [name="minimum_confidence"]:disabled');
topHostDisabledElements.prop('disabled', false);
let data = this.ui.form.serializeJSON();
topHostDisabledElements.prop('disabled', true);
// Check if openappsec is enabled. serializeJSON() will only return its value attribute, not its checked attribute.
let use_openappsec = this.ui.use_openappsec.prop('checked');
data.use_openappsec = use_openappsec;
// Add locations using the model defined in file frontend/js/app/nginx/proxy/location.js and the template frontend/js/app/nginx/proxy/location-item.ejs.
// input fields with the class 'model' will automatically update the model.
data.locations = [];
this.locationsCollection.models.forEach((location) => {
data.locations.push(location.toJSON());
});
// convert all "false" strings to false booleans in data.
Object.keys(data).forEach(key => {
if (typeof data[key] === 'string' && data[key].toLowerCase() === 'false') {
data[key] = false;
}
});
// Serialize collects path from custom locations
// This field must be removed from root object
delete data.path;
@@ -161,6 +200,7 @@ module.exports = Mn.View.extend({
// Manipulate
data.forward_port = parseInt(data.forward_port, 10);
data.block_exploits = !!data.block_exploits;
data.use_openappsec = !!data.use_openappsec;
data.caching_enabled = !!data.caching_enabled;
data.allow_websocket_upgrade = !!data.allow_websocket_upgrade;
data.http2_support = !!data.http2_support;
@@ -266,6 +306,7 @@ module.exports = Mn.View.extend({
this.ui.ssl_forced.trigger('change');
this.ui.hsts_enabled.trigger('change');
this.ui.use_openappsec.trigger('change');
// Domain names
this.ui.domain_names.selectize({

View File

@@ -16,7 +16,7 @@
<div class="col-auto">
<div class="selectgroup">
<label class="selectgroup-item">
<input type="checkbox" class="selectgroup-input">
<input id="advanced_config_toggle" type="checkbox" class="selectgroup-input">
<span class="selectgroup-button">
<i class="fe fe-settings"></i>
</span>
@@ -56,6 +56,41 @@
</div>
</div>
</div>
<hr class="my-3"/>
<div class="row">
<div class="col-md-12">
<div class="form-group">
<label class="custom-switch">
<input type="checkbox" name="use_openappsec" id="use_openappsec" class="custom-switch-input" value="1"<%- use_openappsec ? ' checked' : '' %>>
<span class="custom-switch-indicator"></span>
<span class="custom-switch-description font-weight-bold">open-appsec</span>
</label>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-12 col-md-12">
<div class="form-group row">
<label class="col-sm-7 col-form-label <%- use_openappsec ? '' : ' text-muted' %>">Enforcement Mode</label>
<select name="openappsec_mode" class="col-sm-4 form-control custom-select model" placeholder="Please Select" <%- use_openappsec ? '' : ' disabled' %>>
<option value="detect-learn" <%- openappsec_mode === 'detect-learn' ? 'selected' : '' %>>Detect-Learn</option>
<option value="prevent-learn" <%- openappsec_mode === 'prevent-learn' ? 'selected' : '' %>>Prevent-Learn</option>
</select>
</div>
</div>
<div class="col-sm-12 col-md-12">
<div class="form-group row">
<label class="col-sm-7 col-form-label <%- use_openappsec ? '' : ' text-muted' %>">Minimum confidence for prevent</label>
<select name="minimum_confidence" class="col-sm-4 form-control custom-select model" placeholder="Please Select" <%- use_openappsec ? '' : ' disabled' %>>
<option value="critical" <%- minimum_confidence === 'critical' ? 'selected' : '' %>>Critical</option>
<option value="high" <%- minimum_confidence === 'high' ? 'selected' : '' %>>High</option>
<option value="medium" <%- minimum_confidence === 'medium' ? 'selected' : '' %>>Medium</option>
</select>
</div>
</div>
</div>
<a href="#" class="card-link location-delete">
<i class="fa fa-trash"></i> <%- i18n('locations', 'delete') %>

View File

@@ -7,7 +7,10 @@ const LocationView = Mn.View.extend({
className: 'location_block',
ui: {
toggle: 'input[type="checkbox"]',
use_openappsec: 'input[name="use_openappsec"]',
openappsec_mode: 'select[name="openappsec_mode"]',
minimum_confidence: 'select[name="minimum_confidence"]',
toggle: 'input[type="checkbox"]#advanced_config_toggle',
config: '.config',
delete: '.location-delete'
},
@@ -21,6 +24,27 @@ const LocationView = Mn.View.extend({
}
},
'change @ui.use_openappsec': function () {
let checked = this.ui.use_openappsec.prop('checked');
this.model.set('use_openappsec', checked);
this.ui.openappsec_mode
.prop('disabled', !checked)
.parents('.form-group')
.css('opacity', checked ? 1 : 0.5);
this.ui.minimum_confidence
.prop('disabled', !checked)
.parents('.form-group')
.css('opacity', checked ? 1 : 0.5);
/*** check this */
if (!checked) {
this.ui.openappsec_mode.prop('checked', false);
}
},
// input fields with the class 'model' will automatically update the model.
'change .model': function (e) {
const map = {};
map[e.target.name] = e.target.value;

View File

@@ -129,6 +129,7 @@ module.exports = Mn.View.extend({
// Manipulate
data.block_exploits = !!data.block_exploits;
data.use_openappsec = !!data.use_openappsec;
data.preserve_path = !!data.preserve_path;
data.http2_support = !!data.http2_support;
data.hsts_enabled = !!data.hsts_enabled;

View File

@@ -13,6 +13,7 @@ module.exports = AppRouter.default.extend({
'nginx/access': 'showNginxAccess',
'nginx/certificates': 'showNginxCertificates',
'audit-log': 'showAuditLog',
'openappsec-log': 'showOpenappsecLog',
'settings': 'showSettings',
'*default': 'showDashboard'
}

View File

@@ -3,12 +3,55 @@
<div class="card-header">
<h3 class="card-title"><%- i18n('settings', 'title') %></h3>
</div>
<div class="card-body no-padding min-100">
<div class="card-body no-padding min-100 has-tabs">
<div class="px-4">
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class="nav-item"><a href="#details" aria-controls="tab1" role="tab" data-toggle="tab" class="nav-link active">Nginx Proxy Manager</a></li>
<li role="presentation" class="nav-item"><a href="#open-appsec" aria-controls="tab4" role="tab" data-toggle="tab" class="nav-link">open-appsec Advanced</a></li>
</ul>
</div>
<div class="tab-content">
<!-- npm -->
<div role="tabpanel" class="tab-pane active" id="details">
<div class="row">
<div class="col-sm-12 col-md-12">
<div class="dimmer active">
<div class="loader"></div>
<div class="dimmer-content list-region">
<!-- List Region -->
</div>
</div>
</div>
</div>
</div>
<!-- open-appsec -->
<div role="tabpanel" class="tab-pane" id="open-appsec">
<div class="p-4">
<div class="row">
<div class="col-md-12">
<form>
<div class="form-group">
<label class="form-label">open-appsec Configuration File</label>
<textarea id="local_policy" name="local_policy" rows="15" class="form-control text-monospace" placeholder="# <%- i18n('settings', 'local-policy-warning') %>"></textarea>
</div>
<div id="lp_success_info" class="alert alert-success success" role="alert">Local Policy Updated</div>
<div id="lp_error_info" class="alert alert-danger" role="alert">error</div>
<button type="button" class="btn btn-teal save"><%- i18n('str', 'save-settings') %></button>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

View File

@@ -5,11 +5,18 @@ const ListView = require('./list/main');
const ErrorView = require('../error/main');
const template = require('./main.ejs');
require('jquery-serializejson');
module.exports = Mn.View.extend({
id: 'settings',
template: template,
ui: {
local_policy_field: '#open-appsec form #local_policy',
lp_success_info: '#open-appsec form #lp_success_info',
lp_error_info: '#open-appsec form #lp_error_info',
form: '#open-appsec form',
save: 'button.save',
list_region: '.list-region',
add: '.add-item',
dimmer: '.dimmer'
@@ -19,9 +26,57 @@ module.exports = Mn.View.extend({
list_region: '@ui.list_region'
},
events: {
'click @ui.save': function (e) {
e.preventDefault();
this.ui.lp_success_info.hide();
this.ui.lp_error_info.hide();
let data = this.ui.form.serializeJSON();
console.log(data);
App.Api.OpenAppsecSettings.save(data)
.then(response => {
this.showSuccess();
})
.catch(err => {
console.error(err);
this.showError(err);
});
}
},
showSuccess: function () {
this.ui.lp_success_info.show();
setTimeout(() => {
this.ui.lp_success_info.fadeOut();
}, 1000);
},
showError: function (err) {
this.ui.lp_error_info.show();
this.ui.lp_error_info.html(err.message);
setTimeout(() => {
this.ui.lp_error_info.fadeOut();
}, 3000);
},
onRender: function () {
let view = this;
this.ui.lp_success_info.hide();
this.ui.lp_error_info.hide();
App.Api.OpenAppsecSettings.get()
.then(response => {
if (!view.isDestroyed() && response) {
view.ui.local_policy_field.val(response);
}
})
.catch(err => {
console.error(err);
});
App.Api.Settings.getAll()
.then(response => {
if (!view.isDestroyed() && response && response.length) {

View File

@@ -6,6 +6,8 @@
<a class="navbar-brand" href="/">
<img src="/images/favicons/favicon-32x32.png" border="0"> &nbsp; <%- i18n('main', 'app') %>
</a>
<div class="d-flex align-items-center order-lg-2 ml-auto">
<span class="small mr-3 text-nowrap">Secured by:</span><img src="/images/open-appsec-logo.svg" border="0" width="29" class="mr-2"> <span class="mr-sm-0 mr-md-4 my-0 align-middle text-nowrap" style="font-family: Open Sans;">open-appsec</span>
<div class="d-flex align-items-center order-lg-2 ml-auto">
<div class="dropdown">

View File

@@ -42,6 +42,9 @@
<li class="nav-item">
<a href="/audit-log" class="nav-link"><i class="fe fe-book-open"></i> <%- i18n('audit-log', 'title') %></a>
</li>
<li class="nav-item">
<a href="/openappsec-log" class="nav-link"><i class="fe fe-book-open"></i>Security Log</a>
</li>
<li class="nav-item">
<a href="/settings" class="nav-link"><i class="fe fe-settings"></i> <%- i18n('settings', 'title') %></a>
</li>

View File

@@ -12,6 +12,7 @@
"roles": "Roles",
"created-on": "Created: {date}",
"save": "Save",
"save-settings": "Save Settings",
"cancel": "Cancel",
"close": "Close",
"enable": "Enable",
@@ -290,7 +291,8 @@
"default-site-404": "404 Page",
"default-site-444": "No Response (444)",
"default-site-html": "Custom Page",
"default-site-redirect": "Redirect"
"default-site-redirect": "Redirect",
"local-policy-warning": "open-appsec YAML-based configuration file"
}
}
}

View File

@@ -10,12 +10,17 @@ const model = Backbone.Model.extend({
advanced_config: '',
forward_scheme: 'http',
forward_host: '',
forward_port: '80'
forward_port: '80',
use_openappsec: false,
openappsec_mode: 'detect-learn',
minimum_confidence: 'high'
}
},
toJSON() {
const r = Object.assign({}, this.attributes);
// convert use_openappsec to boolean
r.use_openappsec = !!r.use_openappsec;
delete r.opened;
return r;
},

View File

@@ -20,6 +20,9 @@ const model = Backbone.Model.extend({
caching_enabled: false,
allow_websocket_upgrade: false,
block_exploits: false,
use_openappsec: false,
openappsec_mode: "detect-learn",
minimum_confidence: "high",
http2_support: false,
advanced_config: '',
enabled: true,