Obscure sensitive Traffic Portal form fields

CHANGELOG.md

@@ -4,6 +4,8 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](http://keepachangelog.com/en/1.0.0/).
 
 ## [unreleased]
+### Changed
+- Traffic Portal now obscures sensitive text in Delivery Service "Raw Remap" fields, private SSL keys, "Header Rewrite" rules, and ILO interface passwords by default.
 
 ## [7.0.0] - 2022-07-19
 ### Added
@@ -13,7 +15,7 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/en/1.0.0/).
 - Added a new Traffic Ops endpoint to `GET` capacity and telemetry data for CDNi integration.
 - Added SOA (Service Oriented Architecture) capability to CDN-In-A-Box.
 - Added a Traffic Ops endpoints to `PUT` a requested configuration change for a full configuration or per host and an endpoint to approve or deny the request.
-- Traffic Monitor config option `distributed_polling` which enables the ability for Traffic Monitor to poll a subset of the CDN and divide into "local peer groups" and "distributed peer groups". Traffic Monitors in the same group are local peers, while Traffic Monitors in other groups are distibuted peers. Each TM group polls the same set of cachegroups and gets availability data for the other cachegroups from other TM groups. This allows each TM to be responsible for polling a subset of the CDN while still having a full view of CDN availability. In order to use this, `stat_polling` must be disabled.
+- Traffic Monitor config option `distributed_polling` which enables the ability for Traffic Monitor to poll a subset of the CDN and divide into "local peer groups" and "distributed peer groups". Traffic Monitors in the same group are local peers, while Traffic Monitors in other groups are distributed peers. Each TM group polls the same set of cachegroups and gets availability data for the other cachegroups from other TM groups. This allows each TM to be responsible for polling a subset of the CDN while still having a full view of CDN availability. In order to use this, `stat_polling` must be disabled.
 - Added support for a new Traffic Ops GLOBAL profile parameter -- `tm_query_status_override` -- to override which status of Traffic Monitors to query (default: ONLINE).
 - Traffic Ops: added new `cdn.conf` option -- `user_cache_refresh_interval_sec` -- which enables an in-memory users cache to improve performance. Default: 0 (disabled).
 - Traffic Ops: added new `cdn.conf` option -- `server_update_status_cache_refresh_interval_sec` -- which enables an in-memory server update status cache to improve performance. Default: 0 (disabled).

experimental/traffic-portal/.eslintrc.json

@@ -233,7 +233,7 @@
 						},
 						"checkConstructors": false,
 						"checkGetters": true,
-						"checkSetters": true,
+						"checkSetters": false,
 						"enableFixer": false
 					}
 				],

experimental/traffic-portal/nightwatch/page_objects/login.ts

@@ -64,13 +64,13 @@ const loginPageObject = {
 					selector: "button[name='login']"
 				},
 				passwordTxt: {
-					selector: "input#p"
+					selector: "input[name='p']"
 				},
 				resetBtn: {
 					selector: "button[name='reset']"
 				},
 				usernameTxt: {
-					selector: "input#u"
+					selector: "input[name='u']"
 				}
 			},
 			selector: "form[name='login']"

experimental/traffic-portal/src/app/core/servers/server-details/server-details.component.html

@@ -166,7 +166,7 @@
 					</mat-form-field>
 					<mat-form-field>
 						<mat-label><abbr title="Integrated Lights-Out Management">ILO</abbr> Password</mat-label>
-						<input matInput name="iloPassword" [(ngModel)]="server.iloPassword"/>
+						<tp-obscured-text-input name="iloPassword" [(value)]="server.iloPassword"></tp-obscured-text-input>
 					</mat-form-field>
 				</div>
 			</fieldset>

experimental/traffic-portal/src/app/core/servers/server-details/server-details.component.spec.ts

@@ -27,6 +27,7 @@ import { ServerService } from "src/app/api";
 import { APITestingModule } from "src/app/api/testing";
 import { defaultServer } from "src/app/models";
 import { CurrentUserService } from "src/app/shared/currentUser/current-user.service";
+import { SharedModule } from "src/app/shared/shared.module";
 
 import { ServerDetailsComponent } from "./server-details.component";
 
@@ -51,7 +52,8 @@ describe("ServerDetailsComponent", () => {
 				MatFormFieldModule,
 				MatInputModule,
 				BrowserAnimationsModule,
-				APITestingModule
+				APITestingModule,
+				SharedModule
 			],
 			providers: [
 				{provide: CurrentUserService, useValue: mockCurrentUserService},

experimental/traffic-portal/src/app/login/login.component.html

@@ -20,14 +20,11 @@ <h1>Traffic Portal</h1>
 		<form name="login" (ngSubmit)="submitLogin()" ngNativeValidate>
 			<mat-form-field appearance="fill">
 				<mat-label>Username</mat-label>
-				<input matInput required autofocus type="text" [formControl]="u" id="u"/>
+				<input matInput required autofocus type="text" [(ngModel)]="u" name="u"/>
 			</mat-form-field>
 			<mat-form-field appearance="fill">
 				<mat-label>Password</mat-label>
-				<input matInput required [type]="hide ? 'password' : 'text'" [formControl]="p" id="p"/>
-				<button mat-icon-button type="button" matSuffix (click)="hide = !hide">
-					<mat-icon>{{hide ? "visibility_off" : "visibility"}}</mat-icon>
-				</button>
+				<tp-obscured-text-input [autocomplete]="passwordAutocomplete" required="true" [(value)]="p" name="p"></tp-obscured-text-input>
 			</mat-form-field>
 			<div>
 				<button name="login" mat-raised-button color="primary">Login</button>

experimental/traffic-portal/src/app/login/login.component.spec.ts

@@ -89,17 +89,17 @@ describe("LoginComponent", () => {
 		}
 	});
 
-	it("submits a login request", () => {
+	it("submits a login request", async () => {
 		expect(mockCurrentUserService.login).not.toHaveBeenCalled();
+		await expectAsync(component.submitLogin()).toBeRejected();
+		expect(mockCurrentUserService.login).not.toHaveBeenCalled();
+		component.u = "test-admin";
+		component.p = "twelve12!";
 		component.submitLogin();
 		expect(mockCurrentUserService.login).toHaveBeenCalled();
-		component.u.setValue("test-admin");
-		component.p.setValue("twelve12!");
+		component.u = "server error";
 		component.submitLogin();
 		expect(mockCurrentUserService.login).toHaveBeenCalledTimes(2);
-		component.u.setValue("server error");
-		component.submitLogin();
-		expect(mockCurrentUserService.login).toHaveBeenCalledTimes(3);
 	});
 
 	it("opens the password reset dialog", () => {

experimental/traffic-portal/src/app/login/login.component.ts

@@ -12,13 +12,14 @@
 * limitations under the License.
 */
 import { Component, OnInit } from "@angular/core";
-import { UntypedFormControl } from "@angular/forms";
 import { MatDialog } from "@angular/material/dialog";
 import { Router, ActivatedRoute } from "@angular/router";
 
 import { CurrentUserService } from "src/app/shared/currentUser/current-user.service";
 import {TpHeaderService} from "src/app/shared/tp-header/tp-header.service";
 
+import { AutocompleteValue } from "../utils";
+
 import { ResetPasswordDialogComponent } from "./reset-password-dialog/reset-password-dialog.component";
 
 /**
@@ -36,10 +37,13 @@ export class LoginComponent implements OnInit {
 	/** Controls if the password is shown in plain text */
 	public hide = true;
 
+	/** The password field's autocomplete value. */
+	public readonly passwordAutocomplete = AutocompleteValue.CURRENT_PASSWORD;
+
 	/** The user-entered username. */
-	public u = new UntypedFormControl("");
+	public u = "";
 	/** The user-entered password. */
-	public p = new UntypedFormControl("");
+	public p: string | null = "";
 
 	constructor(
 		private readonly route: ActivatedRoute,
@@ -74,22 +78,25 @@ export class LoginComponent implements OnInit {
 	}
 
 	/**
-	 * Handles submission of the Login form, and redirects the user back to their requested page
-	 * should it be succesful. If the user had not yet requested a page, they will be redirected to
-	 * `/`
+	 * Handles submission of the Login form, and redirects the user back to
+	 * their requested page should it be successful. If the user had not yet
+	 * requested a page, they will be redirected to `/`
 	 */
-	public submitLogin(): void {
-		this.auth.login(this.u.value, this.p.value).then(
-			response => {
-				if (response) {
-					this.headerSvc.headerHidden.next(false);
-					this.router.navigate([this.returnURL]);
-				}
-			},
-			err => {
-				console.error("login failed:", err);
+	public async submitLogin(): Promise<void> {
+		if (!this.p) {
+			// This shouldn't really be possible, since the value will only be
+			// `null` if the control is invalid.
+			throw new Error("password is required");
+		}
+		try {
+			const response = await this.auth.login(this.u, this.p);
+			if (response) {
+				this.headerSvc.headerHidden.next(false);
+				this.router.navigate([this.returnURL]);
 			}
-		);
+		} catch (err) {
+			console.error("login failed:", err);
+		}
 	}
 
 	/** Opens the "reset password" dialog. */

experimental/traffic-portal/src/app/shared/obscured-text-input/obscured-text-input.component.html

@@ -0,0 +1,31 @@
+<!--
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+-->
+<div class="mat-select-trigger" (focusin)="focus()" (focusout)="blur($event)">
+<input
+	matInput
+	[type]="type"
+	[formControl]="control"
+	[placeholder]="placeholder"
+	[required]="required"
+	[disabled]="disabled"
+	[attr.aria-describedby]="describedBy"
+	[attr.aria-labelledby]="parentFormField?.getLabelId()"
+	[name]="name"
+	(change)="onChange($event)"
+	[attr.autocomplete]="autocomplete"
+/>
+<button type="button" mat-icon-button (click)="toggle()">
+	<mat-icon>{{ type === "password" ? "visibility" : "visibility_off"}}</mat-icon>
+</button>
+</div>

experimental/traffic-portal/src/app/shared/obscured-text-input/obscured-text-input.component.scss

@@ -0,0 +1,28 @@
+/*
+* Licensed under the Apache License, Version 2.0 (the "License");
+* you may not use this file except in compliance with the License.
+* You may obtain a copy of the License at
+*
+*     http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing, software
+* distributed under the License is distributed on an "AS IS" BASIS,
+* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+* See the License for the specific language governing permissions and
+* limitations under the License.
+*/
+div {
+	display: inline-flex;
+	width: 100%;
+	align-items: center;
+
+	button {
+		margin-bottom: 1em;
+		flex: 0;
+		min-width: 40px;
+	}
+
+	input {
+		flex: 1;
+	}
+}