Commits on Aug 24, 2016

1. fix(modal): Fix use of inline styles for Content Security Policy …

   ### Summary
   Inline styles are not allowed under CSP, so this replaces the inline styles used by `$modalStack` with calls to `angular.element.css()`
   
   ### Details
   
   `$modalStack.open` creates two divs directly with angular.element, and both divs have inline style elements (i.e. `'<div style="...">'`).
   
   If [Content Security Policy](https://developer.mozilla.org/en-US/docs/Web/Security/CSP) (CSP) is enabled, these inline styles cannot be applied and cause errors.  e.g. in chrome:
   
   > [Report Only] Refused to apply inline style because it violates the following Content Security Policy directive: "default-src 'self'". Either the 'unsafe-inline' keyword, a hash ('sha256-xHgdoELGuMXNdMeJ4PQkbzZpH1rlmZwpY3b56d2ZvpI='), or a nonce ('nonce-...') is required to enable inline execution. Note also that 'style-src' was not explicitly set, so 'default-src' is used as a fallback.
   
   This is fixed by replacing the inline styles with calls to `angular.element.css()` (which boils down to `HTMLElement.style.foo = bar;`) as this does not trigger the inline styles violation.
   - For the //faux// modal div, this is simply done immediately.
   - For the temporary div that is replaced by the `modal-window`, it is a bit more complex:
     - If you just apply to this temp div using .css() it still fails when the `modal-window` directive replaces it because Angular merges the attributes of the temp div and the new one.  The temp div has an inline style (set by .css()), and trying to apply this `style='...'` as an attribute to the new div causes the same inline execution error.
     - Instead we pass the top position through a custom attribute (`mm-top`), then the `modal-window` applies the value to itself using `element.css()`.
   
   ### Setup
   Browser: Chrome `52.0.2743.116 m` (up to date), plus same result in Firefox, Edge, etc.
   OS: Windows 10
   Server: NodeJS 4.4.3
   CSP Headers: `content-security-policy-report-only: default-src 'self'; report-uri /api/v0/csp-report` (This reports but doesn't prevent violations of the policy while debugging rules).
   
   ### Notes
   As per the error reported by Chrome, this could theoretically be worked around by using `'unsafe-inline'` but this is, as named, unsafe.  It could also be worked around with a hash for each case but that isn't well supported by browsers yet, and there are a lot of different cases that would need a hash for each one. Nonces are even harder to use with library code.
   
   Test Plan:
   - Run all the unit tests and check they all pass
   - Test the library in my own project and check no CSP warnings are given
   - Open and close some modals at various window scroll positions and check they still position correctly

   

   farrago committed Aug 24, 2016
   Configuration menu

   • View commit details
   • Copy full SHA for c8b2564
   • Browse repository at this point

   Copy the full SHA

   c8b2564 View commit details

   Browse the repository at this point in the history