Improve the ScriptTagHelper to support CSP & ordered, async downloading inc. fallback

[DamianEdwards]

It appears our use of document.write in the ScriptTagHelper to dynamically load JS files in to the browser (the CDN fallback feature) causes issues when trying to use Content Security Policy.

It appears this could be somewhat addressed by switching to dynamically creating and appending script elements to the DOM (assuming the CSP policy that enables inline script blocks is enabled), however that results in the scripts being loaded asynchronously to the page rendering, which potentially causes errors in the page (e.g. if the scripts now run out of order to how they were declared).

This article is a good write-up of the various methods that can be used to load scripts while controlling (or not) their execution order and they're affect on rendering.

We should investigate whether we could enhance the ScriptTagHelper to better support these techniques, along with CSP, e.g.:

• Have a way to toggle the method used to do the script loading, or just move to dynamically modifying the DOM and ignore the older browsers for which it introduces issues
• Honor the async attribute on the script element when dynamically loading the fallback script, maybe even use it as part of the download method toggle (always use document.write unless async attribute is explicitly set, or something)
• Maybe add a new attribute that forces scripts to be dynamically fetched async but with order preserved by the browser using these techniques, and use it combination with the above
• Support deferring all scripts to the end of the page (or some marker element) where they can then be properly downloaded and executed in order, with fallbacks if necessary, using "all the tricks known to web developer-kind", or something
• Give up and go shopping

Possible example that would render inline JS to do async downloads of the scripts while preserving their declared execution order:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.1/jquery.min.js"
    asp-fallback-src="~/lib/jquery/jquery.min.js"
    async asp-preserve-load-order></script>
<script src="~/js/needs-jquery.js" async asp-preserve-load-order></script>

[danroth27]

@DamianEdwards I assume this isn't for RTW?

[DamianEdwards]

Ya.

[jstangroome]

Ideally, any possible solution that relies on inline scripts should discourage the use of the unsafe- CSP directives by supporting either CSP script-src nonces or hashes or both.

[martincostello]

Allowing the user to specify the nonce via an attribute (asp-fallback-nonce maybe?) and rendering that attribute in the generated script would unblock the CSP use-case.

[brockallen]

This is also an issue for the validation summary emitting style="display:none".

[m17kea]

Hi,

What is the solution to validation summary emitting style="display:none" that brock mentions above?

Thanks

Mike

[danielgreen]

Instead of document.write, could the tag helper emit document.body.insertAjacentHTML('beforeend', ... ) or similar, to allow the scenario where the script tag is contained within an Ajax response (e.g. when calling jQuery.load)?

[danroth27]

Let's handle this as part of our broader CSP story tracked by #6001