Add CSP information to Security Panel.

third_party/WebKit/Source/devtools/front_end/security/SecurityPanel.js

 // Copyright 2015 The Chromium Authors. All rights reserved.
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
 /**
  * @constructor
  * @extends {WebInspector.PanelWithSidebar}
  * @implements {WebInspector.TargetManager.Observer}
  */
 WebInspector.SecurityPanel = function()
@@ skipping 26 matching lines @@
 
 /** @typedef {string} */
 WebInspector.SecurityPanel.Origin;
 
 /**
  * @typedef {Object}
  * @property {!SecurityAgent.SecurityState} securityState - Current security state of the origin.
  * @property {?NetworkAgent.SecurityDetails} securityDetails - Security details of the origin, if available.
  * @property {?Promise<!NetworkAgent.CertificateDetails>} certificateDetailsPromise - Certificate details of the origin. Only available if securityDetails are available.
  * @property {?WebInspector.SecurityOriginView} originView - Current SecurityOriginView corresponding to origin.
+ * @property {?WebInspector.CSPParser} cspDetails - Content Security Policy details
  */
 WebInspector.SecurityPanel.OriginState;
 
 WebInspector.SecurityPanel.prototype = {
 
     /**
      * @param {!SecurityAgent.SecurityState} securityState
      */
     setRanInsecureContentStyle: function(securityState)
     {
@@ skipping 116 matching lines @@
             // TODO(lgarron): Store a (deduplicated) list of different security details we have seen. https://crbug.com/503170
             var originState = {};
             originState.securityState = securityState;
 
             var securityDetails = request.securityDetails();
             if (securityDetails) {
                 originState.securityDetails = securityDetails;
                 originState.certificateDetailsPromise = request.target().networkManager.certificateDetailsPromise(securityDetails.certificateId);
             }
 
+            if (Runtime.experiments.isEnabled("cspDetailsInSecurityPanel")) {
+                var cspHeader = request.responseHeaders.filter(header => header.name.toLowerCase().includes("content-security-policy"))[0];
+                if (cspHeader) {
+                    originState.cspDetails =
+                    WebInspector.CSPParser.buildFromString(
+                        cspHeader.value,
+                        cspHeader.name.toLowerCase().includes("report-only")
+                    );
+                }
+            }
+
             this._origins.set(origin, originState);
 
             this._sidebarTree.addOrigin(origin, securityState);
 
             // Don't construct the origin view yet (let it happen lazily).
         }
     },
 
     /**
      * @param {!WebInspector.Event} event
@@ skipping 621 matching lines @@
         noteSection.createChild("div").textContent = WebInspector.UIString("The security details above are from the first inspected response.");
     } else if (originState.securityState !== SecurityAgent.SecurityState.Unknown) {
         var notSecureSection = this.element.createChild("div", "origin-view-section");
         notSecureSection.createChild("div", "origin-view-section-title").textContent = WebInspector.UIString("Not Secure");
         notSecureSection.createChild("div").textContent = WebInspector.UIString("Your connection to this origin is not secure.");
     } else {
         var noInfoSection = this.element.createChild("div", "origin-view-section");
         noInfoSection.createChild("div", "origin-view-section-title").textContent = WebInspector.UIString("No Security Information");
         noInfoSection.createChild("div").textContent = WebInspector.UIString("No security details are available for this origin.");
     }
+
+    if (Runtime.experiments.isEnabled("cspDetailsInSecurityPanel") && originState.cspDetails) {
+        let contentSecurityPolicySection = this.element.createChild("div", "origin-view-section");
+        contentSecurityPolicySection.createChild("div", "origin-view-section-title").textContent = WebInspector.UIString("Content Security Policy");
+        let toggleButton = createElement("button");
+        toggleButton.textContent = "Collapse All Policies";
+        toggleButton.dataset.showing = true;
+        toggleButton.className = "collapse-policies";
+        contentSecurityPolicySection.appendChild(toggleButton);
+
+        let reportUri = createElement("p");
+        reportUri.innerHTML = `<b>Report URI</b> <span>${originState.cspDetails.reportUri ? originState.cspDetails.reportUri : "Not Set"}</span>`;
+        contentSecurityPolicySection.appendChild(reportUri);
+
+        toggleButton.addEventListener("click", () => {
+            let headings = contentSecurityPolicySection.querySelectorAll(".csp-rule-heading");
+            if (toggleButton.dataset.showing === "true") {
+                Array.prototype.forEach.call(headings, item => {
+                    item.closeSection();
+                });
+                toggleButton.textContent = "Show All Policies";
+                toggleButton.dataset.showing = false;
+            } else {
+                Array.prototype.forEach.call(headings, item => {
+                    item.showSection();
+                });
+                toggleButton.textContent = "Collapse Policies";
+                toggleButton.dataset.showing = true;
+            }
+        });
+
+        /**
+         * Create the sections for the CSP display.
+         *
+         * @param {!WebInspector.CSPParser.Policy} policy The CSP Policy to create a section for.
+         */
+        function createPolicySection(policy) {
+
+            // Since for some reason a blank policy may get made sometimes.
+            if (!policy.name) {
+                return;
+            }
+
+            /**
+             * Create table row for a CSP Rule
+             * @param {!WebInspector.CSPParser.Rule} rule The rule to create a table entry for.
+             * @return {string}
+             */
+            function createRuleRow(rule) {
+                return `
+                        <tr class="csp-rule csp-security-state-${rule.securityState}">
+                            <th><span class="lock-icon lock-icon-${rule.securityState}"></span><p>${rule.value}</p></th>
+                            <td>
+                                <p><b>Security Level</b> <span>${rule.humanReadableSecurityState}</span></p>
+                                ${rule.reason ? `<p><b>Reason</b> <span>${rule.reason}</span></p>` : ""}
+                                <p><b>Report Only</b> <span>${rule.reportOnly ? "Yes" : "No"}</span></p>
+                            </td>
+                        </tr>`;
+            }
+            let heading = createElement("h4");
+            heading.dataset.rule = policy.name;
+            heading.className = `csp-rule csp-rule-heading csp-security-state-${policy.securityState}`;
+            heading.textContent = policy.name;
+            heading.innerHTML += `<span class="icon"></span>`;
+            contentSecurityPolicySection.appendChild(heading);
+
+            let policyStateArea = createElement("p");
+            policyStateArea.innerHTML = `<b>Policy state</b> ${policy.humanReadableSecurityState}`;
+            if (policy.securityStateReason) {
+                policyStateArea.innerHTML += `<br><b>Reason</b> ${policy.securityStateReason}`;
+            }
+            contentSecurityPolicySection.appendChild(policyStateArea);
+
+            let table = createElementWithClass("table", `csp-directive csp-rule-list-${policy.name}`);
+            table.innerHTML += `
+                    <tbody>
+                        ${policy.rules.sort((a, b) => a.value.localeCompare(b.value)).map(createRuleRow).join('')}
+                    </tbody>
+                </table>`;
+            contentSecurityPolicySection.appendChild(table);
+
+            /**
+             * @this {Element}
+             */
+            heading.toggleSection = function() {
+                contentSecurityPolicySection
+                .querySelector(`.csp-rule-list-${policy.name}`)
+                .classList
+                .toggle("csp-directive_hidden");
+                this.classList.toggle("directive-is-hidden");
+            };
+            /**
+             * @this {Element}
+             */
+            heading.closeSection = function() {
+                contentSecurityPolicySection
+                .querySelector(`.csp-rule-list-${policy.name}`)
+                .classList
+                .add("csp-directive_hidden");
+                this.classList.add("directive-is-hidden");
+            };
+            /**
+             * @this {Element}
+             */
+            heading.showSection = function () {
+                contentSecurityPolicySection
+                .querySelector(`.csp-rule-list-${policy.name}`)
+                .classList
+                .remove("csp-directive_hidden");
+                this.classList.remove("directive-is-hidden");
+            };
+            heading.addEventListener("click", event => {
+                if (event.target.toggleSection)
+                    event.target.toggleSection();
+            });
+        }
+
+        originState.cspDetails.policies.forEach(createPolicySection);
+    }
 }
 
 WebInspector.SecurityOriginView.prototype = {
 
     /**
      * @param {!NetworkAgent.CertificateSubject} certificateSubject
      * *return {!Element}
      */
     _createSanDiv: function(certificateSubject)
     {
@@ skipping 97 matching lines @@
         row.createChild("div").textContent = key;
 
         var valueDiv = row.createChild("div");
         if (typeof value === "string") {
             valueDiv.textContent = value;
         } else {
             valueDiv.appendChild(value);
         }
     }
 }