IssueTracker

There exists a bug in main.js file of the google maps v3 embed api when using a strict CSP.

The steps to reproduce this issue is as follows:

1. Implement a CSP according to: https://developers.google.com/maps/documentation/javascript/content-security-policy
2. Have no style tags (only link tags to attach CSS to page)
3. Use the <gmp-map> element with the script embed (https://maps.googleapis.com/maps/api/js?key=KEY&loading=async&libraries=maps,marker&v=beta)

I am not sure if this affects any of the previous version of the embed API, or any of the other ways to load the library.

A production website that shows the error is here: https://www.placard-printing.co.uk/info/contact-us?test=1

if you omit the test parameter or set it to any value other than 0, it will apply my work around to fix the issue.

The issue itself seems to be in this function in the main.js file (sorry, I can only see the compiled code)

_.fq = (a,{root: b=document.head, xv: c}={})=>{
    c && (a = a.replace(/(\W)left(\W)/g, "$1`$2").replace(/(\W)right(\W)/g, "$1left$2").replace(/(\W)`(\W)/g, "$1right$2"));
    c = _.Nf("STYLE");
    c.appendChild(document.createTextNode(a));
    (a = nba("style", window)) && c.setAttribute("nonce", a);
    b.insertBefore(c, b.firstChild);
    return c
}

or more specifically this part:

a = nba("style", window)

if we look at the nba function, it is this:

nba = function(a, b) {
    return (a = b.document.querySelector?.(`${a}[nonce]`)) ? a.nonce || a.getAttribute("nonce") || "" : ""
}

This function is trying to find an element in the dom, and capture and return its nonce value. This is used to allow the script or style tag to be used in a CSP secure context.

The problem lies when there isn't any style tags present in the dom. The nba function will return an empty string and therefore the style tag will not be accepted by the CSP. My workaround is to inject an empty style tag with a nonce attribute in the dom whenever I need to use the library. Simply:

<style nonce="${NONCE_VALUE}"></style>

However, a fix could be implemented by simply falling back to a link tag or a script tag instead. (I have implemented this fix locally on my machine using a local override, however, I guess it would need to go through a round of testing).

a = nba("style", window) || nba("link", window) || nba("script", window)

or the full function:

_.fq = (a,{root: b=document.head, xv: c}={})=>{
    c && (a = a.replace(/(\W)left(\W)/g, "$1`$2").replace(/(\W)right(\W)/g, "$1left$2").replace(/(\W)`(\W)/g, "$1right$2"));
    c = _.Nf("STYLE");
    c.appendChild(document.createTextNode(a));
    (a = nba("style", window) || nba("link", window) || nba("script", window)) && c.setAttribute("nonce", a);
    b.insertBefore(c, b.firstChild);
    return c
}

My CSP policy for reference:

base-uri 'none';
object-src 'none';
default-src 'self';
script-src 'self' 'nonce-0K9xnkgeFYz9gItDHwePBb9Kb6XFTOK6dQP2iaA7' 'strict-dynamic' https: 'unsafe-inline' 'unsafe-eval' blob:;
style-src 'self' 'nonce-0K9xnkgeFYz9gItDHwePBb9Kb6XFTOK6dQP2iaA7' https://fonts.googleapis.com;
img-src 'self' https://*.googleapis.com https://*.gstatic.com *.google.com *.googleusercontent.com data:;
frame-src *.google.com;
connect-src 'self' https://*.googleapis.com *.google.com https://*.gstatic.com data: blob:;
font-src 'self' https://fonts.gstatic.com;
worker-src blob:

and the recommended CSP policy by google:

script-src 'nonce-{script value}' 'strict-dynamic' https: 'unsafe-eval' blob:;
style-src 'nonce-{style value}' https://fonts.googleapis.com;
frame-src *.google.com;
img-src 'self' https://*.googleapis.com https://*.gstatic.com *.google.com *.googleusercontent.com data:;
connect-src 'self' https://*.googleapis.com *.google.com https://*.gstatic.com data: blob:;
font-src https://fonts.gstatic.com;
worker-src blob:;