Real Content-Security-Policy (CSP) support

I forgot to mention that I’m referring to the WordPress version of the plugin.

I solved the problem (without modifying AddToAny plugin code), using this in my functions.php:
add_filter( ‘script_loader_tag’, ‘add_nonce_to_addtoany’, 20, 3 );

function add_nonce_to_addtoany( $tag, $handle, $src ) {
    if ( $handle === ‘addtoany-core’) {
        $nonce = ‘REs8843dQjTjyHsaB/GhbQ==’; // Static example nonce to test AddToAny, replace this with a dynamic nonce generation method

        $tag = preg_replace( ‘/page.js\’/’, ‘page.js\’ nonce=\” . esc_attr($nonce) . ‘\”, $tag, 1 );
    }
    return $tag;
}

so this generates for example:

<script type=’text/javascript’ defer src=’https://static.addtoany.com/menu/page.js‘ nonce=’REs8843dQjTjyHsaB/GhbQ==’></script>

perfectly, but now there is a new problem… AddToAny adds a style tag dynamically using Javascript and it fails due to CSP style-src directive (actually AddToAny tries to pass the nonce but it fails, i explain why later on). You can see two errors on Chrome console when the file core.oafg07ee.js executes:

Refused to apply inline style because it violates the following Content Security Policy directive: “style-src ‘self’…

refered to the line:
D.appendChild(_)

and:
_.appendChild(l))

when it try to appends the style tag dynamically.

I have analyzed the entire process and i solved again the problem with a workaround.

So maybe you can update the plugin with this workaround or something similar.

Ok, so i checked that AddToAny tries to pass the nonce when adding the tag style but it fails.

When the file https://static.addtoany.com/menu/page.js is loaded (now having the nonce added with my add_nonce_to_addtoany function), then this one loads this another file https://static.addtoany.com/menu/modules/core.oafg07ee.js by using the nonce that was passed (REs8843dQjTjyHsaB/GhbQ==) so it now add this script to the page (if you debug the core.oafg07ee.js file, before the line k.appendChild(n) is executed, write in the console n.nonce and you will see the nonce is there):

<script src=”https://static.addtoany.com/menu/modules/core.oafg07ee.js” type=”module” nonce=”REs8843dQjTjyHsaB/GhbQ==”></script>

but… Javascript files loaded as modules (type=”module”) instead of type=”text/javascript” cannot access the document.currentScript so this line in core.oafg07ee.js fails when trying to get the nonce:
h = J.currentScript && J.currentScript.nonce ? J.currentScript.nonce : null;

The nonce will be always null. If the file core.oafg07ee.js had been loaded as “text/javascript” instead of “module” the nonce would have worked and everything will be ok.

I checked that modifying the line in core.oafg07ee.js (using Override feature in Chrome Devtools that allow us to modify any file on the fly):
h = J.currentScript && J.currentScript.nonce ? J.currentScript.nonce : null;

whith this one:

h = J.currentScript && J.currentScript.nonce ? J.currentScript.nonce : (e=>{for(let t of J.querySelectorAll(“script”))if(t.src&&t.src.includes(“static.addtoany.com/menu/modules/core.oafg07ee.js”))return t.nonce;return null})();

solves perfectly the problem and now the nonce can be obtained and everything is OK, CSP works and styles can be added by AddToAny.

I explain the workaround: instead of doing document.currentScript.nonce as it is always null (because core.oafg07ee.js was loaded as a module), i iterate over all script tags in document and tries to detect which one includes “static.addtoany.com/menu/modules/core.oafg07ee.js” in “src” value. When the tag is found, now we can get the nonce.

The function without minifying it is:
let nonce = null;
const currentScriptSrc = document.currentScript ? document.currentScript.src : null;
const scripts = document.querySelectorAll(‘script’);

if (currentScriptSrc) {
nonce = document.currentScript.nonce;
} else {
const scriptFileName = ‘static.addtoany.com/menu/modules/core.oafg07ee.js’;
for (let i = 0; i < scripts.length; i++) {
if (scripts[i].src && scripts[i].src.includes(scriptFileName)) {
nonce = scripts[i].nonce;
break;
}
}
}

So, can you update the file https://static.addtoany.com/menu/modules/core.oafg07ee.js with a definitive solution like my workaround or something similar?

Thanks

I would like to try the nonce method and test if the nonce propagation works now from the /menu/modules/page.js to the menu/modules/core.xxxxxxxx.js (as i wrote before, core file cannot read it because document.currentScript doesn’t work because core file is loaded as a module)