panel: new unsafe-inline styles

[Splaktar]

Bug

Demo and steps to reproduce the issue

This blank StackBlitz demo can be used to create a reproduction that demonstrates your issue.

Demo URL (required)*: https://github.com/angular/material/pull/11390/files#diff-b71bb3e10759daf665e48e9bc558dc99R1324

Detailed Reproduction Steps

1. Update a project using CSP to the latest HEAD:

• https://gitcdn.xyz/cdn/angular/bower-material/v1.1.22-master-08313be/angular-material.css
• https://gitcdn.xyz/cdn/angular/bower-material/v1.1.22-master-08313be/angular-material.js
  Or install via NPM with npm install http://github.com/angular/bower-material#master

1. Load the project in a browser

Explain the expected behavior

• No new CSP violations.

Explain the current behavior

• New CSP violations due to unsafe-inline for style-src.

Discuss the use-case or motivation for changing the existing behavior

Support existing apps using a CSP for security.

List the affected versions of AngularJS, Material, OS, and browsers

• AngularJS: 1..8.0
• AngularJS Material: v1.1.22-master-08313be
• OS: all
• Browsers: Chrome

Add anything else we should know

This was introduced in PR #11390.

Related Chrome bug that can make the error a bit hard to understand:
https://bugs.chromium.org/p/chromium/issues/detail?id=546106

[oliversalzburg]

Could we introduce a .md-panel-inner-wrapper-initial-offset class, which has the initial offset, is assigned to the node in the template and then remove that instead of adjusting the style?

[Splaktar]

That sounds reasonable to me. Though we probably want to give it a more private looking name like ._md-panel-inner-wrapper-initial-offset.

[Splaktar]

In fact, it looks like we already have this class

material/src/components/panel/panel.scss

Lines 13 to 15 in 269b68e

	._md-panel-offscreen {
	left: -9999px;
	}

[Splaktar]

And it's used very close to the code in question (in the child)

material/src/components/panel/panel.js

Lines 1324 to 1325 in 269b68e

	'<div class="md-panel-inner-wrapper" style="left: -9999px;">' +
	'<div class="md-panel _md-panel-offscreen">' + template + '</div>' +

[Splaktar]

And removed in a very similar way

material/src/components/panel/panel.js

Lines 1952 to 1957 in 269b68e

	// Remove offscreen class and add hidden class.
	self.panelEl.removeClass('_md-panel-offscreen');
	// Remove left: -9999px and add hidden class.
	self.innerWrapper.css('left', '');
	self.panelContainer.addClass(MD_PANEL_HIDDEN);

[Splaktar]

I was able to remove these new inline styles, but I wasn't able to verify in a separate app that this solves the issue because I wasn't able to reproduce the problem (i.e. I got the same CSP violations with 1.1.22 as with v1.1.22-master-1bd1a97 and they were only related to not having set a nonce for theming).