javascript - ajax 不执行或接收外部脚本

Question

这是对我之前的 question (unresolved) 的跟进.

.htaccess 中的指令:

Header always set Content-Security-Policy "default-src 'none'; base-uri 'self'; style-src 'self'; font-src 'self'; img-src 'self'; script-src 'self' 'nonce-22os9h3sdfa'; connect-src 'self'; object-src 'self'; media-src 'self'; child-src 'none'; report-uri https://mydomain.info/csp-reporting.php"

CSP 日志 -> 来 self 域的 report.txt 文件: Link 从链接中删除/csp/report_2017-02-07.txt 然后你会得到指向我自己网站的链接

我尝试通过 ajax 获取方法加载外部脚本:

$.ajax({
        type: 'GET',
        dataType: 'script',
         headers: {
            Accept : 'text/javascript; charset=utf-8',
            'Content-Type': 'text/javascript; charset=utf-8'
        },
        url: 'https://mydomain.info/js/library.js',/*I change url for fake on public share. My correct url is in above link*/
        /*data: { nonce: '22os9h3sdfa' }, - use attrs solution from: https://github.com/jquery/jquery/issues/3028*/
        attrs: { nonce: '22os9h3sdfa' },
        cache : true,
        jsonp: false,
        async: true,
        success: function() { console.log('xhr was send'); },
        error: function (XMLHttpRequest, status, errorThrown) {
            if (status == 'Unauthorized') { console.log(' === Error: ' + errorThrown + ' === '); }
            else { console.log(' === Error: ' + errorThrown + ' === '); }
        },
        complete: function (jqXHR, textStatus) {
            console.log(textStatus);
            console.log(jqXHR.status);
            console.log(jqXHR.responseText);
        }
    })

我花了很多时间来查找错误以及阻止脚本执行的原因。需要帮助，拜托..

Answer 1

你这里似乎有不同的东西导致错误:

• 首先，您的第一批 CSP 错误来自声明为“内联”的样式(直接在 html 标记中具有属性 style=)。为此，您必须这样声明:

  style-src 'self' 'unsafe-inline';

• 遵循相同的方案，CSP 也将禁止所有内联 javascript，这可能不是您提供的，但可以在库中(从未将 nonce 声明为来源，但我相信您的话那，现在没时间搜索):

  script-src 'self' 'unsafe-inline' 'nonce-22os9h3sdfa';

• 你似乎加载了外部图像，虽然它没有在 CSP 中声明，尝试添加它们(你可以在路径上更严格，这里的 * 允许你访问指定域的所有子域):

  img-src 'self' 'https://*.amazonaws.com';

• 最后，您的主要问题似乎是资源本身的加载，可能是它们的顺序或什么，但您的加载顺序并不稳定。大多数时候它会实际加载 lib 文件，但其余时间我有一个 jquery 未定义错误(ReferenceError:$ 未定义)。当库加载时，元素在调用时未定义(jQuery.Deferred 异常:未定义 Swiper @index.js:380:4)。也许你可以尝试将你的 jQuery 包含移动到 head，或者像这样声明没有冲突(我从来没有看到它按照你以前的方式完成，不知道它是否合法):

  $(document).ready(function(){
      var $ = jQuery.noConflict();
      //the call of jQuery.noConflict(); makes the global $ var undefined, and returns the jQuery instance
  

希望对您有所帮助!