fix: img csp nonce

[yordis]

Context

I noticed that my CSP configuration was not working, and then I realized that the value of nonce for these images was empty.

Digging into it, I also found this mdn/sprints#3650 (comment)

Tested

• Arc
• Chrome
• Safari
• Firefox

[josevalim]

Thank you for the report. The best solution is probably to move the image into CSS, either into assets, or some inline style:

<style nonce="your-generated-nonce">
  .data-image {
    background-image: url('data:image/png;base64,...');
  }
</style>
<div class="data-image"></div>

[yordis]

@josevalim will do that, no problem. Aside from that, do you have any clue how could be done without CSS? I tried to find the answer but I failed. Asking to document here the learning for the next person, or in cases we couldn't move it to CSS

[josevalim]

The only other option I found was allowing data attributes in the CSP definition, but we probably don't want to impose that.

[yordis]

@josevalim ready for review

[josevalim]

@yordis can you please take a look at the tests? Thanks! I also think we should probably remove the img nonce from our docs and similar. It is not used anywhere anyway.

[josevalim]

💚 💙 💜 💛 ❤️