如何使用附加脚本加载AngularJS文件? (CSP严格动态要求)

时间:2017-06-22 15:48:17

标签: javascript angularjs loading content-security-policy

我在本地托管AngularJS。如果我在结束体标记之前以这种方式加载JS文件,它可以工作:

<script src="javascript/angular.min.js"></script>
<script src="javascript/angular.min.js.map" type="application/json"></script>
<script src="javascript/angular-route.min.js"></script>
<script src="javascript/angular-route.min.js.map" type="application/json"></script>

为了允许新的'严格动态'CSP,我需要在一个无源脚本中加载我的所有脚本(即,页面上的脚本元素不允许'src';脚本本身必须包含在脚本标记内)。对于除AngularJS之外的所有脚本,我的脚本加载例程没有问题。如果我尝试以这种方式加载它,它会在控制台中失败并显示错误消息(“无法读取未定义的属性'模块',等等):

<script>
window.onload = function () {
    var loadScript = function (url, type) {
        var script = document.createElement('script');
        script.src = url;
        if (type === 'application/json') {
            script.type = type;
        }
        document.body.appendChild(script);
    };

    loadScript('javascript/angular.min.js', '');
    loadScript('javascript/angular.min.js.map', 'application/json');
    loadScript('javascript/angular-route.min.js', '');
    loadScript('javascript/angular-route.min.js.map', 'application/json');
};
</script>

如果例程不限于window.onload事件,那么这也会失败:

<script>
var loadScript = function (url, type) {
    var script = document.createElement('script');
    script.src = url;
    if (type === 'application/json') {
        script.type = type;
    }
    document.body.appendChild(script);
};

loadScript('javascript/angular.min.js', '');
loadScript('javascript/angular.min.js.map', 'application/json');
loadScript('javascript/angular-route.min.js', '');
loadScript('javascript/angular-route.min.js.map', 'application/json');
</script>

...如果我从本地主机或谷歌的Ajax CDN获取文件,这没有任何区别。

有任何线索如何解决这个问题?使用'严格动态'CSP,我别无选择,只能使用上述技术加载AngularJS框架文件。

0 个答案:

没有答案