Announcing Dash Bio 1.0.0 🎉 : a one-stop-shop for bioinformatics and drug development visualizations.

dcc.Clipboard is not working in my company network

I have a Dash app that is running correctly locally. However, when the app is running in my company network the dcc.Clipboard stops working. Actually, the icon disappears

yesterday I tried to uptade my Dash to Dash 2.0… but it didn’t work too :frowning:

my clipboard component:

html.Div([
dcc.Clipboard( id=‘clipboard’,
target_id=“output”,
title=“Copy”,
style={
‘display’: ‘inline-block’,
“fontSize”: 20,
“horizontalAlign”: “right”,
},
),],style={‘display’:“none”}),

1 Like

Hi @alemedeiros and welcome to the Dash community.

The Clipboard uses the Clipboard API which is not supported by some older browsers. You can find a browser compatibiitiy list here. If this is causing the icon to disappear, then you will see a warning message in the browser console.

2 Likes

thanks for the help Ann! But I don’t think this is the problem. My friends are using chrome.
in this browser compatibiitiy list chrome seems friendly with the dcc.clipboard

1 Like

If the icon disappears, that means we simply couldn’t find the clipboard API (for completeness, here is where we conditionally render, based on clipboardAPI = navigator.clipboard)

You can test this yourself: open the javascript console in your browser and type navigator.clipboard. You should see something like:
Screen Shot 2021-08-26 at 11.08.23 AM
If you instead see undefined or null or some such, the clipboard has been disabled. If so, my guess is your company has some IT policy blocking the clipboard, on the theory that a malicious site could harvest a password or something this way…

1 Like


Capturar1
that’s weird… I thought chrome was compatible!

I’m using chrome and my friends too
tks Ann and Alex

Since you mentioned that it works locally, this may be caused by restrictions on the company network rather than the browser itself.

1 Like

the Real Solution:

app.clientside_callback(
“”"
function placeholder(n_clicks, value) {
window.value_to_copy = value.value;
var copyText = document.getElementById(“output4”);
if(copyText !== null){

      copyText.select();
      copyText.setSelectionRange(0, 99999);
      document.execCommand("copy");
      
      }
  }
 


""",
Output("teste4", "children"),
Input("button", "n_clicks"),
State("textarea", "value"),

)

1 Like

@alemedeiros or anyone else here, can you elaborate on how the code your last response contained fixed this? Sorry to revive this old post but it’s all I can find on the topic. Is this solution to use instead of using dcc.Clipboard entirely?

My dcc.Clipboard icon disappeared when I deployed my Dash app to Heroku this week. My code otherwise looks essentially the same as the original post here.

  • Icon appeared in Chrome on my MacBook throughout local development.

  • Icon is now gone in Chrome on same computer at production address, deployed with heroku git.

Maybe Heroku has something similar blocking the clipboard to some corporate policies? I knew from the docs that it wouldn’t work on all browsers, but missed this disappearance in my final staging testing.

In case anyone is following or runs into this, I realized the icon is correctly appearing, within a modal triggered by a button, at the default …herokuapp.com address generated for my app. The change for me is happening when the app is redirected with the CNAME flattening/CNAME alias method to my own registered subdomain URL, where the icon does not show up.

So I’ll be researching that, talking to my domain provider support, in addition to trying the code revision recommended here.

FYI, the steps where this occurred for me…

  1. Click on app served at local machine address, opening it in Chrome, and confirm clipboard paper stack icon appears as expected next to text area (upper right outside text area).
  2. Deploy to staging on Heroku with 3 build packs: SSH, git LFS, recommended built-in Python pack.
  3. Click on app served at sustain-our-soil-staging.herokuapp.com Heroku address, opening it in Chrome, and confirm clipboard paper stack icon appears as expected next to text area (upper right outside text area).
  4. Promote from staging to production in pipeline, and repeat step 4 with same result.
  5. Follow CName flattened and CNAME alias steps as recommended in both Heroku and Porkbun domain manager documentation, to redirect app to be served on my own subdomain at sustain-our-soil.kathrynhurchla.com. (Custom Domain Names for Apps | Heroku Dev Center | How to connect Herokuapp with Porkbun - Porkbun Knowledge Base)
  6. Click on app served at sustain-our-soil.kathrynhurchla.com Porkbun registered address, opening it in Chrome, and now the clipboard paper stack icon has disappeared appears from its location next to text area.
  7. Confirmed icon does still appear correctly when visiting app at Heroku address, although it does not appear at my alias subdomain.
1 Like

Thanks for sharing the details of the problem, @kmhurchla .
I’d like to see how it worked on the heroku site directly, but that link seems to be broken.

1 Like

Hi @kmhurchla

Thanks for providing the details, it’s very helpful.

Here’s one more thing to check. The navigator.clipboard is only available in secure contexts (https) I noticed that your site with the CNAME does not use https: http://sustain-our-soil.kathrynhurchla.com/

BTW - your site is very interesting – I didn’t know Soil Organic Carbon Density was a factor in climate change. Please feel free to create a show-and-tell post. I sure others would like to know more about this topic too :slight_smile:

1 Like

I edited post to http://sustain-our-soil-staging.herokuapp.com/

Sorry about that Adam, it’s at least visible there.

1 Like

I suspected security might be the issue Ann Marie. Thank you for confirming that. I can’t load the SSL certificate right now to use https but will give that a try and confirm.

Meant to get around to that anyway! Makes sense it would require a secure site because it’s interacting with folks’ clipboards.

100% the lack of a secure site was my issue with clipboard icon not appearing @AnnMarieW Thank you! The copy icon now appears as expected with SSL enabled at https://sustain-our-soil.kathrynhurchla.com/

1 Like