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

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”}),

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

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:
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…

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"),
              
@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.

Screen Shot 2021-12-21 at 9.56.58 AM1920×1074 141 KB
Icon is now gone in Chrome on same computer at production address, deployed with heroku git.
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…
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).
Deploy to staging on Heroku with 3 build packs: SSH, git LFS, recommended built-in Python pack.
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).
Promote from staging to production in pipeline, and repeat step 4 with same result.
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)
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.
Confirmed icon does still appear correctly when visiting app at Heroku address, although it does not appear at my alias subdomain.
              
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 
              
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.