title: What are the risks associated with using inline styles?
body: <p>A <a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP" rel="noreferrer">Content Security Policy</a> with a <code>default-src</code> or <code>style-src</code> directive will prevent inline styles from being applied to <code>&lt;style&gt;</code> elements or style attributes. To allow the use of inline styles, a value of <code>unsafe-inline</code> must be applied to a CSP fetch directive. This seems to indicate that inline styles are unsafe. </p>
  
  <p>While inline Javascript is an obvious attack vector for XSS attacks (CSP is <a href="https://research.google.com/pubs/pub45542.html" rel="noreferrer">pretty much useless</a> with <code>script-src 'unsafe-inline'</code>), Google Web Fundamentals considers inline-styles <a href="https://developers.google.com/web/fundamentals/security/csp/" rel="noreferrer">to be a relatively equivalent threat</a>, providing <a href="http://scarybeastsecurity.blogspot.com/2009/12/generic-cross-browser-cross-domain.html" rel="noreferrer">one example</a> of a clever data exfiltration method from a 2009 blog post.</p>
  
  <p>On the other hand, another <a href="https://developers.google.com/web/fundamentals/performance/critical-rendering-path/analyzing-crp#adding_javascript_and_css_into_the_mix" rel="noreferrer">Web Fundamentals article</a> suggests that inlining styles can help optimize the critical rendering path, as first paint won't be blocked while the browser fetches external resource(s). It seems there is a very real tradeoff between security and performance:</p>
  
  <p>In general, how risky are inline styles?</p>