search

Polymer / tools

Polymer Tools Monorepo
BSD 3-Clause "New" or "Revised" License
430 stars 199 forks source link

CSP option does not handle styles in a way compatible with CSP #1743

Open adamvoss opened 9 years ago

adamvoss commented 9 years ago

Vulcanize allows inline styles even when the CSP option is enabled. However inline styles are not allowed under CSP, unless excepted.

Just as the CSP option extracts inline scripts, it should also extract inline styles.

This can be demonstrated with the following html file:

<script src="bower_components/webcomponentsjs/webcomponents.min.js"></script>
<link rel="import" href="bower_components/polymer/polymer.html" />

Running vulcanize with CSP over the above the resulting html file contains a <style shim-shadowdom=""> element that causes CSP violations.

adamvoss commented 9 years ago

This causes functional problems when trying to consume elements. As such, it is not sufficient to just write one's own elements to not contain inline styles.

Here is are examples of a paper-input element using vulcanize on Chrome Canary (43.0.2314.0 canary (64-bit)):

with CSP: canary with

without CSP: canary without

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>Polymer Demo</title>
  <script src="bower_components/webcomponentsjs/webcomponents.min.js"></script>
  <link rel="import" href="bower_components/paper-input/paper-input.html" />
</head>
<body>
  <label>Count:</label><paper-input></paper-input>
</body>
</html>
dfreedm commented 9 years ago

Unfortunately, the style machinery for Polymer when running without native ShadowDOM requires polyfilling styles, and has to then inline them.

Preventing inline styles seems like a rather heavy-handed CSP rule to use in practice. Can you tell me more about the environment that requires this? Even Chrome Apps do not have this restriction: https://developer.chrome.com/apps/contentSecurityPolicy

adamvoss commented 9 years ago

Could the the polyfilling be accomplished with an explicit inclusion of a CSS file, such as how one must include angular-csp.css for angular? I believe the inlining you are talking about is an issue, but a different one than the <style>s provided by individual components. Otherwise, I am not sure why my own custom elements (written with the style in a separate file) seem to avoid the issue.

These are the relevant requirements:

In my case I can probably get unsafe-inline approved for styling as my requirements are relatively informal and the relevant stakeholder is amicable to change.

If Polymer's design intention is that it will work with CSP but only with unsafe-inline I will create a new issue over at Polymer/docs since that is not at all clear from the section on CSP. Coming from AngularJS I would expect CSP to work with out anything being relaxed unless otherwise specified.

joelweinberger commented 8 years ago

Unfortunately, disabling inline style is not heavy handed at all. There are numerous clever attacks that use inline style (see http://scarybeastsecurity.blogspot.com/2009/12/generic-cross-browser-cross-domain.html for an example), so for any sensitive page, it is quite important to not use unsafe-inline for style-src. It would be really fantastic to find a way resolve this, since as it stands, Polymer is not compatible with a secure and useful CSP :-(

stale[bot] commented 4 years ago

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.