<p>But still, CSP has <code>nonce</code>s for exactly such purposes to allow some specific use instead of general <code>unsafe-inline</code> directive.<br>
Resorting to javascript is a possible workaround, but also has to be done properly (eg to not just <code>eval()</code> the data attribute :) )</p>
<p>And of course, it also depends on the framework's support for CSP and how easy it is to use <code>nonce</code>s.</p>
<p>secure_headers gem seems to support this just fine, but as soon as the <code>nonce</code> is present in CSP <code>style-src</code> browsers will stop allowing <code>unsafe-inline</code>, breaking the styling in such places, so it needs to be done trough-out the website at once or have the CSP in report-only mode for a while until all instances are tackled.</p>

<p style="font-size:small;-webkit-text-size-adjust:none;color:#666;">—<br />You are receiving this because you are subscribed to this thread.<br />Reply to this email directly, <a href="https://github.com/openstreetmap/openstreetmap-website/pull/1779#issuecomment-374250424">view it on GitHub</a>, or <a href="https://github.com/notifications/unsubscribe-auth/ABWnLcJXEDm0P9zNK9ft4N8I4FVUM_PNks5tf8zegaJpZM4Sdsny">mute the thread</a>.<img src="https://github.com/notifications/beacon/ABWnLfi2KerpdYH8sSYv2fMybkCTQrYCks5tf8zegaJpZM4Sdsny.gif" height="1" width="1" alt="" /></p>
<div itemscope itemtype="http://schema.org/EmailMessage">
<div itemprop="action" itemscope itemtype="http://schema.org/ViewAction">
  <link itemprop="url" href="https://github.com/openstreetmap/openstreetmap-website/pull/1779#issuecomment-374250424"></link>
  <meta itemprop="name" content="View Pull Request"></meta>
</div>
<meta itemprop="description" content="View this Pull Request on GitHub"></meta>
</div>

<script type="application/json" data-scope="inboxmarkup">{"api_version":"1.0","publisher":{"api_key":"05dde50f1d1a384dd78767c55493e4bb","name":"GitHub"},"entity":{"external_key":"github/openstreetmap/openstreetmap-website","title":"openstreetmap/openstreetmap-website","subtitle":"GitHub repository","main_image_url":"https://cloud.githubusercontent.com/assets/143418/17495839/a5054eac-5d88-11e6-95fc-7290892c7bb5.png","avatar_image_url":"https://cloud.githubusercontent.com/assets/143418/15842166/7c72db34-2c0b-11e6-9aed-b52498112777.png","action":{"name":"Open in GitHub","url":"https://github.com/openstreetmap/openstreetmap-website"}},"updates":{"snippets":[{"icon":"PERSON","message":"@stefanb in #1779: But still, CSP has `nonce`s for exactly such purposes to allow some specific use instead of general `unsafe-inline` directive. \r\nResorting to javascript is a possible workaround, but also has to be done properly (eg to not just `eval()` the data attribute :) )\r\n\r\nAnd of course, it also depends on the framework's support for CSP and how easy it is to use `nonce`s.\r\n\r\nsecure_headers gem seems to support this just fine, but as soon as the `nonce` is present in CSP `style-src` browsers will stop allowing `unsafe-inline`, breaking the styling in such places, so it needs to be done trough-out the website at once or have the CSP in report-only mode for a while until all instances are tackled."}],"action":{"name":"View Pull Request","url":"https://github.com/openstreetmap/openstreetmap-website/pull/1779#issuecomment-374250424"}}}</script>