Skip to content

[Bug]: React List component - Content Security Policy #28465

Description

@jayrosen-design

Library

React Northstar / v0 (@fluentui/react-northstar)

System Info

Refused to load the image '<URL>' because it violates the following Content Security Policy directive: "img-src <URL> <URL> <URL> <URL> <URL> *.clarity.ms <URL> <URL> <URL> <URL> <URL> <URL> <URL> <URL> <URL> data: <URL> *.cdn.office.net <URL>".

fluentui#/controls/web/list:1 Refused to load the image 'https://via.placeholder.com/230x230' because it violates the following Content Security Policy directive: "img-src https://cdn.graph.office.net https://c1.microsoft.com https://img-prod-cms-rt-microsoft-com.akamaized.net https://c.bing.com https://img-prod-cms-rt-microsoft-com.akamaized.net *.clarity.ms https://devblogs.microsoft.com https://web.vortex.data.microsoft.com https://storage.live.com https://store-images.s-microsoft.com https://store-iamges.microsoft.com https://musicimage.xboxlive.com https://arc.msn.com https://developer.microsoft.com https://graphprodblobstorage.blob.core.windows.net data: https://static2.sharepointonline.com *.cdn.office.net https://fabricweb.azureedge.net".

Are you reporting Accessibility issue?

yes

Reproduction

https://developer.microsoft.com/en-us/fluentui#/controls/web/list

Bug Description

Actual Behavior

https://developer.microsoft.com/en-us/fluentui#/controls/web/list

Line 90 of Grid example has 5,000 broken images.
<img src={item.thumbnail} className={classNames.listGridExampleImage} />

The output html for image is missing the https:// causing Content Security Policy issues.
<img src="//via.placeholder.com/230x230" class="listGridExampleImage-208">

Expected Behavior

<img src="https://via.placeholder.com/230x230" class="listGridExampleImage-208">
<img src="https://via.placeholder.com/230x230" class="listGridExampleImage-208">

Logs

No response

Requested priority

Normal

Products/sites affected

React List

Are you willing to submit a PR to fix?

yes

Validations

  • Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
  • The provided reproduction is a minimal reproducible example of the bug.

Metadata

Metadata

Assignees

Type

No type

Fields

No fields configured for issues without a type.

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions