Docker/portainer
Docker/portainer
1
0
Fork 0
mirror of https://github.com/portainer/portainer.git synced 2025-08-10 08:15:25 +02:00
Code Issues Releases Activity

EE-4286 fix(docker): update tls certs for docker env

Browse source
This commit is contained in:
RexWangPT 2022-10-26 11:50:57 +08:00
parent 446febb0f6
commit 63be076e14
5 changed files with 47 additions and 132 deletions
Download patch file Download diff file Expand all files Collapse all files

104
app/portainer/components/endpointSecurity/porEndpointSecurity.html
View file

@ -4,91 +4,38 @@
<div class="col-sm-12">
<por-switch-field
label="'TLS'"
label-class="'col-sm-2'"
label-class="'col-sm-3 col-lg-2'"
checked="$ctrl.formData.TLS"
on-change="($ctrl.onToggleTLS)"
tooltip="'Enable this option if you need to connect to the Docker environment with TLS.'"
></por-switch-field>
</div>
</div>
<!-- !tls-checkbox -->
<div class="col-sm-12 form-section-title" ng-if="$ctrl.formData.TLS"> TLS mode </div>
<!-- note -->
<div class="form-group" ng-if="$ctrl.formData.TLS">
<div class="col-sm-12">
<span class="small text-muted">
You can find out more information about how to protect a Docker environment with TLS in the
<a href="https://docs.docker.com/engine/security/https/" target="_blank">Docker documentation</a>.
</span>
</div>
</div>
<div class="form-group"></div>
<!-- endpoint-tls-mode -->
<div class="form-group" ng-if="$ctrl.formData.TLS">
<div class="col-sm-12">
<div class="boxselector_wrapper">
<div>
<input type="radio" id="tls_client_ca" ng-model="$ctrl.formData.TLSMode" value="tls_client_ca" />
<label for="tls_client_ca">
<div class="boxselector_header">
<pr-icon icon="'shield'" feather="true"></pr-icon>
TLS with server and client verification
</div>
<p>Use client certificates and server verification</p>
</label>
</div>
<div>
<input type="radio" id="tls_client_noca" ng-model="$ctrl.formData.TLSMode" value="tls_client_noca" />
<label for="tls_client_noca">
<div class="boxselector_header">
<pr-icon icon="'shield'" feather="true"></pr-icon>
TLS with client verification only
</div>
<p>Use client certificates without server verification</p>
</label>
</div>
<div>
<input type="radio" id="tls_ca" ng-model="$ctrl.formData.TLSMode" value="tls_ca" />
<label for="tls_ca">
<div class="boxselector_header">
<pr-icon icon="'shield'" feather="true"></pr-icon>
TLS with server verification only
</div>
<p>Only verify the server certificate</p>
</label>
</div>
<div>
<input type="radio" id="tls_only" ng-model="$ctrl.formData.TLSMode" value="tls_only" />
<label for="tls_only">
<div class="boxselector_header">
<pr-icon icon="'shield'" feather="true"></pr-icon>
TLS only
</div>
<p>No server/client verification</p>
</label>
</div>
</div>
</div>
</div>
<!-- !endpoint-tls-mode -->
<div class="col-sm-12 form-section-title" ng-if="$ctrl.formData.TLS && $ctrl.formData.TLSMode !== 'tls_only'"> Required TLS files </div>
<!-- tls-file-upload -->
<div ng-if="$ctrl.formData.TLS">
<!-- tls-file-ca -->
<div class="form-group" ng-if="$ctrl.formData.TLSMode === 'tls_client_ca' || $ctrl.formData.TLSMode === 'tls_ca'">
<label class="col-sm-3 col-lg-2 control-label text-left">TLS CA certificate</label>
<div class="col-sm-9 col-lg-10">
<button type="button" class="btn btn-sm btn-primary" ngf-select ng-model="$ctrl.formData.TLSCACert">Select file</button>
<span class="space-left">
{{ $ctrl.formData.TLSCACert.name }}
<pr-icon icon="'check'" ng-if="$ctrl.formData.TLSCACert && $ctrl.formData.TLSCACert === $ctrl.endpoint.TLSConfig.TLSCACert" mode="'success'" feather="true"></pr-icon>
<pr-icon icon="'x'" ng-if="!$ctrl.formData.TLSCACert" mode="'danger'" feather="true"></pr-icon>
</span>
<!-- skip verify -->
<div class="form-group">
<div class="col-sm-12">
<por-switch-field
label="'Skip Certification Verification'"
label-class="'col-sm-3 col-lg-2'"
checked="$ctrl.formData.TLSSkipVerify"
on-change="($ctrl.onToggleSkipVerify)"
></por-switch-field>
</div>
</div>
<!-- !tls-file-ca -->
<!-- tls-files-cert-key -->
<div ng-if="$ctrl.formData.TLSMode === 'tls_client_ca' || $ctrl.formData.TLSMode === 'tls_client_noca'">
<!-- !skip verify -->
<div ng-if="!$ctrl.formData.TLSSkipVerify">
<!-- tls-file-ca -->
<div class="form-group">
<label class="col-sm-3 col-lg-2 control-label text-left">TLS CA certificate</label>
<div class="col-sm-9 col-lg-10">
<button type="button" class="btn btn-sm btn-primary" ngf-select ng-model="$ctrl.formData.TLSCACert">Select file</button>
<span class="space-left">
{{ $ctrl.formData.TLSCACert.name }}
</span>
</div>
</div>
<!-- !tls-file-ca -->
<!-- tls-file-cert -->
<div class="form-group">
<label for="tls_cert" class="col-sm-3 col-lg-2 control-label text-left">TLS certificate</label>
@ -96,8 +43,6 @@
<button type="button" class="btn btn-sm btn-primary" ngf-select ng-model="$ctrl.formData.TLSCert">Select file</button>
<span class="space-left">
{{ $ctrl.formData.TLSCert.name }}
<pr-icon icon="'check'" ng-if="$ctrl.formData.TLSCert && $ctrl.formData.TLSCert === $ctrl.endpoint.TLSConfig.TLSCert" mode="'success'" feather="true"></pr-icon>
<pr-icon icon="'x'" ng-if="!$ctrl.formData.TLSCert" mode="'danger'" feather="true"></pr-icon>
</span>
</div>
</div>
@ -109,14 +54,11 @@
<button type="button" class="btn btn-sm btn-primary" ngf-select ng-model="$ctrl.formData.TLSKey">Select file</button>
<span class="space-left">
{{ $ctrl.formData.TLSKey.name }}
<pr-icon icon="'check'" ng-if="$ctrl.formData.TLSKey && $ctrl.formData.TLSKey === $ctrl.endpoint.TLSConfig.TLSKey" mode="'success'" feather="true"></pr-icon>
<pr-icon icon="'x'" ng-if="!$ctrl.formData.TLSKey" mode="'danger'" feather="true"></pr-icon>
</span>
</div>
</div>
<!-- !tls-file-key -->
</div>
<!-- tls-files-cert-key -->
</div>
<!-- !tls-file-upload -->
</div>

26
app/portainer/components/endpointSecurity/porEndpointSecurityController.js
View file

@ -9,30 +9,20 @@ angular.module('portainer.app').controller('porEndpointSecurityController', [
});
};
ctrl.onToggleSkipVerify = function (newValue) {
$scope.$evalAsync(() => {
ctrl.formData.TLSSkipVerify = newValue;
});
};
this.$onInit = $onInit;
function $onInit() {
if (ctrl.endpoint) {
var endpoint = ctrl.endpoint;
var TLS = endpoint.TLSConfig.TLS;
ctrl.formData.TLS = TLS;
var CACert = endpoint.TLSConfig.TLSCACert;
ctrl.formData.TLSCACert = CACert;
var cert = endpoint.TLSConfig.TLSCert;
ctrl.formData.TLSCert = cert;
var key = endpoint.TLSConfig.TLSKey;
ctrl.formData.TLSKey = key;
if (TLS) {
if (CACert && cert && key) {
ctrl.formData.TLSMode = 'tls_client_ca';
} else if (cert && key) {
ctrl.formData.TLSMode = 'tls_client_noca';
} else if (CACert) {
ctrl.formData.TLSMode = 'tls_ca';
} else {
ctrl.formData.TLSMode = 'tls_only';
}
}
var skipVerify = endpoint.TLSConfig.TLSSkipVerify;
ctrl.formData.TLSSkipVerify = skipVerify;
}
}
},

1
app/portainer/components/endpointSecurity/porEndpointSecurityModel.js
View file

@ -1,6 +1,5 @@
export function EndpointSecurityFormData() {
this.TLS = false;
this.TLSMode = 'tls_client_ca';
this.TLSCACert = null;
this.TLSCert = null;
this.TLSKey = null;

2
app/portainer/views/endpoints/edit/endpoint.html
View file

@ -165,7 +165,7 @@
<tag-selector ng-if="endpoint" value="endpoint.TagIds" allow-create="state.allowCreate" on-change="(onChangeTags)"></tag-selector>
<!-- endpoint-security -->
<div ng-if="endpointType === 'remote' && !state.azureEndpoint && !state.kubernetesEndpoint && !state.edgeEndpoint && endpoint.Type !== 6">
<div ng-if="showSecurity">
<div class="col-sm-12 form-section-title"> Security </div>
<por-endpoint-security form-data="formValues.SecurityFormData" endpoint="endpoint"></por-endpoint-security>
</div>

46
app/portainer/views/endpoints/edit/endpointController.js
View file

@ -14,21 +14,7 @@ import { GpusListAngular } from '@/react/portainer/environments/wizard/Environme
angular.module('portainer.app').component('gpusList', GpusListAngular).controller('EndpointController', EndpointController);
/* @ngInject */
function EndpointController(
$async,
$scope,
$state,
$transition$,
$filter,
clipboard,
EndpointService,
GroupService,
Notifications,
Authentication,
SettingsService,
ModalService
) {
function EndpointController($async, $scope, $state, $transition$, $filter, clipboard, EndpointService, GroupService, Notifications, Authentication, SettingsService, ModalService) {
$scope.onChangeCheckInInterval = onChangeCheckInInterval;
$scope.setFieldValue = setFieldValue;
$scope.onChangeTags = onChangeTags;
@ -107,12 +93,6 @@ function EndpointController(
$('#copyNotificationEdgeKey').show().fadeOut(2500);
};
$scope.onToggleAllowSelfSignedCerts = function onToggleAllowSelfSignedCerts(checked) {
return $scope.$evalAsync(() => {
$scope.state.allowSelfSignedCerts = checked;
});
};
$scope.onDisassociateEndpoint = async function () {
ModalService.confirmDisassociate((confirmed) => {
if (confirmed) {
@ -186,10 +166,6 @@ function EndpointController(
$scope.updateEndpoint = async function () {
var endpoint = $scope.endpoint;
var securityData = $scope.formValues.SecurityFormData;
var TLS = securityData.TLS;
var TLSMode = securityData.TLSMode;
var TLSSkipVerify = TLS && (TLSMode === 'tls_client_noca' || TLSMode === 'tls_only');
var TLSSkipClientVerify = TLS && (TLSMode === 'tls_ca' || TLSMode === 'tls_only');
if (isEdgeEnvironment(endpoint.Type) && _.difference($scope.initialTagIds, endpoint.TagIds).length > 0) {
let confirmed = await confirmDestructiveAsync({
@ -219,18 +195,22 @@ function EndpointController(
Gpus: endpoint.Gpus,
GroupID: endpoint.GroupId,
TagIds: endpoint.TagIds,
TLS: TLS,
TLSSkipVerify: TLSSkipVerify,
TLSSkipClientVerify: TLSSkipClientVerify,
TLSCACert: TLSSkipVerify || securityData.TLSCACert === endpoint.TLSConfig.TLSCACert ? null : securityData.TLSCACert,
TLSCert: TLSSkipClientVerify || securityData.TLSCert === endpoint.TLSConfig.TLSCert ? null : securityData.TLSCert,
TLSKey: TLSSkipClientVerify || securityData.TLSKey === endpoint.TLSConfig.TLSKey ? null : securityData.TLSKey,
TLS: securityData.TLS,
TLSSkipVerify: securityData.TLSSkipVerify,
TLSSkipClientVerify: securityData.TLSSkipVerify,
TLSCACert: securityData.TLSSkipVerify ? null : securityData.TLSCACert,
TLSCert: securityData.TLSSkipVerify ? null : securityData.TLSCert,
TLSKey: securityData.TLSSkipVerify ? null : securityData.TLSKey,
AzureApplicationID: endpoint.AzureCredentials.ApplicationID,
AzureTenantID: endpoint.AzureCredentials.TenantID,
AzureAuthenticationKey: endpoint.AzureCredentials.AuthenticationKey,
EdgeCheckinInterval: endpoint.EdgeCheckinInterval,
};
if (!$scope.showSecurity) {
delete payload.TLS;
}
if (
$scope.endpointType !== 'local' &&
endpoint.Type !== PortainerEndpointTypes.AzureEnvironment &&
@ -328,6 +308,10 @@ function EndpointController(
$scope.initialTagIds = endpoint.TagIds.slice();
$scope.groups = groups;
if (endpoint.Type === PortainerEndpointTypes.DockerEnvironment) {
$scope.showSecurity = true;
}
configureState();
if (EndpointHelper.isDockerEndpoint(endpoint) && $scope.state.edgeAssociated) {