Local data don't work on non-secure environments

[andreslucena]

Describe the bug

When following the instructions available in the documentation about the emojibase data without a CDN, sometimes it doesn't work.

To Reproduce

Follow the instrutions in the documentation site about not using the CDN for the emojis data, and check it out on an untrusted context.

To show it more easily, I created a proof of concept of the bug:

git clone https://github.com/andreslucena/picmo-bug-emojibase-local-data
cd picmo-bug-emojibase-local-data
npm install
npm run build-inline
cd dist/
# open a webserver
python3 -m http.server 9000
# open the webpage with a browser 
xdg-open http://localhost:9000/inline.html
# check out the same page but with a domain that resolves to localhost
xdg-open http://localtest.me:9000/inline.html

Expected behavior

It should work in the same environments as the default solution (CDN) works

Stacktrace

The error it gives is the following:

Uncaught (in promise) TypeError: crypto.subtle is undefined

What is happening is that the browser detects that this is an insecure context and doesn't provide the crypto API. See more details at stackoveflow: How to use SubtleCrypto in chrome (window.crypto.subtle is undefined)

---

I'd want to know if:

1. This is indeed considered a bug. If not, I think we should add a warning in the documentation that this feature only works in secure contexts (localhost and web servers with HTTPS)
2. Would you be open for me to make a PR solving this issue.

As the problem is with this line:

picmo/packages/picmo/src/util.ts

Line 102 in 5bb82fd

const hashBuffer = await crypto.subtle.digest('SHA-256', arr);

Then I'm afraid that the solution would be to introduce a new dependency, such as js-sha256, that seems a well maintained and small library.

(Let me know if there's another approach for solving this!)

[joeattardi]

Hi, thanks for reporting this.

I am not accepting PRs right now, as I am in the midst of deciding the future of this library. I don't have the free time I used to have, and usage of the library has declined, so I'm considering winding it down and deprecating the library.

Given that, I'd hate to waste your time having you submit a PR for a library that might not be maintained much longer.

[andreslucena]

Thanks for the quick answer and the honesty!

For what is worth, as I know that most of the times a developer don't have visibility on the usage of their library, I work with Decidim, an open source web platform for citizen participation that's being used in Barcelona, NYC, Brazil, France, the European Commission, Helsinki, City of Mexico and other places. Since 2021 we've been using PicMo (when it was called Emoji Button). Thanks for your work!