ehpc / bootstrap-waitingfor

"Waiting for..." modal dialog with progress bar for Bootstrap
MIT License
138 stars 82 forks source link

Extend script to take a nonce for styles #34

Closed lambdacasserole closed 5 years ago

lambdacasserole commented 6 years ago

Exactly as described in #33. Extends the script to take a nonce which is included with the generated elements to permit their inline styles to be applied by the browser in the presence of a CSP. If no nonce is specified, the generated element is unaffected:

<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>

If a nonce (e.g. QVd4OVVMODdkQ0xm) is specified (as an entry in options) however, we get this:

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

Now our CSP can specify style-src: nonce-QVd4OVVMODdkQ0xm and our inline styles will work just fine. This nonce must be a cryptographically secure random value >=128 bits in length to prevent prediction/guessing.

ehpc commented 5 years ago

Thanks, @lambdacasserole !