Content Security Policy: Allow files after initial load? - content-security-policy

Question

The Content-Security-Policy header is, in theory, awesome. In practice, I've run into a problem. If a page loads the CSP and later you, for example, load a login page dynamically, the JS files for that page must have already been included. Because even if the login page uses an absolute URL which matches the domain the index page is from (And is set in the CSP for script-src), it will prevent it from loading.
When I used a nonce to try to circumvent this, the same issue arose, but it was intermittent. Sometimes it would let the same-nonce javascript file load in, and sometimes it wouldn't.
In case it's unclear, the dynamically-loaded script triggers CSP's idea of an "unsafe-inline script."
Is there a 100% effective way to load dynamic JS/CSS files with a strong CSP?
Freeform code example:
index.php:
<?php Header("Content-Security-Policy: default-src 'none'; script-src 'self' https://example.com"); ?>
<script src="triggerLogin.js"></script>
Login
<div class="futureLoginPage"></div>
triggerLogin.js: (CSP Allows)
$('.loginLink').on('click', function(event)
{
$('.futureLoginPage').load('/login.php');
event.stopPropagation();
event.preventDefault();
return false;
});
login.php:
<script src="https://example.com/loginFormVerify.js" type="text/javascript"></script>
<input type="text" class="user" placeholder="Username" />
<input type="text" class="pass" placeholder="Password" />
<input type="button" class="send" value="Send" />
<div class="authStatus"></div>
loginFormVerify.js: (CSP Forbids)
$('.send').on('click', function()
{
post("/verification.php", { user: $('.user').val(), pass: $('.pass').val() }, function(data)
{
$('.authStatus').html(data);
});
});
It doesn't matter if I use https://example.com/ in the 'post' functions, as CSP doesn't even load the loginFormVerify.js file, let alone check its contents.
In reverse, it doesn't matter if I remove https://example.com/ from the JS script sources to let it resolve to its own understanding of the domain. It still fails.
It doesn't matter if I add type="text/javascript" or type="application/javascript" to one or both of the tags, either. And as mentioned above, a nonce only intermittently helps on a dynamically-loaded JS file sent from the server.
While we're at it, it doesn't matter if I have ' ' around the domain name in the header.
Also, I can remove the </script> tags and use the below to the exact same result:
<script src="..." />
I've attempted the above connection style on Safari, Chrome and Firefox with identical results. Safari and Chrome on mobile as well.
I'm aware one workaround is to condense all JS functionality into a single file at the index.php level, but I'm curious if there's a way to handle this some other way.
I make no guarantees that the above example code works in any capacity and recognize the above snippet is far from best practice.
The point of the above code is exclusively to provide an example of how CSP fails to provide a desired result in a dynamic environment, for the purposes of the question:
Is there a 100% effective workaround without reducing CSP's useful nature, other than preloading all scripts (Which can be harmful to speed, maintenance, bandwidth, and -- for those that care -- SEO)?