md-tooltip violates CSP

[Frank3K]

Actual Behavior:

• What is the issue? * The md-tooltip component violates CSP on mouseleave.
• What is the expected behavior? The md-tooltip component does not violate CSP.

CodePen (or steps to reproduce the issue): *

• CodePen Demo which shows your issue: demo
• Details: Please note that there is a violation upon opening, because the codepen CSS is being loaded. These styles are empty so they do not change the layout.

Angular Versions: *

• Angular Version: 1.5.5 (demo) and 1.5.9 (local)
• Angular Material Version: v1.1.1-master-f7ecb4f

Additional Information:

• Browser Type: * Chromium
• Browser Version: * 53
• OS: * Ubuntu 16.10
• Stack Traces:

The following HTML is injected here in the DOM (newlines added for readability):

<div class="md-panel-outer-wrapper">
  <div class="md-panel" style="left: -9999px;">Tooltip text</div>
</div>

Probably introduced in 6d06188.

[Frank3K]

The issue has been in md-panel for quite some time. It was introduced in 4649240 (#8405).

@ErinCoughlan: do you have an idea on how to fix this?

An idea: add a class _md-panel-offscreen like this:

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

This class can be used in both _wrapTemplate and _wrapContentElement.

As a plus, it would make the code more clean by getting rid of the left DOM manipulation.

An alternative implementation (which I like more) for the class could be:

._md-panel-offscreen {
  visibility: hidden;
}

I'll try to create a PR for this.

[ErinCoughlan]

@Frank3K Thanks for catching this and fixing the issue.

I believe we tried the visibility: hidden solution, but it messed with the position calculations. We've made some changes to positioning since the initial implementation, so it may work now. Essentially, to calculate position, we need to temporarily render the component on screen to find it's size.

For either rule, you'll need !important so that nothing the user does can cause the panel to appear before it's ready.