content-security-policymodel-viewer

Set Content-Security-Policy header for @google/model-viewer


I want to use the @google/model-viewer to display 3D models, but my CSP header blocks the inline styles that the viewer creates. Is there a way to enable the viewer using nonce or other means?

<script type="module" src="https://unpkg.com/@google/model-viewer/dist/model-viewer.min.js"></script>
style_src 'self' 'unsafe-inline'

solves it but I would like to avoid it.


Solution

  • According to the message you got, you should be able to either use a nonce, or a hash, instead of 'unsafe-inline'.

    If the dynamic generation of a nonce is not an option in your setup, then the hash variant is the way to go.

    And by switching from the current embed URL, which basically translates to "give me the newest version", to a URL that explicitly loads a specific version, you should not have to worry about changes to that script source either - that's what it was "versioned" for, so that developers using it can rely on it staying the same. If the providers of this script resource need to make any updates or changes, they would release a new version.