// Copyright 2015 The Chromium Authors
// Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file.
/* eslint-disable @devtools/no-imperative-dom-api */
import * as Common from '../../core/common/common.js';
import * as Host from '../../core/host/host.js';
import * as i18n from '../../core/i18n/i18n.js';
import type * as Platform from '../../core/platform/platform.js';
import * as SDK from '../../core/sdk/sdk.js';
import * as Protocol from '../../generated/protocol.js';
import * as NetworkForward from '../../panels/network/forward/forward.js';
import {createIcon, type Icon} from '../../ui/kit/kit.js';
import * as UI from '../../ui/legacy/legacy.js';
import {html, render} from '../../ui/lit/lit.js';
import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
import lockIconStyles from './lockIcon.css.js';
import mainViewStyles from './mainView.css.js';
import {ShowOriginEvent} from './OriginTreeElement.js';
import originViewStyles from './originView.css.js';
import {
Events,
type PageVisibleSecurityState,
SecurityModel,
securityStateCompare,
SecurityStyleExplanation,
SummaryMessages,
} from './SecurityModel.js';
import {SecurityPanelSidebar} from './SecurityPanelSidebar.js';
const {widget, widgetRef} = UI.Widget;
const UIStrings = {
/**
* @description Summary div text content in Security Panel of the Security panel
*/
securityOverview: 'Security overview',
/**
* @description Text to show something is secure
*/
secure: 'Secure',
/**
* @description Sdk console message message level info of level Labels in Console View of the Console panel
*/
info: 'Info',
/**
* @description Not secure div text content in Security Panel of the Security panel
*/
notSecure: 'Not secure',
/**
* @description Text to view a security certificate
*/
viewCertificate: 'View certificate',
/**
* @description Text in Security Panel of the Security panel
*/
notSecureBroken: 'Not secure (broken)',
/**
* @description Main summary for page when it has been deemed unsafe by the SafeBrowsing service.
*/
thisPageIsDangerousFlaggedBy: 'This page is dangerous (flagged by Google Safe Browsing).',
/**
* @description Summary phrase for a security problem where the site is deemed unsafe by the SafeBrowsing service.
*/
flaggedByGoogleSafeBrowsing: 'Flagged by Google Safe Browsing',
/**
* @description Description of a security problem where the site is deemed unsafe by the SafeBrowsing service.
*/
toCheckThisPagesStatusVisit: 'To check this page\'s status, visit g.co/safebrowsingstatus.',
/**
* @description Main summary for a non cert error page.
*/
thisIsAnErrorPage: 'This is an error page.',
/**
* @description Main summary for where the site is non-secure HTTP.
*/
thisPageIsInsecureUnencrypted: 'This page is insecure (unencrypted HTTP).',
/**
* @description Main summary for where the site has a non-cryptographic secure origin.
*/
thisPageHasANonhttpsSecureOrigin: 'This page has a non-HTTPS secure origin.',
/**
* @description Message to display in devtools security tab when the page you are on triggered a safety tip.
*/
thisPageIsSuspicious: 'This page is suspicious',
/**
* @description Body of message to display in devtools security tab when you are viewing a page that triggered a safety tip.
*/
chromeHasDeterminedThatThisSiteS: 'Chrome has determined that this site could be fake or fraudulent.',
/**
* @description Second part of the body of message to display in devtools security tab when you are viewing a page that triggered a safety tip.
*/
ifYouBelieveThisIsShownIn:
'If you believe this is shown in error please visit https://g.co/chrome/lookalike-warnings.',
/**
* @description Summary of a warning when the user visits a page that triggered a Safety Tip because the domain looked like another domain.
*/
possibleSpoofingUrl: 'Possible spoofing URL',
/**
* @description Body of a warning when the user visits a page that triggered a Safety Tip because the domain looked like another domain.
* @example {wikipedia.org} PH1
*/
thisSitesHostnameLooksSimilarToP:
'This site\'s hostname looks similar to {PH1}. Attackers sometimes mimic sites by making small, hard-to-see changes to the domain name.',
/**
* @description second part of body of a warning when the user visits a page that triggered a Safety Tip because the domain looked like another domain.
*/
ifYouBelieveThisIsShownInErrorSafety:
'If you believe this is shown in error please visit https://g.co/chrome/lookalike-warnings.',
/**
* @description Title of the devtools security tab when the page you are on triggered a safety tip.
*/
thisPageIsSuspiciousFlaggedBy: 'This page is suspicious (flagged by Chrome).',
/**
* @description Text for a security certificate
*/
certificate: 'Certificate',
/**
* @description Summary phrase for a security problem where the site's certificate chain contains a SHA1 signature.
*/
insecureSha: 'insecure (SHA-1)',
/**
* @description Description of a security problem where the site's certificate chain contains a SHA1 signature.
*/
theCertificateChainForThisSite: 'The certificate chain for this site contains a certificate signed using SHA-1.',
/**
* @description Summary phrase for a security problem where the site's certificate is missing a subjectAltName extension.
*/
subjectAlternativeNameMissing: '`Subject Alternative Name` missing',
/**
* @description Description of a security problem where the site's certificate is missing a subjectAltName extension.
*/
theCertificateForThisSiteDoesNot:
'The certificate for this site does not contain a `Subject Alternative Name` extension containing a domain name or IP address.',
/**
* @description Summary phrase for a security problem with the site's certificate.
*/
missing: 'missing',
/**
* @description Description of a security problem with the site's certificate.
* @example {net::ERR_CERT_AUTHORITY_INVALID} PH1
*/
thisSiteIsMissingAValidTrusted: 'This site is missing a valid, trusted certificate ({PH1}).',
/**
* @description Summary phrase for a site that has a valid server certificate.
*/
validAndTrusted: 'valid and trusted',
/**
* @description Description of a site that has a valid server certificate.
* @example {Let's Encrypt Authority X3} PH1
*/
theConnectionToThisSiteIsUsingA:
'The connection to this site is using a valid, trusted server certificate issued by {PH1}.',
/**
* @description Summary phrase for a security state where Private Key Pinning is ignored because the certificate chains to a locally-trusted root.
*/
publickeypinningBypassed: 'Public-Key-Pinning bypassed',
/**
* @description Description of a security state where Private Key Pinning is ignored because the certificate chains to a locally-trusted root.
*/
publickeypinningWasBypassedByA: 'Public-Key-Pinning was bypassed by a local root certificate.',
/**
* @description Summary phrase for a site with a certificate that is expiring soon.
*/
certificateExpiresSoon: 'Certificate expires soon',
/**
* @description Description for a site with a certificate that is expiring soon.
*/
theCertificateForThisSiteExpires:
'The certificate for this site expires in less than 48 hours and needs to be renewed.',
/**
* @description Text that refers to the network connection
*/
connection: 'Connection',
/**
* @description Summary phrase for a site that uses a modern, secure TLS protocol and cipher.
*/
secureConnectionSettings: 'secure connection settings',
/**
* @description Description of a site's TLS settings.
* @example {TLS 1.2} PH1
* @example {ECDHE_RSA} PH2
* @example {AES_128_GCM} PH3
*/
theConnectionToThisSiteIs:
'The connection to this site is encrypted and authenticated using {PH1}, {PH2}, and {PH3}.',
/**
* @description A recommendation to the site owner to use a modern TLS protocol
* @example {TLS 1.0} PH1
*/
sIsObsoleteEnableTlsOrLater: '{PH1} is obsolete. Enable TLS 1.2 or later.',
/**
* @description A recommendation to the site owner to use a modern TLS key exchange
*/
rsaKeyExchangeIsObsoleteEnableAn: 'RSA key exchange is obsolete. Enable an ECDHE-based cipher suite.',
/**
* @description A recommendation to the site owner to use a modern TLS cipher
* @example {3DES_EDE_CBC} PH1
*/
sIsObsoleteEnableAnAesgcmbased: '{PH1} is obsolete. Enable an AES-GCM-based cipher suite.',
/**
* @description A recommendation to the site owner to use a modern TLS server signature
*/
theServerSignatureUsesShaWhichIs:
'The server signature uses SHA-1, which is obsolete. Enable a SHA-2 signature algorithm instead. (Note this is different from the signature in the certificate.)',
/**
* @description Summary phrase for a site that uses an outdated SSL settings (protocol, key exchange, or cipher).
*/
obsoleteConnectionSettings: 'obsolete connection settings',
/**
* @description A title of the 'Resources' action category
*/
resources: 'Resources',
/**
* @description Summary for page when there is active mixed content
*/
activeMixedContent: 'active mixed content',
/**
* @description Description for page when there is active mixed content
*/
youHaveRecentlyAllowedNonsecure:
'You have recently allowed non-secure content (such as scripts or iframes) to run on this site.',
/**
* @description Summary for page when there is mixed content
*/
mixedContent: 'mixed content',
/**
* @description Description for page when there is mixed content
*/
thisPageIncludesHttpResources: 'This page includes HTTP resources.',
/**
* @description Summary for page when there is a non-secure form
*/
nonsecureForm: 'non-secure form',
/**
* @description Description for page when there is a non-secure form
*/
thisPageIncludesAFormWithA: 'This page includes a form with a non-secure "action" attribute.',
/**
* @description Summary for the page when it contains active content with certificate error
*/
activeContentWithCertificate: 'active content with certificate errors',
/**
* @description Description for the page when it contains active content with certificate error
*/
youHaveRecentlyAllowedContent:
'You have recently allowed content loaded with certificate errors (such as scripts or iframes) to run on this site.',
/**
* @description Summary for page when there is active content with certificate errors
*/
contentWithCertificateErrors: 'content with certificate errors',
/**
* @description Description for page when there is content with certificate errors
*/
thisPageIncludesResourcesThat: 'This page includes resources that were loaded with certificate errors.',
/**
* @description Summary for page when all resources are served securely
*/
allServedSecurely: 'all served securely',
/**
* @description Description for page when all resources are served securely
*/
allResourcesOnThisPageAreServed: 'All resources on this page are served securely.',
/**
* @description Text in Security Panel of the Security panel
*/
blockedMixedContent: 'Blocked mixed content',
/**
* @description Text in Security Panel of the Security panel
*/
yourPageRequestedNonsecure: 'Your page requested non-secure resources that were blocked.',
/**
* @description Refresh prompt text content in Security Panel of the Security panel
*/
reloadThePageToRecordRequestsFor: 'Reload the page to record requests for HTTP resources.',
/**
* @description Link text in the Security Panel. Clicking the link navigates the user to the
* Network panel. Requests refers to network requests. Each request is a piece of data transmitted
* from the current user's browser to a remote server.
*/
viewDRequestsInNetworkPanel:
'{n, plural, =1 {View # request in Network Panel} other {View # requests in Network Panel}}',
/**
* @description Text for the origin of something
*/
origin: 'Origin',
/**
* @description Text in Security Panel of the Security panel
*/
viewRequestsInNetworkPanel: 'View requests in Network Panel',
/**
* @description Text for security or network protocol
*/
protocol: 'Protocol',
/**
* @description Text in the Security panel that refers to how the TLS handshake
*established encryption keys.
*/
keyExchange: 'Key exchange',
/**
* @description Text in Security Panel that refers to how the TLS handshake
*encrypted data.
*/
cipher: 'Cipher',
/**
* @description Text in Security Panel that refers to the signature algorithm
*used by the server for authenticate in the TLS handshake.
*/
serverSignature: 'Server signature',
/**
* @description Text in Security Panel that refers to whether the ClientHello
*message in the TLS handshake was encrypted.
*/
encryptedClientHello: 'Encrypted ClientHello',
/**
* @description Sct div text content in Security Panel of the Security panel
*/
certificateTransparency: 'Certificate Transparency',
/**
* @description Text that refers to the subject of a security certificate
*/
subject: 'Subject',
/**
* @description Text to show since when an item is valid
*/
validFrom: 'Valid from',
/**
* @description Text to indicate the expiry date
*/
validUntil: 'Valid until',
/**
* @description Text for the issuer of an item
*/
issuer: 'Issuer',
/**
* @description Text in Security Panel of the Security panel
*/
openFullCertificateDetails: 'Open full certificate details',
/**
* @description Text in Security Panel of the Security panel
*/
sct: 'SCT',
/**
* @description Text in Security Panel of the Security panel
*/
logName: 'Log name',
/**
* @description Text in Security Panel of the Security panel
*/
logId: 'Log ID',
/**
* @description Text in Security Panel of the Security panel
*/
validationStatus: 'Validation status',
/**
* @description Text for the source of something
*/
source: 'Source',
/**
* @description Label for a date/time string in the Security panel. It indicates the time at which
* a security certificate was issued (created by an authority and distributed).
*/
issuedAt: 'Issued at',
/**
* @description Text in Security Panel of the Security panel
*/
hashAlgorithm: 'Hash algorithm',
/**
* @description Text in Security Panel of the Security panel
*/
signatureAlgorithm: 'Signature algorithm',
/**
* @description Text in Security Panel of the Security panel
*/
signatureData: 'Signature data',
/**
* @description Toggle scts details link text content in Security Panel of the Security panel
*/
showFullDetails: 'Show full details',
/**
* @description Toggle scts details link text content in Security Panel of the Security panel
*/
hideFullDetails: 'Hide full details',
/**
* @description Text in Security Panel of the Security panel
*/
thisRequestCompliesWithChromes: 'This request complies with `Chrome`\'s Certificate Transparency policy.',
/**
* @description Text in Security Panel of the Security panel
*/
thisRequestDoesNotComplyWith: 'This request does not comply with `Chrome`\'s Certificate Transparency policy.',
/**
* @description Text in Security Panel of the Security panel
*/
thisResponseWasLoadedFromCache: 'This response was loaded from cache. Some security details might be missing.',
/**
* @description Text in Security Panel of the Security panel
*/
theSecurityDetailsAboveAreFrom: 'The security details above are from the first inspected response.',
/**
* @description Main summary for where the site has a non-cryptographic secure origin.
*/
thisOriginIsANonhttpsSecure: 'This origin is a non-HTTPS secure origin.',
/**
* @description Text in Security Panel of the Security panel
*/
yourConnectionToThisOriginIsNot: 'Your connection to this origin is not secure.',
/**
* @description No info div text content in Security Panel of the Security panel
*/
noSecurityInformation: 'No security information',
/**
* @description Text in Security Panel of the Security panel
*/
noSecurityDetailsAreAvailableFor: 'No security details are available for this origin.',
/**
* @description San div text content in Security Panel of the Security panel
*/
na: '(n/a)',
/**
* @description Text to show less content
*/
showLess: 'Show less',
/**
* @description Truncated santoggle text content in Security Panel of the Security panel
* @example {2} PH1
*/
showMoreSTotal: 'Show more ({PH1} total)',
/**
* @description Shown when a field refers to an option that is unknown to the frontend.
*/
unknownField: 'unknown',
/**
* @description Shown when a field refers to a TLS feature which was enabled.
*/
enabled: 'enabled',
} as const;
const str_ = i18n.i18n.registerUIStrings('panels/security/SecurityPanel.ts', UIStrings);
const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
let securityPanelInstance: SecurityPanel;
// See https://www.iana.org/assignments/tls-parameters/tls-parameters.xhtml#tls-signaturescheme
// This contains signature schemes supported by Chrome.
const SignatureSchemeStrings = new Map([
// The full name for these schemes is RSASSA-PKCS1-v1_5, sometimes
// "PKCS#1 v1.5", but those are very long, so let "RSA" vs "RSA-PSS"
// disambiguate.
[0x0201, 'RSA with SHA-1'],
[0x0401, 'RSA with SHA-256'],
[0x0501, 'RSA with SHA-384'],
[0x0601, 'RSA with SHA-512'],
// We omit the curve from these names because in TLS 1.2 these code points
// were not specific to a curve. Saying "P-256" for a server that used a P-384
// key with SHA-256 in TLS 1.2 would be confusing.
[0x0403, 'ECDSA with SHA-256'],
[0x0503, 'ECDSA with SHA-384'],
[0x0804, 'RSA-PSS with SHA-256'],
[0x0805, 'RSA-PSS with SHA-384'],
[0x0806, 'RSA-PSS with SHA-512'],
]);
const LOCK_ICON_NAME = 'lock';
const WARNING_ICON_NAME = 'warning';
const UNKNOWN_ICON_NAME = 'indeterminate-question-box';
export function getSecurityStateIconForDetailedView(
securityState: Protocol.Security.SecurityState, className: string): Icon {
let iconName: string;
switch (securityState) {
case Protocol.Security.SecurityState.Neutral: // fallthrough
case Protocol.Security.SecurityState.Insecure: // fallthrough
case Protocol.Security.SecurityState.InsecureBroken:
iconName = WARNING_ICON_NAME;
break;
case Protocol.Security.SecurityState.Secure:
iconName = LOCK_ICON_NAME;
break;
case Protocol.Security.SecurityState.Info: // fallthrough
case Protocol.Security.SecurityState.Unknown:
iconName = UNKNOWN_ICON_NAME;
break;
}
return createIcon(iconName, className);
}
export function getSecurityStateIconForOverview(
securityState: Protocol.Security.SecurityState, className: string): Icon {
let iconName: string;
switch (securityState) {
case Protocol.Security.SecurityState.Unknown: // fallthrough
case Protocol.Security.SecurityState.Neutral:
iconName = UNKNOWN_ICON_NAME;
break;
case Protocol.Security.SecurityState.Insecure: // fallthrough
case Protocol.Security.SecurityState.InsecureBroken:
iconName = WARNING_ICON_NAME;
break;
case Protocol.Security.SecurityState.Secure:
iconName = LOCK_ICON_NAME;
break;
case Protocol.Security.SecurityState.Info:
throw new Error(`Unexpected security state ${securityState}`);
}
return createIcon(iconName, className);
}
export function createHighlightedUrl(url: Platform.DevToolsPath.UrlString, securityState: string): Element {
const schemeSeparator = '://';
const index = url.indexOf(schemeSeparator);
// If the separator is not found, just display the text without highlighting.
if (index === -1) {
const text = document.createElement('span');
text.textContent = url;
return text;
}
const highlightedUrl = document.createElement('span');
highlightedUrl.classList.add('highlighted-url');
const scheme = url.substr(0, index);
const content = url.substr(index + schemeSeparator.length);
highlightedUrl.createChild('span', 'url-scheme-' + securityState).textContent = scheme;
highlightedUrl.createChild('span', 'url-scheme-separator').textContent = schemeSeparator;
highlightedUrl.createChild('span').textContent = content;
return highlightedUrl;
}
export interface ViewInput {
panel: SecurityPanel;
}
export interface ViewOutput {
setVisibleView: (view: UI.Widget.VBox) => void;
splitWidget: UI.SplitWidget.SplitWidget;
mainView: SecurityMainView;
visibleView: UI.Widget.VBox|null;
sidebar: SecurityPanelSidebar;
}
export type View = (input: ViewInput, output: ViewOutput, target: HTMLElement) => void;
const DEFAULT_VIEW: View = (input: ViewInput, output: ViewOutput, target: HTMLElement): void => {
// clang-format off
render(html`
{output.splitWidget = e;})}>
{output.sidebar = e;})}>
`,
target);
// clang-format on
};
export class SecurityPanel extends UI.Panel.Panel implements SDK.TargetManager.SDKModelObserver {
readonly mainView: SecurityMainView;
readonly sidebar!: SecurityPanelSidebar;
private readonly lastResponseReceivedForLoaderId: Map;
private readonly origins: Map;
private readonly filterRequestCounts: Map;
visibleView: UI.Widget.VBox|null;
private eventListeners: Common.EventTarget.EventDescriptor[];
private securityModel: SecurityModel|null;
readonly splitWidget!: UI.SplitWidget.SplitWidget;
constructor(private view: View = DEFAULT_VIEW) {
super('security');
this.update();
this.sidebar.setMinimumSize(100, 25);
this.sidebar.element.classList.add('panel-sidebar');
this.sidebar.element.setAttribute('jslog', `${VisualLogging.pane('sidebar').track({resize: true})}`);
this.mainView = new SecurityMainView();
this.mainView.panel = this;
this.element.addEventListener(ShowOriginEvent.eventName, (event: ShowOriginEvent) => {
if (event.origin) {
this.showOrigin(event.origin);
} else {
this.setVisibleView(this.mainView);
}
});
this.lastResponseReceivedForLoaderId = new Map();
this.origins = new Map();
this.filterRequestCounts = new Map();
this.visibleView = null;
this.eventListeners = [];
this.securityModel = null;
SDK.TargetManager.TargetManager.instance().observeModels(SecurityModel, this, {scoped: true});
SDK.TargetManager.TargetManager.instance().addModelListener(
SDK.ResourceTreeModel.ResourceTreeModel, SDK.ResourceTreeModel.Events.PrimaryPageChanged,
this.onPrimaryPageChanged, this);
this.sidebar.showLastSelectedElement();
}
static instance(opts: {forceNew: boolean|null} = {forceNew: null}): SecurityPanel {
const {forceNew} = opts;
if (!securityPanelInstance || forceNew) {
securityPanelInstance = new SecurityPanel();
}
return securityPanelInstance;
}
static createCertificateViewerButtonForOrigin(text: string, origin: string): Element {
const certificateButton = UI.UIUtils.createTextButton(text, async (e: Event) => {
e.consume();
const names = await SDK.NetworkManager.MultitargetNetworkManager.instance().getCertificate(origin);
if (names.length > 0) {
Host.InspectorFrontendHost.InspectorFrontendHostInstance.showCertificateViewer(names);
}
}, {className: 'origin-button', jslogContext: 'security.view-certificate-for-origin', title: text});
UI.ARIAUtils.markAsButton(certificateButton);
return certificateButton;
}
static createCertificateViewerButtonForCert(text: string, names: string[]): Element {
const certificateButton = UI.UIUtils.createTextButton(text, e => {
e.consume();
Host.InspectorFrontendHost.InspectorFrontendHostInstance.showCertificateViewer(names);
}, {className: 'origin-button', jslogContext: 'security.view-certificate'});
UI.ARIAUtils.markAsButton(certificateButton);
return certificateButton;
}
update(): void {
this.view({panel: this}, this, this.contentElement);
}
private updateVisibleSecurityState(visibleSecurityState: PageVisibleSecurityState): void {
this.sidebar.securityOverviewElement.setSecurityState(visibleSecurityState.securityState);
this.mainView.updateVisibleSecurityState(visibleSecurityState);
}
private onVisibleSecurityStateChanged({data}: Common.EventTarget.EventTargetEvent): void {
this.updateVisibleSecurityState(data);
}
showOrigin(origin: Platform.DevToolsPath.UrlString): void {
const originState = this.origins.get(origin);
if (!originState) {
return;
}
if (!originState.originView) {
originState.originView = new SecurityOriginView(origin, originState);
}
this.setVisibleView(originState.originView);
}
override wasShown(): void {
super.wasShown();
if (!this.visibleView) {
this.sidebar.showLastSelectedElement();
}
}
override focus(): void {
this.sidebar.focus();
}
setVisibleView(view: UI.Widget.VBox): void {
if (this.visibleView === view) {
return;
}
if (this.visibleView) {
this.visibleView.detach();
}
this.visibleView = view;
if (view) {
this.splitWidget.setMainWidget(view);
}
}
private onResponseReceived(event: Common.EventTarget.EventTargetEvent):
void {
const request = event.data.request;
if (request.resourceType() === Common.ResourceType.resourceTypes.Document && request.loaderId) {
this.lastResponseReceivedForLoaderId.set(request.loaderId, request);
}
}
private processRequest(request: SDK.NetworkRequest.NetworkRequest): void {
const origin = Common.ParsedURL.ParsedURL.extractOrigin(request.url());
if (!origin) {
// We don't handle resources like data: URIs. Most of them don't affect the lock icon.
return;
}
let securityState = request.securityState();
if (request.mixedContentType === Protocol.Security.MixedContentType.Blockable ||
request.mixedContentType === Protocol.Security.MixedContentType.OptionallyBlockable) {
securityState = Protocol.Security.SecurityState.Insecure;
}
const originState = this.origins.get(origin);
if (originState) {
if (securityStateCompare(securityState, originState.securityState) < 0) {
originState.securityState = securityState;
const securityDetails = request.securityDetails();
if (securityDetails) {
originState.securityDetails = securityDetails;
}
this.sidebar.updateOrigin(origin, securityState);
if (originState.originView) {
originState.originView.setSecurityState(securityState);
}
}
} else {
// This stores the first security details we see for an origin, but we should
// eventually store a (deduplicated) list of all the different security
// details we have seen. https://crbug.com/503170
const newOriginState: OriginState = {
securityState,
securityDetails: request.securityDetails(),
loadedFromCache: request.cached(),
};
this.origins.set(origin, newOriginState);
this.sidebar.addOrigin(origin, securityState);
// Don't construct the origin view yet (let it happen lazily).
}
}
private onRequestFinished(event: Common.EventTarget.EventTargetEvent): void {
const request = event.data;
this.updateFilterRequestCounts(request);
this.processRequest(request);
}
private updateFilterRequestCounts(request: SDK.NetworkRequest.NetworkRequest): void {
if (request.mixedContentType === Protocol.Security.MixedContentType.None) {
return;
}
let filterKey: string = NetworkForward.UIFilter.MixedContentFilterValues.ALL;
if (request.wasBlocked()) {
filterKey = NetworkForward.UIFilter.MixedContentFilterValues.BLOCKED;
} else if (request.mixedContentType === Protocol.Security.MixedContentType.Blockable) {
filterKey = NetworkForward.UIFilter.MixedContentFilterValues.BLOCK_OVERRIDDEN;
} else if (request.mixedContentType === Protocol.Security.MixedContentType.OptionallyBlockable) {
filterKey = NetworkForward.UIFilter.MixedContentFilterValues.DISPLAYED;
}
const currentCount = this.filterRequestCounts.get(filterKey);
if (!currentCount) {
this.filterRequestCounts.set(filterKey, 1);
} else {
this.filterRequestCounts.set(filterKey, currentCount + 1);
}
this.mainView.refreshExplanations();
}
filterRequestCount(filterKey: string): number {
return this.filterRequestCounts.get(filterKey) || 0;
}
modelAdded(securityModel: SecurityModel): void {
if (securityModel.target() !== securityModel.target().outermostTarget()) {
return;
}
this.securityModel = securityModel;
const resourceTreeModel = securityModel.resourceTreeModel();
const networkManager = securityModel.networkManager();
if (this.eventListeners.length) {
Common.EventTarget.removeEventListeners(this.eventListeners);
}
this.eventListeners = [
securityModel.addEventListener(Events.VisibleSecurityStateChanged, this.onVisibleSecurityStateChanged, this),
resourceTreeModel.addEventListener(
SDK.ResourceTreeModel.Events.InterstitialShown, this.onInterstitialShown, this),
resourceTreeModel.addEventListener(
SDK.ResourceTreeModel.Events.InterstitialHidden, this.onInterstitialHidden, this),
networkManager.addEventListener(SDK.NetworkManager.Events.ResponseReceived, this.onResponseReceived, this),
networkManager.addEventListener(SDK.NetworkManager.Events.RequestFinished, this.onRequestFinished, this),
];
if (resourceTreeModel.isInterstitialShowing) {
this.onInterstitialShown();
}
}
modelRemoved(securityModel: SecurityModel): void {
if (this.securityModel !== securityModel) {
return;
}
this.securityModel = null;
Common.EventTarget.removeEventListeners(this.eventListeners);
}
private onPrimaryPageChanged(
event: Common.EventTarget.EventTargetEvent<
{frame: SDK.ResourceTreeModel.ResourceTreeFrame, type: SDK.ResourceTreeModel.PrimaryPageChangeType}>): void {
const {frame} = event.data;
const request = this.lastResponseReceivedForLoaderId.get(frame.loaderId);
this.sidebar.showLastSelectedElement();
this.sidebar.clearOrigins();
this.origins.clear();
this.lastResponseReceivedForLoaderId.clear();
this.filterRequestCounts.clear();
// After clearing the filtered request counts, refresh the
// explanations to reflect the new counts.
this.mainView.refreshExplanations();
// If we could not find a matching request (as in the case of clicking
// through an interstitial, see https://crbug.com/669309), set the origin
// based upon the url data from the PrimaryPageChanged event itself.
const origin = Common.ParsedURL.ParsedURL.extractOrigin(request ? request.url() : frame.url);
this.sidebar.setMainOrigin(origin);
if (request) {
this.processRequest(request);
}
}
private onInterstitialShown(): void {
// The panel might have been displaying the origin view on the
// previously loaded page. When showing an interstitial, switch
// back to the sidebar's last shown view.
this.sidebar.showLastSelectedElement();
this.sidebar.toggleOriginsList(true /* hidden */);
}
private onInterstitialHidden(): void {
this.sidebar.toggleOriginsList(false /* hidden */);
}
}
export enum OriginGroup {
/* eslint-disable @typescript-eslint/naming-convention -- Used by web_tests. */
MainOrigin = 'MainOrigin',
NonSecure = 'NonSecure',
Secure = 'Secure',
Unknown = 'Unknown',
/* eslint-enable @typescript-eslint/naming-convention */
}
export class SecurityMainView extends UI.Widget.VBox {
panel!: SecurityPanel;
private readonly summarySection: HTMLElement;
private readonly securityExplanationsMain: HTMLElement;
private readonly securityExplanationsExtra: HTMLElement;
private readonly lockSpectrum: Map;
private summaryText: HTMLElement;
private explanations: Array|null;
private securityState: Protocol.Security.SecurityState|null;
constructor(element?: HTMLElement) {
super(element, {jslog: `${VisualLogging.pane('security.main-view')}`});
this.registerRequiredCSS(lockIconStyles, mainViewStyles);
this.setMinimumSize(200, 100);
this.contentElement.classList.add('security-main-view');
this.summarySection = this.contentElement.createChild('div', 'security-summary');
// Info explanations should appear after all others.
this.securityExplanationsMain =
this.contentElement.createChild('div', 'security-explanation-list security-explanations-main');
this.securityExplanationsExtra =
this.contentElement.createChild('div', 'security-explanation-list security-explanations-extra');
// Fill the security summary section.
const summaryDiv = this.summarySection.createChild('div', 'security-summary-section-title');
summaryDiv.textContent = i18nString(UIStrings.securityOverview);
UI.ARIAUtils.markAsHeading(summaryDiv, 1);
const lockSpectrum = this.summarySection.createChild('div', 'lock-spectrum');
this.lockSpectrum = new Map([
[
Protocol.Security.SecurityState.Secure,
lockSpectrum.appendChild(
getSecurityStateIconForOverview(Protocol.Security.SecurityState.Secure, 'lock-icon lock-icon-secure')),
],
[
Protocol.Security.SecurityState.Neutral,
lockSpectrum.appendChild(
getSecurityStateIconForOverview(Protocol.Security.SecurityState.Neutral, 'lock-icon lock-icon-neutral')),
],
[
Protocol.Security.SecurityState.Insecure,
lockSpectrum.appendChild(
getSecurityStateIconForOverview(Protocol.Security.SecurityState.Insecure, 'lock-icon lock-icon-insecure')),
],
]);
UI.Tooltip.Tooltip.install(
this.getLockSpectrumDiv(Protocol.Security.SecurityState.Secure), i18nString(UIStrings.secure));
UI.Tooltip.Tooltip.install(
this.getLockSpectrumDiv(Protocol.Security.SecurityState.Neutral), i18nString(UIStrings.info));
UI.Tooltip.Tooltip.install(
this.getLockSpectrumDiv(Protocol.Security.SecurityState.Insecure), i18nString(UIStrings.notSecure));
this.summarySection.createChild('div', 'triangle-pointer-container')
.createChild('div', 'triangle-pointer-wrapper')
.createChild('div', 'triangle-pointer');
this.summaryText = this.summarySection.createChild('div', 'security-summary-text');
UI.ARIAUtils.markAsHeading(this.summaryText, 2);
this.explanations = null;
this.securityState = null;
}
getLockSpectrumDiv(securityState: Protocol.Security.SecurityState): HTMLElement {
const element = this.lockSpectrum.get(securityState);
if (!element) {
throw new Error(`Invalid argument: ${securityState}`);
}
return element;
}
private addExplanation(
parent: Element, explanation: Protocol.Security.SecurityStateExplanation|SecurityStyleExplanation): Element {
const explanationSection = parent.createChild('div', 'security-explanation');
explanationSection.classList.add('security-explanation-' + explanation.securityState);
const icon = getSecurityStateIconForDetailedView(
explanation.securityState, 'security-property security-property-' + explanation.securityState);
explanationSection.appendChild(icon);
const text = explanationSection.createChild('div', 'security-explanation-text');
const explanationHeader = text.createChild('div', 'security-explanation-title');
if (explanation.title) {
explanationHeader.createChild('span').textContent = explanation.title + ' - ';
explanationHeader.createChild('span', 'security-explanation-title-' + explanation.securityState).textContent =
explanation.summary;
} else {
explanationHeader.textContent = explanation.summary;
}
text.createChild('div').textContent = explanation.description;
if (explanation.certificate.length) {
text.appendChild(SecurityPanel.createCertificateViewerButtonForCert(
i18nString(UIStrings.viewCertificate), explanation.certificate));
}
if (explanation.recommendations?.length) {
const recommendationList = text.createChild('ul', 'security-explanation-recommendations');
for (const recommendation of explanation.recommendations) {
recommendationList.createChild('li').textContent = recommendation;
}
}
return text;
}
updateVisibleSecurityState(visibleSecurityState: PageVisibleSecurityState): void {
// Remove old state.
// It's safe to call this even when this.securityState is undefined.
this.summarySection.classList.remove('security-summary-' + this.securityState);
// Add new state.
this.securityState = visibleSecurityState.securityState;
this.summarySection.classList.add('security-summary-' + this.securityState);
// Update the color and title of the triangle icon in the lock spectrum to
// match the security state.
if (this.securityState === Protocol.Security.SecurityState.Insecure) {
this.getLockSpectrumDiv(Protocol.Security.SecurityState.Insecure).classList.add('lock-icon-insecure');
this.getLockSpectrumDiv(Protocol.Security.SecurityState.Insecure).classList.remove('lock-icon-insecure-broken');
UI.Tooltip.Tooltip.install(
this.getLockSpectrumDiv(Protocol.Security.SecurityState.Insecure), i18nString(UIStrings.notSecure));
} else if (this.securityState === Protocol.Security.SecurityState.InsecureBroken) {
this.getLockSpectrumDiv(Protocol.Security.SecurityState.Insecure).classList.add('lock-icon-insecure-broken');
this.getLockSpectrumDiv(Protocol.Security.SecurityState.Insecure).classList.remove('lock-icon-insecure');
UI.Tooltip.Tooltip.install(
this.getLockSpectrumDiv(Protocol.Security.SecurityState.Insecure), i18nString(UIStrings.notSecureBroken));
}
const {summary, explanations} = this.getSecuritySummaryAndExplanations(visibleSecurityState);
// Use override summary if present, otherwise use base explanation
this.summaryText.textContent = summary || SummaryMessages[this.securityState]();
this.explanations = this.orderExplanations(explanations);
this.refreshExplanations();
}
private getSecuritySummaryAndExplanations(visibleSecurityState: PageVisibleSecurityState):
{summary: (string|undefined), explanations: SecurityStyleExplanation[]} {
const {securityState, securityStateIssueIds} = visibleSecurityState;
let summary;
const explanations: SecurityStyleExplanation[] = [];
summary = this.explainSafetyTipSecurity(visibleSecurityState, summary, explanations);
if (securityStateIssueIds.includes('malicious-content')) {
summary = i18nString(UIStrings.thisPageIsDangerousFlaggedBy);
// Always insert SafeBrowsing explanation at the front.
explanations.unshift(new SecurityStyleExplanation(
Protocol.Security.SecurityState.Insecure, undefined, i18nString(UIStrings.flaggedByGoogleSafeBrowsing),
i18nString(UIStrings.toCheckThisPagesStatusVisit)));
} else if (
securityStateIssueIds.includes('is-error-page') &&
(visibleSecurityState.certificateSecurityState?.certificateNetworkError === null)) {
summary = i18nString(UIStrings.thisIsAnErrorPage);
// In the case of a non cert error page, we usually don't have a
// certificate, connection, or content that needs to be explained, e.g. in
// the case of a net error, so we can early return.
return {summary, explanations};
} else if (
securityState === Protocol.Security.SecurityState.InsecureBroken &&
securityStateIssueIds.includes('scheme-is-not-cryptographic')) {
summary = summary || i18nString(UIStrings.thisPageIsInsecureUnencrypted);
}
if (securityStateIssueIds.includes('scheme-is-not-cryptographic')) {
if (securityState === Protocol.Security.SecurityState.Neutral &&
!securityStateIssueIds.includes('insecure-origin')) {
summary = i18nString(UIStrings.thisPageHasANonhttpsSecureOrigin);
}
return {summary, explanations};
}
this.explainCertificateSecurity(visibleSecurityState, explanations);
this.explainConnectionSecurity(visibleSecurityState, explanations);
this.explainContentSecurity(visibleSecurityState, explanations);
return {summary, explanations};
}
private explainSafetyTipSecurity(
visibleSecurityState: PageVisibleSecurityState, summary: string|undefined,
explanations: SecurityStyleExplanation[]): string|undefined {
const {securityStateIssueIds, safetyTipInfo} = visibleSecurityState;
const currentExplanations = [];
if (securityStateIssueIds.includes('bad_reputation')) {
const formatedDescription = `${i18nString(UIStrings.chromeHasDeterminedThatThisSiteS)}\n\n${
i18nString(UIStrings.ifYouBelieveThisIsShownIn)}`;
currentExplanations.push({
summary: i18nString(UIStrings.thisPageIsSuspicious),
description: formatedDescription,
});
} else if (securityStateIssueIds.includes('lookalike') && safetyTipInfo?.safeUrl) {
const hostname = new URL(safetyTipInfo.safeUrl).hostname;
const hostnamePlaceholder = {PH1: hostname};
const formattedDescriptionSafety =
`${i18nString(UIStrings.thisSitesHostnameLooksSimilarToP, hostnamePlaceholder)}\n\n${
i18nString(UIStrings.ifYouBelieveThisIsShownInErrorSafety)}`;
currentExplanations.push(
{summary: i18nString(UIStrings.possibleSpoofingUrl), description: formattedDescriptionSafety});
}
if (currentExplanations.length > 0) {
// To avoid overwriting SafeBrowsing's title, set the main summary only if
// it's empty. The title set here can be overridden by later checks (e.g.
// bad HTTP).
summary = summary || i18nString(UIStrings.thisPageIsSuspiciousFlaggedBy);
explanations.push(new SecurityStyleExplanation(
Protocol.Security.SecurityState.Insecure, undefined, currentExplanations[0].summary,
currentExplanations[0].description));
}
return summary;
}
private explainCertificateSecurity(
visibleSecurityState: PageVisibleSecurityState, explanations: SecurityStyleExplanation[]): void {
const {certificateSecurityState, securityStateIssueIds} = visibleSecurityState;
const title = i18nString(UIStrings.certificate);
if (certificateSecurityState?.certificateHasSha1Signature) {
const explanationSummary = i18nString(UIStrings.insecureSha);
const description = i18nString(UIStrings.theCertificateChainForThisSite);
if (certificateSecurityState.certificateHasWeakSignature) {
explanations.push(new SecurityStyleExplanation(
Protocol.Security.SecurityState.Insecure, title, explanationSummary, description,
certificateSecurityState.certificate, Protocol.Security.MixedContentType.None));
} else {
explanations.push(new SecurityStyleExplanation(
Protocol.Security.SecurityState.Neutral, title, explanationSummary, description,
certificateSecurityState.certificate, Protocol.Security.MixedContentType.None));
}
}
if (certificateSecurityState && securityStateIssueIds.includes('cert-missing-subject-alt-name')) {
explanations.push(new SecurityStyleExplanation(
Protocol.Security.SecurityState.Insecure, title, i18nString(UIStrings.subjectAlternativeNameMissing),
i18nString(UIStrings.theCertificateForThisSiteDoesNot), certificateSecurityState.certificate,
Protocol.Security.MixedContentType.None));
}
if (certificateSecurityState && certificateSecurityState.certificateNetworkError !== null) {
explanations.push(new SecurityStyleExplanation(
Protocol.Security.SecurityState.Insecure, title, i18nString(UIStrings.missing),
i18nString(UIStrings.thisSiteIsMissingAValidTrusted, {PH1: certificateSecurityState.certificateNetworkError}),
certificateSecurityState.certificate, Protocol.Security.MixedContentType.None));
} else if (certificateSecurityState && !certificateSecurityState.certificateHasSha1Signature) {
explanations.push(new SecurityStyleExplanation(
Protocol.Security.SecurityState.Secure, title, i18nString(UIStrings.validAndTrusted),
i18nString(UIStrings.theConnectionToThisSiteIsUsingA, {PH1: certificateSecurityState.issuer}),
certificateSecurityState.certificate, Protocol.Security.MixedContentType.None));
}
if (securityStateIssueIds.includes('pkp-bypassed')) {
explanations.push(new SecurityStyleExplanation(
Protocol.Security.SecurityState.Info, title, i18nString(UIStrings.publickeypinningBypassed),
i18nString(UIStrings.publickeypinningWasBypassedByA)));
}
if (certificateSecurityState?.isCertificateExpiringSoon()) {
explanations.push(new SecurityStyleExplanation(
Protocol.Security.SecurityState.Info, undefined, i18nString(UIStrings.certificateExpiresSoon),
i18nString(UIStrings.theCertificateForThisSiteExpires)));
}
}
private explainConnectionSecurity(
visibleSecurityState: PageVisibleSecurityState, explanations: SecurityStyleExplanation[]): void {
const certificateSecurityState = visibleSecurityState.certificateSecurityState;
if (!certificateSecurityState) {
return;
}
const title = i18nString(UIStrings.connection);
if (certificateSecurityState.modernSSL) {
explanations.push(new SecurityStyleExplanation(
Protocol.Security.SecurityState.Secure, title, i18nString(UIStrings.secureConnectionSettings),
i18nString(UIStrings.theConnectionToThisSiteIs, {
PH1: certificateSecurityState.protocol,
PH2: certificateSecurityState.getKeyExchangeName(),
PH3: certificateSecurityState.getCipherFullName(),
})));
return;
}
const recommendations = [];
if (certificateSecurityState.obsoleteSslProtocol) {
recommendations.push(i18nString(UIStrings.sIsObsoleteEnableTlsOrLater, {PH1: certificateSecurityState.protocol}));
}
if (certificateSecurityState.obsoleteSslKeyExchange) {
recommendations.push(i18nString(UIStrings.rsaKeyExchangeIsObsoleteEnableAn));
}
if (certificateSecurityState.obsoleteSslCipher) {
recommendations.push(
i18nString(UIStrings.sIsObsoleteEnableAnAesgcmbased, {PH1: certificateSecurityState.cipher}));
}
if (certificateSecurityState.obsoleteSslSignature) {
recommendations.push(i18nString(UIStrings.theServerSignatureUsesShaWhichIs));
}
explanations.push(new SecurityStyleExplanation(
Protocol.Security.SecurityState.Info, title, i18nString(UIStrings.obsoleteConnectionSettings),
i18nString(UIStrings.theConnectionToThisSiteIs, {
PH1: certificateSecurityState.protocol,
PH2: certificateSecurityState.getKeyExchangeName(),
PH3: certificateSecurityState.getCipherFullName(),
}),
undefined, undefined, recommendations));
}
private explainContentSecurity(
visibleSecurityState: PageVisibleSecurityState, explanations: SecurityStyleExplanation[]): void {
// Add the secure explanation unless there is an issue.
let addSecureExplanation = true;
const title = i18nString(UIStrings.resources);
const securityStateIssueIds = visibleSecurityState.securityStateIssueIds;
if (securityStateIssueIds.includes('ran-mixed-content')) {
addSecureExplanation = false;
explanations.push(new SecurityStyleExplanation(
Protocol.Security.SecurityState.Insecure, title, i18nString(UIStrings.activeMixedContent),
i18nString(UIStrings.youHaveRecentlyAllowedNonsecure), [], Protocol.Security.MixedContentType.Blockable));
}
if (securityStateIssueIds.includes('displayed-mixed-content')) {
addSecureExplanation = false;
explanations.push(new SecurityStyleExplanation(
Protocol.Security.SecurityState.Neutral, title, i18nString(UIStrings.mixedContent),
i18nString(UIStrings.thisPageIncludesHttpResources), [],
Protocol.Security.MixedContentType.OptionallyBlockable));
}
if (securityStateIssueIds.includes('contained-mixed-form')) {
addSecureExplanation = false;
explanations.push(new SecurityStyleExplanation(
Protocol.Security.SecurityState.Neutral, title, i18nString(UIStrings.nonsecureForm),
i18nString(UIStrings.thisPageIncludesAFormWithA)));
}
if (visibleSecurityState.certificateSecurityState?.certificateNetworkError === null) {
if (securityStateIssueIds.includes('ran-content-with-cert-error')) {
addSecureExplanation = false;
explanations.push(new SecurityStyleExplanation(
Protocol.Security.SecurityState.Insecure, title, i18nString(UIStrings.activeContentWithCertificate),
i18nString(UIStrings.youHaveRecentlyAllowedContent)));
}
if (securityStateIssueIds.includes('displayed-content-with-cert-errors')) {
addSecureExplanation = false;
explanations.push(new SecurityStyleExplanation(
Protocol.Security.SecurityState.Neutral, title, i18nString(UIStrings.contentWithCertificateErrors),
i18nString(UIStrings.thisPageIncludesResourcesThat)));
}
}
if (addSecureExplanation) {
if (!securityStateIssueIds.includes('scheme-is-not-cryptographic')) {
explanations.push(new SecurityStyleExplanation(
Protocol.Security.SecurityState.Secure, title, i18nString(UIStrings.allServedSecurely),
i18nString(UIStrings.allResourcesOnThisPageAreServed)));
}
}
}
private orderExplanations(explanations: SecurityStyleExplanation[]): SecurityStyleExplanation[] {
if (explanations.length === 0) {
return explanations;
}
const securityStateOrder = [
Protocol.Security.SecurityState.Insecure,
Protocol.Security.SecurityState.Neutral,
Protocol.Security.SecurityState.Secure,
Protocol.Security.SecurityState.Info,
];
const orderedExplanations = [];
for (const securityState of securityStateOrder) {
orderedExplanations.push(...explanations.filter(explanation => explanation.securityState === securityState));
}
return orderedExplanations;
}
refreshExplanations(): void {
this.securityExplanationsMain.removeChildren();
this.securityExplanationsExtra.removeChildren();
if (!this.explanations) {
return;
}
for (const explanation of this.explanations) {
if (explanation.securityState === Protocol.Security.SecurityState.Info) {
this.addExplanation(this.securityExplanationsExtra, explanation);
} else {
switch (explanation.mixedContentType) {
case Protocol.Security.MixedContentType.Blockable:
this.addMixedContentExplanation(
this.securityExplanationsMain, explanation,
NetworkForward.UIFilter.MixedContentFilterValues.BLOCK_OVERRIDDEN);
break;
case Protocol.Security.MixedContentType.OptionallyBlockable:
this.addMixedContentExplanation(
this.securityExplanationsMain, explanation, NetworkForward.UIFilter.MixedContentFilterValues.DISPLAYED);
break;
default:
this.addExplanation(this.securityExplanationsMain, explanation);
break;
}
}
}
if (this.panel.filterRequestCount(NetworkForward.UIFilter.MixedContentFilterValues.BLOCKED) > 0) {
const explanation = {
securityState: Protocol.Security.SecurityState.Info,
summary: i18nString(UIStrings.blockedMixedContent),
description: i18nString(UIStrings.yourPageRequestedNonsecure),
mixedContentType: Protocol.Security.MixedContentType.Blockable,
certificate: [],
title: '',
} as Protocol.Security.SecurityStateExplanation;
this.addMixedContentExplanation(
this.securityExplanationsMain, explanation, NetworkForward.UIFilter.MixedContentFilterValues.BLOCKED);
}
}
private addMixedContentExplanation(
parent: Element, explanation: Protocol.Security.SecurityStateExplanation|SecurityStyleExplanation,
filterKey: string): void {
const element = this.addExplanation(parent, explanation);
const filterRequestCount = this.panel.filterRequestCount(filterKey);
if (!filterRequestCount) {
// Network instrumentation might not have been enabled for the page
// load, so the security panel does not necessarily know a count of
// individual mixed requests at this point. Prompt them to refresh
// instead of pointing them to the Network panel to get prompted
// to refresh.
const refreshPrompt = element.createChild('div', 'security-mixed-content');
refreshPrompt.textContent = i18nString(UIStrings.reloadThePageToRecordRequestsFor);
return;
}
const requestsAnchor = element.createChild('button', 'security-mixed-content devtools-link text-button link-style');
UI.ARIAUtils.markAsLink(requestsAnchor);
requestsAnchor.tabIndex = 0;
requestsAnchor.textContent = i18nString(UIStrings.viewDRequestsInNetworkPanel, {n: filterRequestCount});
requestsAnchor.addEventListener('click', this.showNetworkFilter.bind(this, filterKey));
}
showNetworkFilter(filterKey: string, e: Event): void {
e.consume();
void Common.Revealer.reveal(NetworkForward.UIFilter.UIRequestFilter.filters(
[{filterType: NetworkForward.UIFilter.FilterType.MixedContent, filterValue: filterKey}]));
}
}
export class SecurityOriginView extends UI.Widget.VBox {
private readonly originLockIcon: HTMLElement;
constructor(origin: Platform.DevToolsPath.UrlString, originState: OriginState) {
super({jslog: `${VisualLogging.pane('security.origin-view')}`});
this.registerRequiredCSS(originViewStyles, lockIconStyles);
this.setMinimumSize(200, 100);
this.element.classList.add('security-origin-view');
const titleSection = this.element.createChild('div', 'title-section');
const titleDiv = titleSection.createChild('div', 'title-section-header');
titleDiv.textContent = i18nString(UIStrings.origin);
UI.ARIAUtils.markAsHeading(titleDiv, 1);
const originDisplay = titleSection.createChild('div', 'origin-display');
this.originLockIcon = originDisplay.createChild('span');
const icon = getSecurityStateIconForDetailedView(
originState.securityState, `security-property security-property-${originState.securityState}`);
this.originLockIcon.appendChild(icon);
originDisplay.appendChild(createHighlightedUrl(origin, originState.securityState));
const originNetworkDiv = titleSection.createChild('div', 'view-network-button');
const originNetworkButton = UI.UIUtils.createTextButton(i18nString(UIStrings.viewRequestsInNetworkPanel), event => {
event.consume();
const parsedURL = new Common.ParsedURL.ParsedURL(origin);
void Common.Revealer.reveal(NetworkForward.UIFilter.UIRequestFilter.filters([
{filterType: NetworkForward.UIFilter.FilterType.Domain, filterValue: parsedURL.host},
{filterType: NetworkForward.UIFilter.FilterType.Scheme, filterValue: parsedURL.scheme},
]));
}, {jslogContext: 'reveal-in-network'});
originNetworkDiv.appendChild(originNetworkButton);
UI.ARIAUtils.markAsLink(originNetworkButton);
if (originState.securityDetails) {
const connectionSection = this.element.createChild('div', 'origin-view-section');
const connectionDiv = connectionSection.createChild('div', 'origin-view-section-title');
connectionDiv.textContent = i18nString(UIStrings.connection);
UI.ARIAUtils.markAsHeading(connectionDiv, 2);
let table: SecurityDetailsTable = new SecurityDetailsTable();
connectionSection.appendChild(table.element());
table.addRow(i18nString(UIStrings.protocol), originState.securityDetails.protocol);
// A TLS connection negotiates a cipher suite and, when doing an ephemeral
// ECDH key exchange, a "named group". In TLS 1.2, the cipher suite is
// named like TLS_ECDHE_RSA_WITH_AES_128_GCM_SHA256. The DevTools protocol
// tried to decompose this name and calls the "ECDHE_RSA" portion the
// "keyExchange", because it determined the rough shape of the key
// exchange portion of the handshake. (A keyExchange of "RSA" meant a very
// different handshake set.) But ECDHE_RSA was still parameterized by a
// named group (e.g. X25519), which the DevTools protocol exposes as
// "keyExchangeGroup".
//
// Then, starting TLS 1.3, the cipher suites are named like
// TLS_AES_128_GCM_SHA256. The handshake shape is implicit in the
// protocol. keyExchange is empty and we only have keyExchangeGroup.
//
// "Key exchange group" isn't common terminology and, in TLS 1.3,
// something like "X25519" is better labelled as "key exchange" than "key
// exchange group" anyway. So combine the two fields when displaying in
// the UI.
if (originState.securityDetails.keyExchange && originState.securityDetails.keyExchangeGroup) {
table.addRow(
i18nString(UIStrings.keyExchange),
originState.securityDetails.keyExchange + ' with ' + originState.securityDetails.keyExchangeGroup);
} else if (originState.securityDetails.keyExchange) {
table.addRow(i18nString(UIStrings.keyExchange), originState.securityDetails.keyExchange);
} else if (originState.securityDetails.keyExchangeGroup) {
table.addRow(i18nString(UIStrings.keyExchange), originState.securityDetails.keyExchangeGroup);
}
if (originState.securityDetails.serverSignatureAlgorithm) {
// See https://www.iana.org/assignments/tls-parameters/tls-parameters.xhtml#tls-signaturescheme
let sigString = SignatureSchemeStrings.get(originState.securityDetails.serverSignatureAlgorithm);
sigString ??=
i18nString(UIStrings.unknownField) + ' (' + originState.securityDetails.serverSignatureAlgorithm + ')';
table.addRow(i18nString(UIStrings.serverSignature), sigString);
}
table.addRow(
i18nString(UIStrings.cipher),
originState.securityDetails.cipher +
(originState.securityDetails.mac ? ' with ' + originState.securityDetails.mac : ''));
if (originState.securityDetails.encryptedClientHello) {
table.addRow(i18nString(UIStrings.encryptedClientHello), i18nString(UIStrings.enabled));
}
// Create the certificate section outside the callback, so that it appears in the right place.
const certificateSection = this.element.createChild('div', 'origin-view-section');
const certificateDiv = certificateSection.createChild('div', 'origin-view-section-title');
certificateDiv.textContent = i18nString(UIStrings.certificate);
UI.ARIAUtils.markAsHeading(certificateDiv, 2);
const sctListLength = originState.securityDetails.signedCertificateTimestampList.length;
const ctCompliance = originState.securityDetails.certificateTransparencyCompliance;
let sctSection;
if (sctListLength || ctCompliance !== Protocol.Network.CertificateTransparencyCompliance.Unknown) {
// Create the Certificate Transparency section outside the callback, so that it appears in the right place.
sctSection = this.element.createChild('div', 'origin-view-section');
const sctDiv = sctSection.createChild('div', 'origin-view-section-title');
sctDiv.textContent = i18nString(UIStrings.certificateTransparency);
UI.ARIAUtils.markAsHeading(sctDiv, 2);
}
const sanDiv = this.createSanDiv(originState.securityDetails.sanList);
const validFromString = new Date(1000 * originState.securityDetails.validFrom).toUTCString();
const validUntilString = new Date(1000 * originState.securityDetails.validTo).toUTCString();
table = new SecurityDetailsTable();
certificateSection.appendChild(table.element());
table.addRow(i18nString(UIStrings.subject), originState.securityDetails.subjectName);
table.addRow(i18n.i18n.lockedString('SAN'), sanDiv);
table.addRow(i18nString(UIStrings.validFrom), validFromString);
table.addRow(i18nString(UIStrings.validUntil), validUntilString);
table.addRow(i18nString(UIStrings.issuer), originState.securityDetails.issuer);
table.addRow(
'',
SecurityPanel.createCertificateViewerButtonForOrigin(
i18nString(UIStrings.openFullCertificateDetails), origin));
if (!sctSection) {
return;
}
// Show summary of SCT(s) of Certificate Transparency.
const sctSummaryTable = new SecurityDetailsTable();
sctSummaryTable.element().classList.add('sct-summary');
sctSection.appendChild(sctSummaryTable.element());
for (let i = 0; i < sctListLength; i++) {
const sct = originState.securityDetails.signedCertificateTimestampList[i];
sctSummaryTable.addRow(
i18nString(UIStrings.sct), sct.logDescription + ' (' + sct.origin + ', ' + sct.status + ')');
}
// Show detailed SCT(s) of Certificate Transparency.
const sctTableWrapper = sctSection.createChild('div', 'sct-details');
sctTableWrapper.classList.add('hidden');
for (let i = 0; i < sctListLength; i++) {
const sctTable = new SecurityDetailsTable();
sctTableWrapper.appendChild(sctTable.element());
const sct = originState.securityDetails.signedCertificateTimestampList[i];
sctTable.addRow(i18nString(UIStrings.logName), sct.logDescription);
sctTable.addRow(i18nString(UIStrings.logId), sct.logId.replace(/(.{2})/g, '$1 '));
sctTable.addRow(i18nString(UIStrings.validationStatus), sct.status);
sctTable.addRow(i18nString(UIStrings.source), sct.origin);
sctTable.addRow(i18nString(UIStrings.issuedAt), new Date(sct.timestamp).toUTCString());
sctTable.addRow(i18nString(UIStrings.hashAlgorithm), sct.hashAlgorithm);
sctTable.addRow(i18nString(UIStrings.signatureAlgorithm), sct.signatureAlgorithm);
sctTable.addRow(i18nString(UIStrings.signatureData), sct.signatureData.replace(/(.{2})/g, '$1 '));
}
// Add link to toggle between displaying of the summary of the SCT(s) and the detailed SCT(s).
if (sctListLength) {
function toggleSctDetailsDisplay(): void {
let buttonText;
const isDetailsShown = !sctTableWrapper.classList.contains('hidden');
if (isDetailsShown) {
buttonText = i18nString(UIStrings.showFullDetails);
} else {
buttonText = i18nString(UIStrings.hideFullDetails);
}
toggleSctsDetailsLink.textContent = buttonText;
UI.ARIAUtils.setLabel(toggleSctsDetailsLink, buttonText);
UI.ARIAUtils.setExpanded(toggleSctsDetailsLink, !isDetailsShown);
sctSummaryTable.element().classList.toggle('hidden');
sctTableWrapper.classList.toggle('hidden');
}
const toggleSctsDetailsLink = UI.UIUtils.createTextButton(
i18nString(UIStrings.showFullDetails), toggleSctDetailsDisplay,
{className: 'details-toggle', jslogContext: 'security.toggle-scts-details'});
sctSection.appendChild(toggleSctsDetailsLink);
}
switch (ctCompliance) {
case Protocol.Network.CertificateTransparencyCompliance.Compliant:
sctSection.createChild('div', 'origin-view-section-notes').textContent =
i18nString(UIStrings.thisRequestCompliesWithChromes);
break;
case Protocol.Network.CertificateTransparencyCompliance.NotCompliant:
sctSection.createChild('div', 'origin-view-section-notes').textContent =
i18nString(UIStrings.thisRequestDoesNotComplyWith);
break;
case Protocol.Network.CertificateTransparencyCompliance.Unknown:
break;
}
const noteSection = this.element.createChild('div', 'origin-view-section origin-view-notes');
if (originState.loadedFromCache) {
noteSection.createChild('div').textContent = i18nString(UIStrings.thisResponseWasLoadedFromCache);
}
noteSection.createChild('div').textContent = i18nString(UIStrings.theSecurityDetailsAboveAreFrom);
} else if (originState.securityState === Protocol.Security.SecurityState.Secure) {
// If the security state is secure but there are no security details,
// this means that the origin is a non-cryptographic secure origin, e.g.
// chrome:// or about:.
const secureSection = this.element.createChild('div', 'origin-view-section');
const secureDiv = secureSection.createChild('div', 'origin-view-section-title');
secureDiv.textContent = i18nString(UIStrings.secure);
UI.ARIAUtils.markAsHeading(secureDiv, 2);
secureSection.createChild('div').textContent = i18nString(UIStrings.thisOriginIsANonhttpsSecure);
} else if (originState.securityState !== Protocol.Security.SecurityState.Unknown) {
const notSecureSection = this.element.createChild('div', 'origin-view-section');
const notSecureDiv = notSecureSection.createChild('div', 'origin-view-section-title');
notSecureDiv.textContent = i18nString(UIStrings.notSecure);
UI.ARIAUtils.markAsHeading(notSecureDiv, 2);
notSecureSection.createChild('div').textContent = i18nString(UIStrings.yourConnectionToThisOriginIsNot);
} else {
const noInfoSection = this.element.createChild('div', 'origin-view-section');
const noInfoDiv = noInfoSection.createChild('div', 'origin-view-section-title');
noInfoDiv.textContent = i18nString(UIStrings.noSecurityInformation);
UI.ARIAUtils.markAsHeading(noInfoDiv, 2);
noInfoSection.createChild('div').textContent = i18nString(UIStrings.noSecurityDetailsAreAvailableFor);
}
}
private createSanDiv(sanList: string[]): Element {
const sanDiv = document.createElement('div');
if (sanList.length === 0) {
sanDiv.textContent = i18nString(UIStrings.na);
sanDiv.classList.add('empty-san');
} else {
const truncatedNumToShow = 2;
const listIsTruncated = sanList.length > truncatedNumToShow + 1;
for (let i = 0; i < sanList.length; i++) {
const span = sanDiv.createChild('span', 'san-entry');
span.textContent = sanList[i];
if (listIsTruncated && i >= truncatedNumToShow) {
span.classList.add('truncated-entry');
}
}
if (listIsTruncated) {
function toggleSANTruncation(): void {
const isTruncated = sanDiv.classList.contains('truncated-san');
let buttonText;
if (isTruncated) {
sanDiv.classList.remove('truncated-san');
buttonText = i18nString(UIStrings.showLess);
} else {
sanDiv.classList.add('truncated-san');
buttonText = i18nString(UIStrings.showMoreSTotal, {PH1: sanList.length});
}
truncatedSANToggle.textContent = buttonText;
UI.ARIAUtils.setLabel(truncatedSANToggle, buttonText);
UI.ARIAUtils.setExpanded(truncatedSANToggle, isTruncated);
}
const truncatedSANToggle = UI.UIUtils.createTextButton(
i18nString(UIStrings.showMoreSTotal, {PH1: sanList.length}), toggleSANTruncation,
{jslogContext: 'security.toggle-san-truncation'});
sanDiv.appendChild(truncatedSANToggle);
toggleSANTruncation();
}
}
return sanDiv;
}
setSecurityState(newSecurityState: Protocol.Security.SecurityState): void {
this.originLockIcon.removeChildren();
const icon = getSecurityStateIconForDetailedView(
newSecurityState, `security-property security-property-${newSecurityState}`);
this.originLockIcon.appendChild(icon);
}
}
export class SecurityDetailsTable {
readonly #element: HTMLTableElement;
constructor() {
this.#element = document.createElement('table');
this.#element.classList.add('details-table');
}
element(): HTMLTableElement {
return this.#element;
}
addRow(key: string, value: string|Node): void {
const row = this.#element.createChild('tr', 'details-table-row');
row.createChild('td').textContent = key;
const valueCell = row.createChild('td');
if (typeof value === 'string') {
valueCell.textContent = value;
} else {
valueCell.appendChild(value);
}
}
}
export interface OriginState {
securityState: Protocol.Security.SecurityState;
securityDetails: Protocol.Network.SecurityDetails|null;
loadedFromCache: boolean;
originView?: SecurityOriginView|null;
}
export type Origin = Platform.DevToolsPath.UrlString;