Map not loading due to CSP require-trusted-types-for

[TheGroundZero]

maplibre-gl-js version: v5.19.0 (https://unpkg.com/maplibre-gl/dist/maplibre-gl.js)

browser: Firefox

Steps to Trigger Behavior

1. Import maplibre-gl.js via unpkg
2. Add a map to your webpage
3. Check dev console for CSP errors

Link to Demonstration

• Without CSP directive: https://jsbin.com/qusuhuyoli/edit?html,output
• With CSP directive: https://jsbin.com/lopitipofo/edit?html,output

Expected Behavior

Map loading fine

Actual Behavior

[TheGroundZero]

The HTTP Content-Security-Policy (CSP) require-trusted-types-for directive instructs user agents to control the data passed to DOM XSS sink functions, like Element.innerHTML setter.

When used, those functions only accept non-spoofable, typed values created by Trusted Type policies, and reject strings. Together with the trusted-types directive, which guards creation of Trusted Type policies, this allows authors to define rules guarding writing values to the DOM and thus reducing the DOM XSS attack surface to small, isolated parts of the web application codebase, facilitating their monitoring and code review.

// Content-Security-Policy: require-trusted-types-for 'script'; trusted-types foo;

const attackerInput = '<svg onload="alert(/cross-site-scripting/)" />';
const el = document.createElement("div");

if (typeof trustedTypes !== "undefined") {
  // Create a policy that can create TrustedHTML values
  // after sanitizing the input strings with DOMPurify library.
  const sanitizer = trustedTypes.createPolicy("foo", {
    createHTML: (input) => DOMPurify.sanitize(input),
  });

  el.innerHTML = sanitizer.createHTML(attackerInput); // Puts the sanitized value into the DOM.
  el.innerHTML = attackerInput; // Rejects a string value; throws a TypeError.
}

~ https://developer.mozilla.org/en-US/docs/Web/HTTP/Reference/Headers/Content-Security-Policy/require-trusted-types-for

[HarelM]

It's not clear from the linked jsbin what the issue is.
Please add more details and make sure you read the relevant part of the CSP docs.

[TheGroundZero]

If a website applies the require-trusted-types-for 'script' CSP directive, it will block maplibre-gl-js's attempts to manipulate the DOM.
To fix this, any strings that are passed to e.g. innerHTML need to pass through a trustedTypes sanitizer.

Compare with this jsbin: https://jsbin.com/lopitipofo/edit?html,output

It might be enough to update this method?

[HarelM]

I'm not sure I know how to solve this in a way that won't break for "old-ish" browsers.
Feel free to submit a PR to address this.
The sanitization method is not the best, so if the browser has a better API to solve this it would be a lot better than what I wrote...

[TheGroundZero]

The mdn docs show what seems like a good method to deal with older browsers.
First check if trustedTypes exists in the browser's model, only then add a policy.

This one does use the DOMPurify library. Which would add a dependency.

if (typeof trustedTypes !== "undefined") {
  const sanitizer = trustedTypes.createPolicy("maplibre-policy", {
    createHTML: (input) => DOMPurify.sanitize(input),
  });
}

An admin would then have to add maplibre-policy to the CSP header.

Content-Security-Policy: require-trusted-types-for 'script'; trusted-types maplibre-policy 'allow-duplicates';

I believe sanitizer.createHTML(html) would then be inserted between DOM.clean(html) and the return statement?
Or have 1 return statement within that if as return sanitizer.createHTML(html.innerHTML); and one outside for older browsers?

Depends on whether the document.createElement('body'); would also be targetted by the CSP directive.

[HarelM]

Feel free to submit a PR, I'll be happy to review it.