Material: 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:
2. https://gitcdn.xyz/cdn/angular/bower-material/v1.1.22-master-08313be/angular-material.css
3. 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
4. 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 https://github.com/angular/material/pull/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
https://github.com/angular/material/blob/269b68e8540062e2a0e195edb54a75903b17fdd0/src/components/panel/panel.scss#L13-L15

[Splaktar]

And it's used very close to the code in question (in the child)
https://github.com/angular/material/blob/269b68e8540062e2a0e195edb54a75903b17fdd0/src/components/panel/panel.js#L1324-L1325

[Splaktar]

And removed in a very similar way
https://github.com/angular/material/blob/269b68e8540062e2a0e195edb54a75903b17fdd0/src/components/panel/panel.js#L1952-L1957

[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).