ZicoPL ZicoPL - 1 year ago 54
Ajax Question

ajax doesn't execute or receive external scripts

This is a follow up to my previous question (unresolved).

Directives in .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 Log -> report.txt file from my domain: Link
remove /csp/report_2017-02-07.txt from Link then you get link to my own site

I try load external script via ajax get metod:

$.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);
}
})


I spent a lot of time finding the error & what blocks the script execution..
Need help, please..

Answer Source

You seem to have different stuff here that cause errors:

  • first, a bunch of your first CSP errors coming up come from styles that are declared "inline" (with attribute style= directly in the html tags). To allow this, you have to declare it like this:

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

  • following the same scheme, the CSP will disallow all inline javascript too, that maybe doesn't come from you, but can be in the librairies (never declared a nonce as a source, but i trust your word on that, no time to search right now):

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

  • you seem to load external images, while it is not declared in the CSP, try adding them (you can be more restrictive on the path, the * here allows you to access all sub-domains of the specified domain):

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

  • at last, your main problem seems to be the loading of the resources itself, maybe their order or what, but your loading sequence is not stable. Most of the time it will actually load the lib file, but the rest of the time i have a jquery undefined error (ReferenceError: $ is not defined). When the lib loads, an element is not defined when it is called (jQuery.Deferred exception: Swiper is not defined @index.js:380:4). Maybe you could try to move your jQuery inclusion to the head, or maybe declare the no conflict like this (i never saw it done the way you do it before, dunno if it is legit):

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

Hope that helps!

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download