Skip to content

Generated element contains inline styles, breaking CSPs #33

@lambdacasserole

Description

@lambdacasserole

PR #21 probably fixes this (haven't checked though). Opening an issue to provide more detail as to what the issue is and how we could address it.

First of all, fantastic library. Really makes things much simpler when I want to show the user that a task is in progress, and the fact that I don't have to add any extra markup to the page makes it all that much easier to use.

There is an issue, however, when a web application uses a content security policy that doesn't specify unsafe-inline, which is considered bad practice and sacrifices a substantial amount of security. The generated element (below) contains 4 inline style attributes, which the client will refuse to apply:

<div class="modal fade" data-backdrop="static" data-keyboard="false" tabindex="-1" role="dialog" aria-hidden="true" style="padding-top:15%; overflow-y:visible;"> 
	<div class="modal-dialog modal-m"> 
		<div class="modal-content"> 
			<div class="modal-header" style="display: none;"></div> 
			<div class="modal-body"> 
				<div class="progress progress-striped active" style="margin-bottom:0;"> 
					<div class="progress-bar" style="width: 100%"></div> 
				</div> 
			</div> 
		</div> 
	</div> 
</div>

The result is a modal that works, but contains no visible progress bar (because its width is 0) and has layout issues to the padding-top and overflow-y CSS attributes not being applied.

There are a few approaches we can take to fix this issue:

  • Move things to an external style sheet and make sure that style-src includes self - from PR For unsafe-inline css #21 I am guessing this isn't a particularly appealing option.
  • Place the burden on the CSP implementer to add specific exceptions for the SHA256 hashes of the inline styles included - Not particularly user-friendly and even the slightest change to the inline styles in this library will completely break it everywhere until users update their CSPs.
  • Extend the script to allow a 'nonce' to be specified - Probably the best option. As long as your users securely (i.e. unpredictably) generate a unique nonce for each page request. This won't break anything if no nonce is specified and no CSP is in place.

I'll submit a PR with the proposed change shortly.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions