Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[Content Security Policy] Add nonce support for <img> and other tags #3445

Closed
compulim opened this issue Sep 1, 2020 · 2 comments
Closed

[Content Security Policy] Add nonce support for <img> and other tags #3445

compulim opened this issue Sep 1, 2020 · 2 comments
Assignees
@compulim

Comments

@compulim
Copy link
Contributor

compulim commented Sep 1, 2020

Feature Request

In #3393 (PR #3443), we added a new prop nonce. This prop is currently used for injecting <style> element.

We should expand this prop to support <img> and other media elements that requires nonce to operate.

What it will change

(This CSP is not exhaustive, just to illustrate the differences.)

Today

Developer must use a URL-based source for <img> and other media elements.

<meta http-equiv="Content-Security-Policy" content="img-src https://example.com; style-src nonce-a1b2c3d" />

In Web Chat, when we render an image from the bot:

<img src="https://example.com/image.png" />

Tomorrow

Developer can use a nonce-based source for <img> and other media elements.

<meta http-equiv="Content-Security-Policy" content="img-src nonce-a1b2c3d; style-src nonce-a1b2c3d" />

In Web Chat, when we render an image from the bot, the nonce will be added:

<img nonce="a1b2c3d" src="https://example.com/image.png" />

[Enhancement]
@compulim compulim added Enhancement customer-reported Required for internal Azure reporting. Do not delete. Bot Services Required for internal Azure reporting. Do not delete. Do not change color. labels Sep 1, 2020
@compulim compulim mentioned this issue Sep 1, 2020
Merged
10 tasks
@compulim compulim changed the title Add nonce support for <img> and other tags [Content Security Policy] Add nonce support for <img> and other tags Sep 1, 2020
@compulim
Copy link
Contributor Author

compulim commented Sep 1, 2020 •
edited
Loading

Tested on Edge 87.0.627.0 canary.

Currently, <img> element is not nonceable.

image

And in the definition of <img> element, there is no nonce attribute, https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Img.

The following HTML will fail to load the image:

<!DOCTYPE html>

<head>
  <meta http-equiv="Content-Security-Policy" content="img-src nonce-a1b2c3" />
</head>

<body>
  <img nonce="a1b2c3" src="https://interactive-examples.mdn.mozilla.net/media/cc0-images/grapefruit-slice-332-332.jpg" />
</body>

</html>

With the following error:

Refused to load the image 'https://interactive-examples.mdn.mozilla.net/media/cc0-images/grapefruit-slice-332-332.jpg' because it violates the following Content Security Policy directive: "img-src nonce-a1b2c3".

localhost/:1 Refused to load the image 'http://localhost:5002/favicon.ico' because it violates the following Content Security Policy directive: "img-src nonce-a1b2c3".

@compulim compulim mentioned this issue Sep 1, 2020
Closed
3 tasks
@compulim
Copy link
Contributor Author

compulim commented Sep 1, 2020

Looks like this is not doable until browser support nonce attribute in <img> and other media elements.

@compulim compulim closed this as completed Sep 1, 2020
@compulim compulim removed Bot Services Required for internal Azure reporting. Do not delete. Do not change color. customer-reported Required for internal Azure reporting. Do not delete. labels Sep 1, 2020
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@compulim compulim

Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
1 participant
@compulim