remove inline fallback code for CSP

gulpfile.js

@@ -65,7 +65,12 @@ gulp.task('clean:lib', function (cb) {
 gulp.task('clean', ['clean:js', 'clean:css', 'clean:lib', 'dist:clean']);
 
 gulp.task('min:js', ['clean:js'], function () {
-    return gulp.src([paths.js, '!' + paths.minJs], { base: '.' })
+    return gulp.src(
+        [
+            paths.js,
+            '!' + paths.minJs,
+            '!' + paths.webroot + 'js/fallback*.js'
+        ], { base: '.' })
         .pipe(concat(paths.concatJsDest))
         .pipe(uglify())
         .pipe(gulp.dest('.'));
@@ -356,6 +361,19 @@ gulp.task('dist:js:app', function () {
         .pipe(gulp.dest('.'));
 });
 
+gulp.task('dist:js:fallback', function () {
+    var mainStream = gulp
+        .src([
+            paths.webroot + 'js/fallback*.js'
+        ]);
+
+    merge(mainStream, config())
+        .pipe(preprocess({ context: { cacheTag: randomString } }))
+        .pipe(uglify())
+        .pipe(rename({ suffix: '.min' }))
+        .pipe(gulp.dest(paths.dist + 'js'));
+});
+
 gulp.task('dist:js:lib', function () {
     return gulp
         .src([
@@ -383,7 +401,7 @@ gulp.task('dist:preprocess', function () {
 gulp.task('dist', ['build'], function (cb) {
     return runSequence(
         'dist:clean',
-        ['dist:move', 'dist:css', 'dist:js:app', 'dist:js:lib'],
+        ['dist:move', 'dist:css', 'dist:js:app', 'dist:js:lib', 'dist:js:fallback'],
         'dist:preprocess',
         cb);
 });

src/index.html

@@ -43,12 +43,9 @@
     <script src="https://js.stripe.com/v2/"></script>
     <!-- @if true !>
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
-    <meta name="x-stylesheet-test-bs" content="" class="invisible" />
-    <script>!function(a,b,c){var d,e=document,f=e.getElementsByTagName('SCRIPT'),g=f[f.length-1].previousElementSibling,h=e.defaultView&&e.defaultView.getComputedStyle?e.defaultView.getComputedStyle(g):g.currentStyle;if(h&&h[a]!==b)for(d=0;d<c.length;d++)e.write('<link rel="stylesheet" href="'+c[d]+'"/>')}('visibility','hidden',['lib\/bootstrap\/css\/bootstrap.min.css?v=<!-- @echo cacheTag !>']);</script>
-
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />
-    <meta name="x-stylesheet-test-fa" content="" class="fa" />
+    <meta name="x-stylesheet-test" content="" class="fa invisible" />
-    <script>!function(a,b,c){var d,e=document,f=e.getElementsByTagName('SCRIPT'),g=f[f.length-1].previousElementSibling,h=e.defaultView&&e.defaultView.getComputedStyle?e.defaultView.getComputedStyle(g):g.currentStyle;if(h&&h[a]!==b)for(d=0;d<c.length;d++)e.write('<link rel="stylesheet" href="'+c[d]+'"/>')}('font-family','FontAwesome',['lib\/font-awesome\/css\/font-awesome.min.css?v=<!-- @echo cacheTag !>']);</script>
+    <script src="js/fallback-styles.min.js?v=<!-- @echo cacheTag !>"></script>
 
     <link rel="stylesheet" href="css/vault.min.css?v=<!-- @echo cacheTag !>" />
     <!-- @endif -->
@@ -66,13 +63,9 @@
 
     <!-- @if true !>
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
-    <script>(window.jQuery||document.write('<script src="lib\/jquery\/jquery.min.js?v=<!-- @echo cacheTag !>"><\/script>'));</script>
-
     <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
-    <script>((window.jQuery&&window.jQuery.fn&&window.jQuery.fn.modal)||document.write('<script src="lib\/bootstrap\/js\/bootstrap.min.js?v=<!-- @echo cacheTag !>"><\/script>'));</script>
-
     <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.3/angular.min.js"></script>
-    <script>(window.angular||document.write('<script src="lib\/angular\/angular.min.js?v=<!-- @echo cacheTag !>"><\/script>'));</script>
+    <script src="js/fallback-scripts.min.js?v=<!-- @echo cacheTag !>"></script>
 
     <script src="js/lib.min.js?v=<!-- @echo cacheTag !>"></script>
     <script src="js/bw.min.js?v=<!-- @echo cacheTag !>"></script>

src/js/fallback-scripts.js

@@ -0,0 +1,9 @@
+function loadScriptIfMissing(condition, path) {
+    if (!condition) {
+        document.write('<script src="' + path + '?v=' + cacheTag + '"><\/script>');
+    }
+}
+
+loadScriptIfMissing(window.jQuery, 'lib\/jquery\/jquery.min.js');
+loadScriptIfMissing(window.jQuery && window.jQuery.fn && window.jQuery.fn.modal, 'lib\/bootstrap\/js\/bootstrap.min.js');
+loadScriptIfMissing(window.angular, 'lib\/angular\/angular.min.js');

src/js/fallback-styles.js

@@ -0,0 +1,17 @@
+var cacheTag = '/* @echo cacheTag */' || '';
+
+function loadStylesheetIfMissing(property, value, paths) {
+    var scripts = document.getElementsByTagName('SCRIPT'),
+        siblings = scripts[scripts.length - 1].previousElementSibling,
+        meta = document.defaultView && document.defaultView.getComputedStyle ?
+            document.defaultView.getComputedStyle(siblings) : siblings.currentStyle;
+
+    if (meta && meta[property] !== value) {
+        for (var i = 0; i < paths.length; i++) {
+            document.write('<link rel="stylesheet" href="' + paths[i] + '?v=' + cacheTag + '" />');
+        }
+    }
+}
+
+loadStylesheetIfMissing('visibility', 'hidden', ['lib\/bootstrap\/css\/bootstrap.min.css']);
+loadStylesheetIfMissing('fontFamily', 'FontAwesome', ['lib\/font-awesome\/css\/font-awesome.min.css']);