Skip to content

GitLab

T
tangled
Commit 7eaf471e authored by Jun Kokatsu's avatar Jun Kokatsu Committed by Commit Bot
Browse files
Options

Trusted Type WebRTC internals 

This change removes innerHTML usage in chrome://webrtc-internals
and use template element instead.

Bug: 41905
Change-Id: I7fc9be4c3e577addaca240d8a0eb5cf1b0b66dee
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2208950
Commit-Queue: Jun Kokatsu <Jun.Kokatsu@microsoft.com>
Reviewed-by: default avatarHenrik Boström <hbos@chromium.org>
Reviewed-by: default avatarGuido Urdaneta <guidou@chromium.org>
Reviewed-by: default avatardpapad <dpapad@chromium.org>
Cr-Commit-Position: refs/heads/master@{#773898}
parent 1a3cf7af
Hide whitespace changes
Inline Side-by-side
Showing with 70 additions and 69 deletions
chrome/browser/ui/webui/chrome_url_data_manager_browsertest.cc
View file @ 7eaf471e
......@@ -399,3 +399,10 @@ IN_PROC_BROWSER_TEST_F(
NoTrustedTypesViolationInSafeBrowsing) {
CheckTrustedTypesViolation("chrome://safe-browsing");
}
// Verify that there's no Trusted Types violation in chrome://webrtc-internals
IN_PROC_BROWSER_TEST_F(
ChromeURLDataManagerTestWithWebUIReportOnlyTrustedTypesEnabled,
NoTrustedTypesViolationInWebrtcInternals) {
CheckTrustedTypesViolation("chrome://webrtc-internals");
}
content/browser/resources/media/dump_creator.js
View file @ 7eaf471e
......@@ -28,58 +28,7 @@ var DumpCreator = (function() {
var content = document.createElement('div');
this.root_.appendChild(content);
content.innerHTML = '<div><a><button>' +
'Download the PeerConnection updates and stats data' +
'</button></a></div>' +
'<p><label><input type=checkbox>' +
'Enable diagnostic audio recordings</label></p>' +
'<p class=audio-diagnostic-dumps-info>A diagnostic audio recording is' +
' used for analyzing audio problems. It consists of several files and' +
' contains the audio played out to the speaker (output) and captured' +
' from the microphone (input). The data is saved locally.' +
' Checking this box will enable recordings of all ongoing input and' +
' output audio streams (including non-WebRTC streams) and for future' +
' audio streams. When the box is unchecked or this page is closed,' +
' all ongoing recordings will be stopped and this recording' +
' functionality disabled. Recording audio from multiple tabs is' +
' supported as well as multiple recordings from the same tab.</p>' +
'<p>When enabling, select a base filename to which the following' +
' suffixes will be added:</p>' +
'<p><div>&lt;base filename&gt;.&lt;render process ID&gt;' +
'.aec_dump.&lt;AEC dump recording ID&gt;</div>' +
'<div>&lt;base filename&gt;.input.&lt;stream recording ID&gt;.wav' +
'</div><div>' +
'&lt;base filename&gt;.output.&lt;stream recording ID&gt;.wav' +
'</div></p>' +
'<p class=audio-diagnostic-dumps-info>It is recommended to choose a' +
' new base filename each time the feature is enabled to avoid ending' +
' up with partially overwritten or unusable audio files.</p>' +
'<p><label><input type=checkbox disabled=true>' +
'Enable diagnostic packet and event recording' +
'<label name="placeholder_for_warning"/></label></p>' +
'<p class=audio-diagnostic-dumps-info>A diagnostic packet and event' +
' recording can be used for analyzing various issues related to' +
' thread starvation, jitter buffers or bandwidth estimation. Two' +
' types of data are logged. First, incoming and outgoing RTP headers' +
' and RTCP packets are logged. These do not include any audio or' +
' video information, nor any other types of personally identifiable' +
' information (so no IP addresses or URLs). Checking this box will' +
' enable the recording for ongoing WebRTC calls and for future' +
' WebRTC calls. When the box is unchecked or this page is closed,' +
' all ongoing recordings will be stopped and this recording' +
' functionality will be disabled for future WebRTC calls. Recording' +
' in multiple tabs or multiple recordings in the same tab will cause' +
' multiple log files to be created. When enabling, a filename for the' +
' recording can be entered. The entered filename is used as a' +
' base, to which the following suffixes will be appended.</p>' +
' <p>&lt;base filename&gt;_&lt;date&gt;_&lt;timestamp&gt;_&lt;render ' +
'process ID&gt;_&lt;recording ID&gt;</p>' +
'<p class=audio-diagnostic-dumps-info>If a file with the same name' +
' already exists, it will be overwritten. No more than 5 logfiles ' +
' will be created, and each of them is limited to 60MB of storage. ' +
' On Android these limits are 3 files of at most 10MB each. ' +
' When the limit is reached, the checkbox must be unchecked and ' +
' rechecked to resume logging.</p>';
content.appendChild($('dump-template').content.cloneNode(true));
content.getElementsByTagName('a')[0].addEventListener(
'click', this.onDownloadData_.bind(this));
content.getElementsByTagName('input')[0].addEventListener(
......@@ -128,13 +77,13 @@ var DumpCreator = (function() {
* @private
*/
onDownloadData_: function() {
var dump_object = {
var dumpObject = {
'getUserMedia': userMediaRequests,
'PeerConnections': peerConnectionDataStore,
'UserAgent': navigator.userAgent,
};
var textBlob = new Blob(
[JSON.stringify(dump_object, null, ' ')], {type: 'octet/stream'});
[JSON.stringify(dumpObject, null, 1)], {type: 'octet/stream'});
var URL = window.URL.createObjectURL(textBlob);
var anchor = this.root_.getElementsByTagName('a')[0];
......
content/browser/resources/media/peer_connection_update_table.js
View file @ 7eaf471e
......@@ -82,7 +82,9 @@ var PeerConnectionUpdateTable = (function() {
tableElement.firstChild.appendChild(row);
var time = new Date(parseFloat(update.time));
row.innerHTML = '<td>' + time.toLocaleString() + '</td>';
const timeItem = document.createElement('td');
timeItem.textContent = time.toLocaleString();
row.appendChild(timeItem);
// map internal event names to spec event names.
var type = {
......@@ -98,7 +100,9 @@ var PeerConnectionUpdateTable = (function() {
update.type;
if (update.value.length === 0) {
row.innerHTML += '<td>' + type + '</td>';
const typeItem = document.createElement('td');
typeItem.textContent = type;
row.appendChild(typeItem);
return;
}
......@@ -118,8 +122,9 @@ var PeerConnectionUpdateTable = (function() {
type += ' (munged)';
}
}
row.innerHTML +=
'<td><details><summary>' + type + '</summary></details></td>';
const summaryItem = $('summary-template').content.cloneNode(true);
summaryItem.querySelector('summary').textContent = type;
row.appendChild(summaryItem);
var valueContainer = document.createElement('pre');
var details = row.cells[1].childNodes[0];
......@@ -190,8 +195,8 @@ var PeerConnectionUpdateTable = (function() {
tableElement.id = tableId;
tableElement.border = 1;
tableContainer.appendChild(tableElement);
tableElement.innerHTML = '<tr><th>Time</th>' +
'<th class="update-log-header-event">Event</th></tr>';
tableElement.appendChild(
$('time-event-template').content.cloneNode(true));
}
return tableElement;
},
......
content/browser/resources/media/stats_graph_helper.js
View file @ 7eaf471e
......@@ -387,7 +387,7 @@ function ensureStatsGraphTopContainer(peerConnectionElement, report) {
container.className = 'stats-graph-container';
peerConnectionElement.appendChild(container);
container.innerHTML = '<summary><span></span></summary>';
container.appendChild($('summary-span-template').content.cloneNode(true));
container.firstChild.firstChild.className =
STATS_GRAPH_CONTAINER_HEADING_CLASS;
container.firstChild.firstChild.textContent =
......@@ -421,8 +421,11 @@ function createStatsGraphView(peerConnectionElement, report, statsName) {
container.className = 'stats-graph-sub-container';
topContainer.appendChild(container);
container.innerHTML = '<div>' + statsName + '</div>' +
'<div id=' + divId + '><canvas id=' + canvasId + '></canvas></div>';
const canvasDiv = $('container-template').content.cloneNode(true);
canvasDiv.querySelectorAll('div')[0].textContent = statsName;
canvasDiv.querySelectorAll('div')[1].id = divId;
canvasDiv.querySelector('canvas').id = canvasId;
container.appendChild(canvasDiv);
if (statsName === 'bweCompound') {
container.insertBefore(
createBweCompoundLegend(peerConnectionElement, report.id), $(divId));
......@@ -437,7 +440,8 @@ function createBweCompoundLegend(peerConnectionElement, reportId) {
for (var prop in bweCompoundGraphConfig) {
var div = document.createElement('div');
legend.appendChild(div);
div.innerHTML = '<input type=checkbox checked>' + prop;
div.appendChild($('checkbox-template').content.cloneNode(true));
div.appendChild(document.createTextNode(prop));
div.style.color = bweCompoundGraphConfig[prop].color;
div.dataSeriesId = reportId + '-' + prop;
div.graphViewId =
......
content/browser/resources/media/stats_table.js
View file @ 7eaf471e
......@@ -105,11 +105,12 @@ var StatsTable = (function(ssrcInfoManager) {
table.id = tableId;
table.border = 1;
table.innerHTML = '<tr><th colspan=2></th></tr>';
table.appendChild($('trth-template').content.cloneNode(true));
table.rows[0].cells[0].textContent = 'Statistics ' + report.id;
if (report.type === 'ssrc') {
table.insertRow(1);
table.rows[1].innerHTML = '<td colspan=2></td>';
table.rows[1].appendChild(
$('td-colspan-template').content.cloneNode(true));
this.ssrcInfoManager_.populateSsrcInfo(
table.rows[1].cells[0], GetSsrcFromReport(report));
}
......@@ -150,7 +151,9 @@ var StatsTable = (function(ssrcInfoManager) {
trElement = document.createElement('tr');
trElement.id = trId;
statsTable.firstChild.appendChild(trElement);
trElement.innerHTML = '<td>' + rowName + '</td><td></td>';
const item = $('td2-template').content.cloneNode(true);
item.querySelector('td').textContent = rowName;
trElement.appendChild(item);
}
trElement.cells[1].textContent = value;
......
content/browser/webrtc/resources/webrtc_internals.html
View file @ 7eaf471e
......@@ -8,7 +8,40 @@
<script src="webrtc_internals.js"></script>
</head>
<body>
<p id="content-root">
</p>
<p id="content-root"></p>
<template id="td2-template"><td></td><td></td></template>
<template id="summary-template"><td><details><summary></summary></details></td></template>
<template id="container-template"><div></div><div><canvas></canvas></div></template>
<template id="summary-span-template"><summary><span></span></summary></template>
<template id="checkbox-template"><input type=checkbox checked></template>
<template id="trth-template"><tbody><tr><th colspan=2></th></tr></tbody></template>
<template id="td-colspan-template"><td colspan=2></td></template>
<template id="time-event-template"><tbody><tr><th>Time</th><th class="update-log-header-event">Event</th></tr></tbody></template>
<template id="dump-template">
<div>
<a>
<button>Download the PeerConnection updates and stats data</button>
</a>
</div>
<p>
<label>
<input type="checkbox">Enable diagnostic audio recordings
</label>
</p>
<p class="audio-diagnostic-dumps-info">A diagnostic audio recording is used for analyzing audio problems. It consists of several files and contains the audio played out to the speaker (output) and captured from the microphone (input). The data is saved locally. Checking this box will enable recordings of all ongoing input and output audio streams (including non-WebRTC streams) and for future audio streams. When the box is unchecked or this page is closed, all ongoing recordings will be stopped and this recording functionality disabled. Recording audio from multiple tabs is supported as well as multiple recordings from the same tab.</p>
<p>When enabling, select a base filename to which the following suffixes will be added:</p>
<div>&lt;base filename&gt;.&lt;render process ID&gt;.aec_dump.&lt;AEC dump recording ID&gt;</div>
<div>&lt;base filename&gt;.input.&lt;stream recording ID&gt;.wav</div>
<div>&lt;base filename&gt;.output.&lt;stream recording ID&gt;.wav</div>
<p class="audio-diagnostic-dumps-info">It is recommended to choose a new base filename each time the feature is enabled to avoid ending up with partially overwritten or unusable audio files.</p>
<p>
<label>
<input type="checkbox" disabled>Enable diagnostic packet and event recording
</label>
</p>
<p class="audio-diagnostic-dumps-info">A diagnostic packet and event recording can be used for analyzing various issues related to thread starvation, jitter buffers or bandwidth estimation. Two types of data are logged. First, incoming and outgoing RTP headers and RTCP packets are logged. These do not include any audio or video information, nor any other types of personally identifiable information (so no IP addresses or URLs). Checking this box will enable the recording for ongoing WebRTC calls and for future WebRTC calls. When the box is unchecked or this page is closed, all ongoing recordings will be stopped and this recording functionality will be disabled for future WebRTC calls. Recording in multiple tabs or multiple recordings in the same tab will cause multiple log files to be created. When enabling, a filename for the recording can be entered. The entered filename is used as a base, to which the following suffixes will be appended.</p>
<p>&lt;base filename&gt;_&lt;date&gt;_&lt;timestamp&gt;_&lt;render process ID&gt;_&lt;recording ID&gt;</p>
<p class="audio-diagnostic-dumps-info">If a file with the same name already exists, it will be overwritten. No more than 5 logfiles will be created, and each of them is limited to 60MB of storage. On Android these limits are 3 files of at most 10MB each. When the limit is reached, the checkbox must be unchecked and rechecked to resume logging.</p>
</template>
</body>
</html>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment