Azure-Samples / Azure-Samples/AzureMapsCodeSamples

CSP Violation in azure-maps-control v3.6.1: Inline styles blocked despite nonce-based style-src

Đang mở
#188 0 bình luận 0 reaction 0 người được giao Xem trên GitHub
Ngôn ngữ chính
JavaScript
Star
373
Fork
468
Chỉ số merge pull request
Không có pull request nào được merge trong 30 ngày

Mô tả

**Current behavior**

Hi team 👋,

I'm running into an issue when attempting to render markers using `azure-maps-control` v3.6.1. Specifically, when I create an `HtmlMarker` using one of the built-in templates (`marker-thick`), the marker appears on the map but is rendered in black color, and a CSP error is thrown in the console.

Here’s the code snippet I’m using:

```js
const marker = new atlas.HtmlMarker({
htmlContent: atlas.getImageTemplate('marker-thick'),
color: '#ab2a8f',
secondaryColor: '#c9bcca',
position: [longitude, latitude],
text: '1',
});

this.azureMap.markers.add(marker);
```

The map loads correctly and other features (like layers and interactions) work as expected. However, the marker is visible on the map with a black color, and the following error appears in the browser console:

```
Refused to apply inline style because it violates the following Content Security Policy directive: "style-src 'self' 'nonce-XXXX'". Either the 'unsafe-inline' keyword, a hash ('sha256-xxxx'), or a nonce ('nonce-...') is required to enable inline execution. Note that hashes do not apply to event handlers, style attributes and javascript: navigations unless the 'unsafe-hashes' keyword is present. at atlas-esm.min.js:105
```

It appears that the built-in image templates rely on inline styles that are blocked by our CSP settings.

---

**Expected behavior**

The marker should render at the specified position on the map, styled according to the `marker-thick` template and using the provided color and text values, without triggering CSP violations.

Additionally, `azure-maps-control` should comply with strict CSP configurations by either:

* Avoiding the use of inline styles when external stylesheets are present, or
* Providing a way to attach a CSP nonce to dynamically injected styles, so they are not blocked by the browser.

This would allow the library to be safely used in environments with secure CSP policies without requiring `'unsafe-inline'` or weakening the directive.

---

**What I’ve tried**

* Verified the map is fully initialized before adding the marker.
* CSP is already configured with a valid nonce, and works for other inline styles when used appropriately.

---

**Question**

Is there a known issue with using `atlas.getImageTemplate` in environments with strict CSP configurations?
Is there a way to apply a nonce or otherwise allow these templates to render correctly under a secure CSP?
Any advice would be appreciated — we'd prefer not to loosen our policy with `'unsafe-inline'`.

Thanks in advance!

Hướng dẫn đóng góp

Mở hướng dẫn đóng góp

Đánh giá

Issue này chưa được đánh giá.

Nhận issue mới trong hộp thư của bạn

Bản tóm tắt ngắn những issue GitHub phù hợp với người mới.