kytta / shareon

📯 Lightweight, stylish, and ethical share buttons for popular social networks
https://shareon.js.org/
MIT License
465 stars 25 forks source link

Describe the `document.navigator` security caveats in the docs #56

Open nasirkhan opened 1 year ago

nasirkhan commented 1 year ago

Thanks for building this awesome tool.

I was trying to use it in one of my projects, I am using Vite to build the project.

I added the CSS and used the following code for JS.

<script type="module">
  import { init } from "https://cdn.jsdelivr.net/npm/shareon@2/dist/shareon.es.js";
  // do something
  init();
</script>

After that all the buttons worked, but copy-url throws an error when I click on that button. Even after initialization, it shows a warning ReferenceError: temp0 is not defined. The error

TypeError: navigator.clipboard is undefined
    u https://cdn.jsdelivr.net/npm/shareon@2/dist/shareon.es.js:27
    u https://cdn.jsdelivr.net/npm/shareon@2/dist/shareon.es.js:25
    <anonymous> http://localhost/products/123:417

I am testing from Firefox, I would like to mention that your demo at shareon.js.org/ works fine from the same browser.

Can you please help me to find and fix the issue?

kytta commented 1 year ago

Now that's weird! I'll take a look at it during this week

kytta commented 1 year ago

Although, take a look at this:

https://stackoverflow.com/a/51823007/4735420

Can it be that you just open the HTML file in the browser without actually serving it? If so, this will not work.

Try using vite dev or vite preview to run it on a localhost server. If you publish your website online, it should also work

nasirkhan commented 1 year ago

I was using yarn dev and even used yarn build to build my project. everything else is working fine with this approach. Even other share buttons are working as well. The issue is only with the copy url

kytta commented 1 year ago

Can you provide an example of your setup? Here's my attempt at a MRE: https://stackblitz.com/edit/vitejs-vite-37ttzf?file=index.html,package.json&terminal=dev and the button works here.

Again, if you do not have HTTPS on your website or open it by double-clicking the HTML file (that is, the protocol is file:///), the button will not work. It only works for https:// websites, with the only exception being https://localhost

This works for me when developing Shareon. If you clone the repo and run pnpm dev, it will launch my dev server (on localhost), and the button will work there, too

nasirkhan commented 1 year ago

thanks for looking into the issue. I was running the site from a local virtual host without https. That might be the reason for getting that error. I opened the site via a https URL and it worked perfectly.

You may add this to the doc.

kytta commented 1 year ago

Glad I was able to resolve this! I'll reopen this issue until I've appended to the documentation